前言:
而今兄弟们对“小米手机导航键在哪里设置”大概比较注意,同学们都想要学习一些“小米手机导航键在哪里设置”的相关内容。那么小编在网上汇集了一些对于“小米手机导航键在哪里设置””的相关内容,希望你们能喜欢,各位老铁们一起来了解一下吧!运行效果
技术要点ul 无序列表,li 块级元素,独占一行,使用一般要清除默认样式 list-style: none;a标签,行内元素,设置大小等属性需要进行模式转换 display: inline-block;text-decoration: none 去掉a标签文字的下划线li:hover 鼠标经过伪类选择器源码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小米导航栏</title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ border: 1px solid #ff6700; width: 230px; margin: 100px auto; } li { list-style: none; width: 230px; } a{ display: inline-block; width: 200px; height: 40px; font-size: 14px; color: #747477; text-decoration: none; text-indent:2em; line-height: 40px; } li:hover { background-color: #ff6700; color: #f8f9ff; } span { font-size: 20px; font-weight: 700; color: #e7e9fc; } </style></head><body> <div class="box"> <ul> <li><a href="#">手机</a> <span> > </span></li> <li><a href="#">电视</a><span> > </span></li> <li><a href="#">家电</a><span> > </span></li> <li><a href="#">智能 路由器</a><span> > </span></li> <li><a href="#">笔记本 平板</a><span> > </span></li> <li><a href="#">健康 儿童</a><span> > </span></li> </ul> </div></body></html>
版权声明:
本站文章均来自互联网搜集,如有侵犯您的权益,请联系我们删除,谢谢。
标签: #小米手机导航键在哪里设置