龙空技术网

模仿小米侧边导航栏工具

程序员COW哥 133

前言:

而今兄弟们对“小米手机导航键在哪里设置”大概比较注意,同学们都想要学习一些“小米手机导航键在哪里设置”的相关内容。那么小编在网上汇集了一些对于“小米手机导航键在哪里设置””的相关内容,希望你们能喜欢,各位老铁们一起来了解一下吧!

运行效果

效果图

技术要点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>

标签: #小米手机导航键在哪里设置