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

2019-6-26 导航条练习

辰晨 2019-06-26 15:24:14 222

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

a:hover{color:#fff;}

.shou{color:#fff;}

img:hover{color: #fff;line-height: 55px;}


.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="#">图标库</a>

<a href="#">图标管理</a>

<a href="#">阿里巴巴普惠体</a>

<a href="#">帮助</a>

<a href="#">活动</a>

<a href="#"><i class="fa fa-ellipsis-h" style="font-size:25px;line-height:55px;"></i></a>

</div>

<div class="right com">

<a href="#"><i class="fa fa-user-circle" style="font-size:25px;line-height:55px;"></i></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>

<div>

<h3>总结</h3>

<p>1.合理布局很重要,巧用盒子模型</p>

<p>2.仔细观察总结,提炼模块重复利用,有效提升代码效率</p>

</div>

</body>

</html>


最新手记推荐

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

全部回复(0)我要回复

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