1、首先我们来看一下效果图，横向下拉菜单。
2、接下来我们看一下w3c的菜单，和小编的菜单对比一下。两者内容相同，但w3c的菜单不支持下拉，缺乏动态效果，显得死板。选中效果也不明显。不过他的网页是框架式结构，菜单相对来说还是导向性很明确的。而且将信息分成几大块，每大块有分为几小块，这样的排版很整齐，也简洁。
3、代码分析，这是代码中唯一的一点js，作用是更改下面菜单的class，配合样式表（CSS）可以达到动态效果，比如下拉菜单的下拉功能、选中显示，都是这样做到的。可以说，整个菜单主要部分都是DIV+CSS。而不是JS
4、这是所有的css部分，通过css的继承属性，来让代码达到利用率最大化。通过子类覆盖父类的属性，来让总属性利用率增加，但缺点是代码结构模糊，对新手来说难度较大。
5、接下来是HTML，这里给出两段结构，也就是两列下拉菜单，其他的格式是一样的，就不在全部截图了。链接我涂掉了，百度经验不让带链接。菜单链接你做的肯定跟我不一样，看链接也没用。如图，那个id：nav十分重要，不能丢！！它相当于整个div容器，虽然标签不是div，但思想一样。
6、最后再来看一下效果图吧！
这个可以换种方式实现，首先select的样式每个浏览器都有其默认的样式，需要先去除这些默认样式，其次，select里面的样式诸如箭头，下拉框等等的样式，这里提供一种思路，就是在select的外层添加一个div，对这个div元素设置样式，select元素则是没样式，从而达到一种掩眼法的效果，实现方式如下：
<!-- html 布局 --><div id="selectStyle">
<select id="select">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
</select>
</div>
首先要去掉 #select 的默认样式：
/* 去掉默认样式，设置新的样式 */#select{
display:block
width:100%
height:100%
box-sizing:border-box
background:none
border:1px solid #222
outline:none
-webkit-appearance:none
padding:0 5px
line-height:inherit
color:inherit
cursor:default
font-size:14px
position:relative
z-index:3
}
#select option{
color:#222
}
#select option:hover{
color:#fff
}
#select option:checked{
background:#535353
color:#fff
}
然后在外层div#selectStyle设置自定义样式
#selectStyle{display:block
margin:0 auto
overflow:hidden
height:30px
width:240px
border-radius:0
background:#535353 url("箭头图片地址") right center no-repeat
background-size:auto 80%
color:#fff
line-height:2
/* 如果不想加图片，
则可以设置一个自己的三角形样式，
如下的自定义方式，
见代码1 */
position:relative
z-index:1
}
/* 代码1 */
#selectStyle:before{
position:absolute
z-index:1
top:50%
right:10px
margin-top:-2.5px
display:block
width:0
height:0
border-style:solid
border-width:5px 5px 0 5px
border-color:#fff transparent transparent transparent
content:""
}
/* 代码1 */
#selectStyle:after{
position:absolute
z-index:1
top:50%
right:10px
margin-top:-3.5px
display:block
width:0
height:0
border-style:solid
border-width:5px 5px 0 5px
border-color:#535353 transparent transparent transparent
content:""
}
以上就是自定义select样式的方法；
同时也可以完全不要select这个元素使用div+css来自定义一个跟select一样效果的下拉框（需要Javascript辅助）。
一行代码就能让我的网站支持代码高亮的工具库，也支持在 Vue 中使用，强烈推荐给大家。
highlight.js 是一款使用 javascript 开发代码高亮工具库，能够让网页上的代码显示接近我们使用的代码编辑器的高亮样式，从而看起来更舒服，增强阅读体验。
常来我网站的小伙伴都知道，我的文章有一个栏目是“前端”，主要推荐一下实用的前端开源项目或者组件库，写技术类文章免不了要贴代码，我的网站基于 wordpress 搭建，此前我一直为找一款代码高亮插件烦恼，但大部分 wordpress 的代码高亮插件实在太臃肿，出来的样式又不美观。大多时候是截图 VsCode 的代码界面，甚至还用过 codepng 这个工具把代码变成图片贴在文章中，但这样做是美观了，但也存在2个问题：
最终还是找到了 highlight.js，完美解决了上面两个问题，而且配置简单，演示漂亮，定制化简单。不禁感叹：用纯前端的方式解决，才能精准控制，实现想要的效果。
下面以我的网站为例，展示将 highlight.js 用在我们的项目上的方法。首先 highlight.js 支持 cdn 直接引入和 npm 安装，我的网站基于 wordpress 开发，主题是自己写的，最简单的方式就是在文章详情页引入 highlight.js 和主题样式。
虽然 highlight.js 支持几百种开发语言，但为了将文件体积控制到最小，我们可以点击“get version”按钮进入下载页，通过勾选我们需要的开发语言，来构建最轻量的库。
下载解压后得到的 highlight.min.js 就是我们需要引入的 js 文件，主题样式都在 style 文件夹里，我选择了一个比较喜欢的 monokai-sublime 主题，只需要一个 css 文件，然后初始化：
就是这么简单，highlight.js 会自动将文章中的
点击查看本次分享的网址以及代码高亮效果
highlight.js - 让网页上的代码高亮美化的免费开源工具库 那些免费的砖
