简单导航下拉框_PHP中文网手记

摘要：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>淘宝导航</title> <link rel="stylesheet" href=&qu

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>淘宝导航</title>
   <link rel="stylesheet" href="css/index.css">
   <link rel="stylesheet" href="font/css/font-awesome.min.css">
</head>
<body>
<div>
 <div>
     <div>
         <a href="">中国大陆 <i class=" fa fa-angle-down"></i></a>
         <a href="" style="color: #F22E00">亲,请登录</a>
         <a href="">免费注册</a>
         <a href="">手机逛淘宝</a>
     </div>
     <div>
         <a href="">我的淘宝<i class=" fa fa-angle-down"></i>
             <ul>
                 <li>已买到的宝贝</li>
                 <li>我的足迹</li>
             </ul>
         </a>


         <a href=""><i class=" fa fa-cart-plus"></i> &nbsp; 购物车 </a>
         <a href=""><i class=" fa fa-star"></i>收藏夹<i class=" fa fa-angle-down"></i></a>
         <a href="">商品分类</a>
         <a href="">卖家中心<i class=" fa fa-angle-down"></i>
         <ul>
             <li>免费开店</li>
             <li>已卖出的宝贝</li>
             <li>出售中的宝贝</li>
             <li>卖家服务市场</li>
             <li>卖家培训中心</li>
         </ul>


         </a>
         <a href="">联系客服<i class=" fa fa-angle-down"></i></a>
         <a href="">网站导航<i class=" fa fa-angle-down"></i></a>
     </div>

 </div>


</div>
</body>
</html>


css 样式
*{
   margin: 0;
   padding: 0;
}
li{
 /*  !**!list-style:none;!**!*/
}


li{
   list-style-type:none;
}
.header{
   width: 100%;
/*    height: 40px;*/
  background-color: #F5F5F5;  }

.ba ul{
   display: none;
   color:#3C3C3C;
   border: 1px #F5F5F5 solid;
   position: absolute;

}
.aaa li:hover{
   color:#F22E00;
}

a{
   text-decoration:none;
   color: #3C3C3C;
   display: inline-block;
   margin: 0 5px;
}

a:hover{
   color: #F22E00;
}
.ba:hover{
   background-color:#ffffff;
}

.header_content{
   width: 1190px;
   height: 36px;
   margin: 0 auto;
   line-height: 40px;

}

.header_left{
   height: 36px;
   float: left;


}

.header_right{
   height: 36px;
   float: right;
   position: relative;
}

.ba:hover ul{
   display: block;
}
.sss:hover ul{display: block; color:#3C3C3C }

.sss ul{
   display: none;
   position: absolute;
}

.sss ul li:hover {
   color: #F22E00;
}

感觉在写样式的时候有点杂乱。。。。有时候都不知道具体在写那个位置的样式

批改老师：韦小宝批改时间：2018-11-02 14:58:30
老师总结：写的很完整！样式可以内嵌到html代码的某些位置例如body和head之间！再或者外部来进行引入啊！这样写的确是不太好！

简单导航下拉框

热门词条