Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 第十期HTML+CSS资讯站首页头部布局练习（2019-12-20）
Blogger Information
Blog 22
fans 1
comment 0
visits 17739
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
第十期HTML+CSS资讯站首页头部布局练习（2019-12-20）
齐齐
Original
870 people have browsed it

资讯站头部练习实例

实例中的图标是文字图标iconfont，相比图片图标打开速度很快。运用上了新学到CSS+HTML知识。float属性让块级元素能够在一行显示。通过设置块的宽度，让行内元素<span>不在同一行显示。

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>文章站首页头部布局练习</title>
  6.     <link rel="stylesheet" type="text/css" href="static/css/reset.css">
  7.     <link rel="stylesheet" type="text/css" href="static/font/iconfont.css">
  8.     <link rel="stylesheet" type="text/css" href="static/css/index.css">
  9. </head>
  10. <body>
  11. <header>
  12.  <div class="top">
  13.      <div class="logo fl"><a href="/"><img src="static/images/logo.png"></a></div>
  14.     <div class="search fl"><form action=""><input class="sea_t" type="text"><button><i class="iconfont ss icon-sousuo2"></i></button></form></div>
  15.      <div class="tb_link fr">
  16.          <a href="" class="iconfont icon-huiyuan1"></a>
  17.          <a href="" class="iconfont icon-danmu1"></a>
  18.          <a href="" class="iconfont icon-fabu"></a>
  19.          <a href="" class="iconfont icon-fangda "></a>
  20.          <a href="" class="iconfont icon-huiyuan3"></a>
  21.          <a href="" class="iconfont icon-dianzan"></a>
  22.      </div>
  23.  </div>
  24. <nav>
  25.    <div class="box fl">
  26.        <div class="box_l">
  27.        <i class="iconfont fl icon-gongdan"></i>
  28.        <div class="bt fl">
  29.            <span>资源</span>
  30.            <span>学习</span>
  31.        </div>
  32.        </div>
  33.        <div class="box_r fl">
  34.            <a href="">器材</a>
  35.            <a href="">大师</a>
  36.            <a href="">学院</a>
  37.            <a href="">实战</a>
  38.            <a href="">大赛</a>
  39.            <a href="">裤子</a>
  40.            <a href="">影视</a>
  41.            <a href="">其它</a>
  42.        </div>
  43.    </div>
  44.     <div class="box fl">
  45.         <div class="box_l">
  46.             <i class="iconfont fl icon-renwujincheng
  47. "></i>
  48.             <div class="bt fl">
  49.                 <span>资源</span>
  50.                 <span>学习</span>
  51.             </div>
  52.         </div>
  53.         <div class="box_r fl">
  54.             <a href="">器材</a>
  55.             <a href="">大师</a>
  56.             <a href="">学院</a>
  57.             <a href="">实战</a>
  58.             <a href="">大赛</a>
  59.             <a href="">裤子</a>
  60.             <a href="">影视</a>
  61.             <a href="">其它</a>
  62.         </div>
  63.     </div>
  64.     <div class="box fl">
  65.         <div class="box_l">
  66.             <i class="iconfont fl icon-gongdan"></i>
  67.             <div class="bt fl">
  68.                 <span>资源</span>
  69.                 <span>学习</span>
  70.             </div>
  71.         </div>
  72.         <div class="box_r fl">
  73.             <a href="">器材</a>
  74.             <a href="">大师</a>
  75.             <a href="">学院</a>
  76.             <a href="">实战</a>
  77.             <a href="">大赛</a>
  78.             <a href="">裤子</a>
  79.             <a href="">影视</a>
  80.             <a href="">其它</a>
  81.         </div>
  82.     </div>
  83.     <div class="box fl">
  84.         <div class="box_l">
  85.             <i class="iconfont fl icon-wentijieda"></i>
  86.             <div class="bt fl">
  87.                 <span>知识</span>
  88.                 <span>解答</span>
  89.             </div>
  90.         </div>
  91.         <div class="box_r fl">
  92.             <a href="">器材</a>
  93.             <a href="">大师</a>
  94.             <a href="">学院</a>
  95.             <a href="">实战</a>
  96.             <a href="">大赛</a>
  97.             <a href="">裤子</a>
  98.             <a href="">影视</a>
  99.             <a href="">其它</a>
  100.         </div>
  101.     </div>
  102. </nav>
  103.    <div class="img_box">
  104.        <div class="img_l fl"><img src="static/images/4.jpg" alt=""></div>
  105.        <div class="img_r fr"><img src="static/images/banner-right.jpg" alt=""></div>
  106.    </div>
  107. </header>
  108. </body>
  109. </html>

CSS

  1. header{width: 1200px;margin: 0 auto;}
  2. .top{overflow: auto;margin:20px 0;}
  3. .fl{float: left;}
  4. .fr{float: right;}
  5. .search form{border:1px solid #c6c6c6;border-radius: 5px;width: 324px;margin-left:350px;height: 36px;}
  6. .sea_t{width: 90%;line-height: 34px;}
  7. input:focus{ outline:none;}
  8. .search input{background:none;border: 0;}
  9. button{background: none;border: none;margin-left: auto;position: relative;top:3px;right: 8px;}
  10. .ss{font-size: 30px;color:#404040;}
  11. .search,.tb_link{margin-top: 18px;}
  12. .tb_link a{font-size:30px;margin-left:20px;}
  13. .tb_link a:hover{color: red;}
  14. .box{width: 300px;overflow: hidden;}
  15. .box .iconfont{font-size: 40px;color:red;}
  16. .bt{width: 32px;padding:0 10px 0 5px;border-right: 1px solid #d5d5d5;}
  17. .box_r{width: 185px;}
  18. .box_r a{font-size: 16px;padding-left: 10px;}
  19. .img_box{padding-top: 60px;}
  21. `

运行结果

总结：将字体图片的具体值写在元素内容区，不利于搜索引擎抓取。正确的做法，将具体值写在class中。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：写在class中不是为了抓取, 搜索引擎不会看class值的, 只是把具体值写到内容中, 而图标内容不能直接被浏览器识别, 会影响到引擎对正常内容的收录...
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post