资讯站头部练习实例
实例中的图标是文字图标iconfont，相比图片图标打开速度很快。运用上了新学到CSS+HTML知识。
float属性让块级元素能够在一行显示。通过设置块的宽度，让行内元素<span>不在同一行显示。
html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>文章站首页头部布局练习</title><link rel="stylesheet" type="text/css" href="static/css/reset.css"><link rel="stylesheet" type="text/css" href="static/font/iconfont.css"><link rel="stylesheet" type="text/css" href="static/css/index.css"></head><body><header><div class="top"><div class="logo fl"><a href="/"><img src="static/images/logo.png"></a></div><div class="search fl"><form action=""><input class="sea_t" type="text"><button><i class="iconfont ss icon-sousuo2"></i></button></form></div><div class="tb_link fr"><a href="" class="iconfont icon-huiyuan1"></a><a href="" class="iconfont icon-danmu1"></a><a href="" class="iconfont icon-fabu"></a><a href="" class="iconfont icon-fangda "></a><a href="" class="iconfont icon-huiyuan3"></a><a href="" class="iconfont icon-dianzan"></a></div></div><nav><div class="box fl"><div class="box_l"><i class="iconfont fl icon-gongdan"></i><div class="bt fl"><span>资源</span><span>学习</span></div></div><div class="box_r fl"><a href="">器材</a><a href="">大师</a><a href="">学院</a><a href="">实战</a><a href="">大赛</a><a href="">裤子</a><a href="">影视</a><a href="">其它</a></div></div><div class="box fl"><div class="box_l"><i class="iconfont fl icon-renwujincheng"></i><div class="bt fl"><span>资源</span><span>学习</span></div></div><div class="box_r fl"><a href="">器材</a><a href="">大师</a><a href="">学院</a><a href="">实战</a><a href="">大赛</a><a href="">裤子</a><a href="">影视</a><a href="">其它</a></div></div><div class="box fl"><div class="box_l"><i class="iconfont fl icon-gongdan"></i><div class="bt fl"><span>资源</span><span>学习</span></div></div><div class="box_r fl"><a href="">器材</a><a href="">大师</a><a href="">学院</a><a href="">实战</a><a href="">大赛</a><a href="">裤子</a><a href="">影视</a><a href="">其它</a></div></div><div class="box fl"><div class="box_l"><i class="iconfont fl icon-wentijieda"></i><div class="bt fl"><span>知识</span><span>解答</span></div></div><div class="box_r fl"><a href="">器材</a><a href="">大师</a><a href="">学院</a><a href="">实战</a><a href="">大赛</a><a href="">裤子</a><a href="">影视</a><a href="">其它</a></div></div></nav><div class="img_box"><div class="img_l fl"><img src="static/images/4.jpg" alt=""></div><div class="img_r fr"><img src="static/images/banner-right.jpg" alt=""></div></div></header></body></html>
CSS
header{width: 1200px;margin: 0 auto;}.top{overflow: auto;margin:20px 0;}.fl{float: left;}.fr{float: right;}.search form{border:1px solid #c6c6c6;border-radius: 5px;width: 324px;margin-left:350px;height: 36px;}.sea_t{width: 90%;line-height: 34px;}input:focus{ outline:none;}.search input{background:none;border: 0;}button{background: none;border: none;margin-left: auto;position: relative;top:3px;right: 8px;}.ss{font-size: 30px;color:#404040;}.search,.tb_link{margin-top: 18px;}.tb_link a{font-size:30px;margin-left:20px;}.tb_link a:hover{color: red;}.box{width: 300px;overflow: hidden;}.box .iconfont{font-size: 40px;color:red;}.bt{width: 32px;padding:0 10px 0 5px;border-right: 1px solid #d5d5d5;}.box_r{width: 185px;}.box_r a{font-size: 16px;padding-left: 10px;}.img_box{padding-top: 60px;}`
运行结果
总结：将字体图片的具体值写在元素内容区，不利于搜索引擎抓取。正确的做法，将具体值写在class中。