摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>iconfont</title><link rel="stylesheet" href="https://netdna.bootstrapcdn.com/fon
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iconfont</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
*{margin:0;padding:0;}
.box{background-color:#090723;height:55px;width:100%;}
.nav{width:1180px;height: 55px;margin:0 auto;}
.clear{clear:both;}
.logo{width:125px;height:55px;float:left;margin-right: 20px;}
.left{float:left;}
.right{float:right;}
h2{color:#fff;font-family:'微軟雅黑';line-height: 55px;}
a{text-decoration:none;color:#aaa;padding:0 10px;line-height:55px;display:inline-block;font-size: 14px;}
a:hover{color:#fff;}
.shou{color:#fff;}
img:hover{color: #fff;line-height: 55px;}
ul li{list-style: none;}
.com ul{position: absolute;text-align: left;background-color:#000;border-radius:5px;margin-left: -20px;display: none;}
.com{position: relative;}
.com:hover ul{display: block;}
.com ul li{width:80px;height:36px;text-align:left;line-height:36px;color:#666;font-size:12px;display:inline-block;padding-left:20px;}
.com ul li:hover{background-color:#1a182e;color:#fff; }
.zong{width:1180px;margin:0 auto;margin-top: 20px;color:#090723;}
</style>
</head>
<body>
<div>
<div>
<div>
<h2>iconfont</h2>
</div>
<div>
<a href="#">首頁</a>
<a href="#">圖標庫
<ul>
<li>官方圖標庫</li>
<li>多色圖標庫</li>
<li>單色圖標庫</li>
<li>所有圖標庫</li>
</ul>
</a>
<a href="#">圖標管理
<ul>
<li>我的圖標</li>
<li>我的收藏</li>
<li>我的項目</li>
</ul>
</a>
<a href="#">阿里巴巴普惠體</a>
<a href="#">幫助
<ul>
<li>功能介紹</li>
<li>代碼應用</li>
<li>圖標繪制</li>
<li>相關文章</li>
</ul>
</a>
<a href="#">活動</a>
<a href="#"><i class="fa fa-ellipsis-h" style="font-size:25px;line-height:55px;"></i>
<ul>
<li>在線字體</li>
<li>功能建議</li>
</ul>
</a>
</div>
<div class="right com">
<a href="#"><i class="fa fa-user-circle" style="font-size:25px;line-height:55px;"></i>
<ul>
<li>設置</li>
<li>退出</li>
</ul>
</a>
<a href="#"><i class="fa fa-cloud-upload" style="font-size:25px;line-height:55px;"></i></a>
<a href="#"><i class="fa fa-share-alt" style="font-size:25px;line-height:55px;"></i></a>
<a href="#"><i class="fa fa-cart-plus" style="font-size:25px;line-height:55px;"></i></a>
</div>
</div>
</div>
<div></div>
<br><br><br><br><br><br><br><br><br>
<div>
<h3>總結(jié)</h3>
<p>1.合理布局很重要，巧用盒子模型</p>
<p>2.仔細觀察總結(jié)，提煉模塊重復利用，有效提升代碼效率</p>
<br>
<h3>注意</h3>
<p>1.下拉列表與導航之間的間距不知道問題出在哪里</p>
<p>2.下拉列表每個導航上下的間距不知道哪來的</p>
<p>3.字體圖標庫引入后，圖標大小、位置調(diào)節(jié)問題很多</p>
<p>4.總感覺代碼亂糟糟的，雖然是有條理的寫，但還是理不清</p>
</div>
</body>
</html>
批改老師：天蓬老師批改時間：2019-06-27 12:59:22
老師總結(jié)：下拉菜單,用純css做的情況是不多的, 因為有許多功能是實現(xiàn)不了, 還是推薦用javascript來處理一些行為