返回2019-6-......登陆

2019-6-26 下拉列表实践

辰晨2019-06-26 16:52:38148

<!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>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网