前言
因項目需求棕诵，老板要求用element-ui快速搭建一個官網(wǎng)出來纪蜒。根據(jù) ui 給出的設(shè)計稿蹭秋，有許多組件的默認樣式需要修改扰付。以下是自己的最終結(jié)構(gòu)和樣式。
HTML部分
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">首頁</el-menu-item>
<el-submenu index="2">
<template slot="title">
<div class="show">產(chǎn)品展示</div>
</template>
<div class="menu-item">
<ul>
<li>下拉菜單1</li>
<li>下拉菜單2</li>
</ul>
</div>
</el-submenu>
<el-menu-item index="3" >商業(yè)合作</el-menu-item>
<el-menu-item index="4">新聞中心</el-menu-item>
<el-menu-item index="5">關(guān)于我們</el-menu-item>
</el-menu>
因為默認的下拉菜單無法修改樣式（也可能我太菜仁讨，找不到在哪里修改）羽莺，但是ui希望是一個寬屏的下拉菜單，就刪除了原有的結(jié)構(gòu)洞豁，自己放了一個li標簽上去盐固。
css部分
<style> //一定要刪除 scoped 不然樣式可能無法覆蓋
[class*=" el-icon-"], [class^=el-icon-] { //刪除了導(dǎo)航菜單上的小箭頭
display: none !important;
}
</style>
大部分的樣式都可以通過查看樣式的類名進行覆蓋，覆蓋不了就增加自己所寫的類型的權(quán)重丈挟，實在不行就刁卜！important，再不行就刪除元素自己寫吧曙咽。蛔趴。。
