search

博客列表 >网页头部简单实现 - PHP培训十期线上班

网页头部简单实现 - PHP培训十期线上班

Yin熊
Yin熊原创
2019年12月21日 21:42:10834浏览

一、效果图

今天做了一个简单的网页头部，效果图如下：

二、HTML代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>首页头部</title>
  6.     <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  7.     <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  8.     <link rel="stylesheet" href="static/font/iconfont.css">
  9.     <link rel="stylesheet" href="static/css/reset.css">
  10.     <link rel="stylesheet" href="static/css/index.css">
  11.     <!--<link rel="stylesheet" href="static/css/index_flex.css">-->
  12.     <script src="static/font/iconfont.js"></script>
  13. </head>
  14. <body>
  15.     <!--头部header 开始-->
  16.     <header>
  17.         <div class="logo">
  18.             <img src="static/images/logo.png" alt="网站logo" title="网站logo">
  19.         </div>
  20.         <div class="header-right">
  21.             <div class="search">
  22.                 <input type="text"><span class="icon iconfont">&#xe618;</span>
  23.             </div>
  24.             <div class="user">
  25.                 <ul>
  26.                     <li><a href="#"><span class="icon iconfont">&#xe629;</span></a></li>
  27.                     <li><a href="#"><span class="icon iconfont">&#xe61b;</span></a></li>
  28.                     <li><a href="#"><span class="icon iconfont">&#xec0a;</span></a></li>
  29.                     <li><a href="#"><span class="icon iconfont">&#xec14;</span></a></li>
  30.                     <li><a href="#"><span class="icon iconfont">&#xe60e;</span></a></li>
  31.                     <li><a href="#"><span class="icon iconfont">&#xec80;</span></a></li>
  32.                 </ul>
  33.             </div>
  34.         </div>
  35.     </header>
  36.     <!--头部header 结束-->
  37.     <!--标签tags 开始-->
  38.     <section id="tags">
  39.         <div class="box">
  40.             <div class="box-left">
  41.                 <span class="icon iconfont">&#xec39;</span>
  42.                 <p>前端开发</p>
  43.             </div>
  44.             <div class="box-right">
  45.                 <ul>
  46.                     <li><a href="#">富强</a></li>
  47.                     <li><a href="#">民主</a></li>
  48.                     <li><a href="#">文明</a></li>
  49.                     <li><a href="#">和谐</a></li>
  50.                     <li><a href="#">爱国</a></li>
  51.                     <li><a href="#">敬业</a></li>
  52.                     <li><a href="#">诚信</a></li>
  53.                     <li><a href="#">友善</a></li>
  54.                 </ul>
  55.             </div>
  56.         </div>
  57.         <div class="box">
  58.             <div class="box-left">
  59.                 <span class="icon iconfont">&#xec39;</span>
  60.                 <p>前端开发</p>
  61.             </div>
  62.             <div class="box-right">
  63.                 <ul>
  64.                     <li><a href="#">富强</a></li>
  65.                     <li><a href="#">民主</a></li>
  66.                     <li><a href="#">文明</a></li>
  67.                     <li><a href="#">和谐</a></li>
  68.                     <li><a href="#">爱国</a></li>
  69.                     <li><a href="#">敬业</a></li>
  70.                     <li><a href="#">诚信</a></li>
  71.                     <li><a href="#">友善</a></li>
  72.                 </ul>
  73.             </div>
  74.         </div>
  75.         <div class="box">
  76.             <div class="box-left">
  77.                 <span class="icon iconfont">&#xec39;</span>
  78.                 <p>前端开发</p>
  79.             </div>
  80.             <div class="box-right">
  81.                 <ul>
  82.                     <li><a href="#">富强</a></li>
  83.                     <li><a href="#">民主</a></li>
  84.                     <li><a href="#">文明</a></li>
  85.                     <li><a href="#">和谐</a></li>
  86.                     <li><a href="#">爱国</a></li>
  87.                     <li><a href="#">敬业</a></li>
  88.                     <li><a href="#">诚信</a></li>
  89.                     <li><a href="#">友善</a></li>
  90.                 </ul>
  91.             </div>
  92.         </div>
  93.         <div class="box">
  94.             <div class="box-left">
  95.                 <span class="icon iconfont">&#xec39;</span>
  96.                 <p>前端开发</p>
  97.             </div>
  98.             <div class="box-right">
  99.                 <ul>
  100.                     <li><a href="#">富强</a></li>
  101.                     <li><a href="#">民主</a></li>
  102.                     <li><a href="#">文明</a></li>
  103.                     <li><a href="#">和谐</a></li>
  104.                     <li><a href="#">爱国</a></li>
  105.                     <li><a href="#">敬业</a></li>
  106.                     <li><a href="#">诚信</a></li>
  107.                     <li><a href="#">友善</a></li>
  108.                 </ul>
  109.             </div>
  110.         </div>
  111.     </section>
  112.     <!--标签tags 结束-->
  113.     <!--轮播图banner 开始-->
  114.     <section id="banner">
  115.         <a href="#"><img src="static/images/2.jpg" alt="轮播图" title="轮播图"></a>
  116.         <a href="#"><img src="static/images/banner-right.jpg" alt="轮播图" title="轮播图"></a>
  117.     </section>
  118.     <!--轮播图banner 结束-->
  119. </body>
  120. </html>

三、CSS代码

  1. /** 头部header 开始 **/
  2. header {
  3.     width: 1200px;
  4.     margin: 15px auto 0;
  5.     position: relative;
  6.     overflow: hidden;
  7. }
  8. .logo {
  9.     float: left;
  10. }
  11. .header-right {
  12.     width: 600px;
  13.     height: 30px;
  14.     line-height: 78px;
  15.     float: right;
  16. }
  17. .header-right .search {
  18.     width: 275px;
  19.     position: relative;
  20.     float: left;
  21. }
  22. .header-right .search input {
  23.     width: 280px;
  24.     height: 30px;
  25.     border: 1px solid #cdcdcd;
  26.     border-radius: 8px;
  27.     padding-right: 26px;
  28.     box-sizing: border-box;
  29. }
  30. .header-right .search input:hover {
  31.     box-shadow: 0px 0px 5px #cccccc;
  32. }
  33. .header-right .search span {
  34.     position: absolute;
  35.     top: 0;
  36.     right: 0;
  37.     cursor: pointer;
  38. }
  39. .header-right .user {
  40.     float: right;
  41. }
  42. .header-right .user ul li {
  43.     margin-left: 15px;
  44.     float: left;
  45. }
  46. .header-right .user ul li span {
  47.     font-size: 30px;
  48. }
  49. .header-right .user ul li span:hover {
  50.     color: #fd291d;
  51. }
  52. /** 头部header 结束 **/
  53. /** 标签tags 开始 **/
  54. #tags {
  55.     width: 1200px;
  56.     margin: 15px auto 0;
  57.     overflow: hidden;
  58. }
  59. #tags .box {
  60.     width: 300px;
  61.     height: 64px;
  62.     float: left;
  63. }
  64. #tags .box .box-left {
  65.     width: 100px;
  66.     height: 64px;
  67.     margin: 0 auto;
  68.     padding-right: 10px;
  69.     box-sizing: border-box;
  70.     border-right: 1px solid #cccccc;
  71.     position: relative;
  72.     float: left;
  73. }
  74. #tags .box .box-left span {
  75.     margin-left: 15px;
  76.     font-size: 36px;
  77.     color: #fd291d;
  78.     float: left;
  79.     display: inline-block;
  80.  }
  81. #tags .box .box-left p {
  82.     width: 40px;
  83.     height: 50px;
  84.     text-align: center;
  85.     position: absolute;
  86.     top: 0;
  87.     right: 6px;
  88.     bottom: 0;
  89.     margin: auto;
  90.     float: right;
  91. }
  92. #tags .box .box-right {
  93.     width: 200px;
  94.     height: 64px;
  95.     position: relative;
  96.     float: right;
  97. }
  98. #tags .box .box-right ul {
  99.     width: 215px;
  100.     height: 52px;
  101.     position: absolute;
  102.     top: 0;
  103.     right: 0;
  104.     bottom: 0;
  105.     left: 0;
  106.     margin: auto;
  107. }
  108. #tags .box .box-right ul li {
  109.     margin: 0px 10px;
  110.     float: left;
  111. }
  112. /** 标签tags 结束 **/
  113. /** 轮播图banner 开始 **/
  114. #banner {
  115.     width: 1200px;
  116.     margin: 15px auto 0;
  117.     overflow: hidden;
  118. }
  119. #banner img:hover{
  120.     box-shadow: 0px 0px 10px #666666;
  121. }
  122. /** 轮播图banner 结束 **/

四、Flex版本

1、概述

Flex布局我也只是懂一些基础，而且由于兼容性问题，较长时间没有用，还有点生疏。

网上显示Flex兼容性ie10及以上，如果老师有比较好的兼容方案，期待分享一下噢～

2、效果图


（效果图真的不是同一张。。）

3、HTML代码

HTML代码跟上面的原生float+position代码是一样的，没有变化，只是引用另一套CSS代码。

4、CSS代码

  1. /** 头部header 开始 **/
  2. header {
  3.     width: 1200px;
  4.     margin: 15px auto 0;
  5.     display: flex;
  6.     justify-content: space-between;
  7. }
  8. .header-right {
  9.     width: 600px;
  10.     display: flex;
  11.     justify-content: space-between;
  12.     align-items: center;
  13. }
  14. .header-right .search {
  15.     width: 275px;
  16.     position: relative;
  17. }
  18. .header-right .search input {
  19.     width: 280px;
  20.     height: 30px;
  21.     border: 1px solid #cdcdcd;
  22.     border-radius: 8px;
  23.     padding-right: 26px;
  24.     box-sizing: border-box;
  25. }
  26. .header-right .search input:hover {
  27.     box-shadow: 0px 0px 5px #cccccc;
  28. }
  29. .header-right .search span {
  30.     position: absolute;
  31.     top: 0;
  32.     right: 0;
  33.     cursor: pointer;
  34. }
  35. .header-right .user ul {
  36.     display: flex;
  37.     justify-content: space-between;
  38. }
  39. .header-right .user ul li {
  40.     margin-left: 15px;
  41. }
  42. .header-right .user ul li span{
  43.     font-size: 30px;
  44. }
  45. .header-right .user ul li span:hover {
  46.     color: #fd291d;
  47. }
  48. /** 头部header 结束 **/
  49. /** 标签tags 开始 **/
  50. #tags {
  51.     width: 1200px;
  52.     margin: 15px auto 0;
  53.     display: flex;
  54. }
  55. #tags .box {
  56.     width: 300px;
  57.     height: 64px;
  58.     display: flex;
  59.     justify-content: space-between;
  60. }
  61. #tags .box .box-left {
  62.     width: 100px;
  63.     height: 64px;
  64.     display: flex;
  65.     justify-content: space-around;
  66.     align-items: center;
  67.     padding-right: 5px;
  68.     box-sizing: border-box;
  69.     border-right: 1px solid #cccccc;
  70. }
  71. #tags .box .box-left span {
  72.     margin-left: 15px;
  73.     font-size: 36px;
  74.     color: #fd291d;
  75.     display: inline-block;
  76.  }
  77. #tags .box .box-left p {
  78.     width: 40px;
  79.     height: 50px;
  80.     text-align: center;
  81. }
  82. #tags .box .box-right {
  83.     width: 200px;
  84.     height: 64px;
  85.     display: flex;
  86.     align-items: center;
  87. }
  88. #tags .box .box-right ul {
  89.     width: 215px;
  90.     height: 52px;
  91.     display: flex;
  92.     flex-flow: row wrap;
  93. }
  94. #tags .box .box-right ul li {
  95.     margin: 0px 10px;
  96. }
  97. /** 标签tags 结束 **/
  98. /** 轮播图banner 开始 **/
  99. #banner {
  100.     width: 1200px;
  101.     margin: 15px auto 0;
  102.     overflow: hidden;
  103. }
  104. #banner img:hover{
  105.     box-shadow: 0px 0px 10px #666666;
  106. }
  107. /** 轮播图banner 结束 **/

相比原生float+position，Flex布局更简单易用，代码也更少，虽然只少了15行～

上一条：12月20日作业：html+css 案例实操下一条：12月17号作业 JS数组及JS事件
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多