2019-6-26 下拉列表实践
<!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>总结</h3>
<p>1.合理布局很重要，巧用盒子模型</p>
<p>2.仔细观察总结，提炼模块重复利用，有效提升代码效率</p>
<br>
<h3>注意</h3>
<p>1.下拉列表与导航之间的间距不知道问题出在哪里</p>
<p>2.下拉列表每个导航上下的间距不知道哪来的</p>
<p>3.字体图标库引入后，图标大小、位置调节问题很多</p>
<p>4.总感觉代码乱糟糟的，虽然是有条理的写，但还是理不清</p>
</div>
</body>
</html>
