search

博客列表 >HTML+CSS实现首页头部的布局

HTML+CSS实现首页头部的布局

荔枝哥哥
荔枝哥哥原创
2019年12月22日 22:04:07972浏览
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <link rel="stylesheet" href="index_header.css" />
  8.     <link rel="stylesheet" href="./static/font/iconfont.css" />
  9.     <title>12月20日作业</title>
  10.   </head>
  11.   <body>
  12.     <div class="index-header">
  13.       <div class="content">
  14.         <!-- logo与搜索框，快速入口 -->
  15.         <div class="log-search">
  16.           <a href="" class="logo"
  17.             ><img src="./static/images/logo.png" alt=""
  18.           /></a>
  19.           <div class="search">
  20.             <input type="search" name="search" id="search" />
  21.             <label for="search" class="iconfont icon-jinduchaxun"></label>
  22.           </div>
  23.           <div class="quick-entry">
  24.             <a href="" class="iconfont icon-huiyuan1"></a>
  25.             <a href="" class="iconfont icon-danmu1"></a>
  26.             <a href="" class="iconfont icon-fabu"></a>
  27.             <a href="" class="iconfont icon-fangda"></a>
  28.             <a href="" class="iconfont icon-huiyuan2 "></a>
  29.             <a href="" class="iconfont icon-dianzan"></a>
  30.           </div>
  31.         </div>
  32.         <!-- 主导航 -->
  33.         <div class="main-nav">
  34.           <!-- 导航详情1 -->
  35.           <div class="nav-detail">
  36.             <!-- 左侧描述与图标 -->
  37.             <div class="pic">
  38.               <span class="iconfont icon-gongdan"></span>
  39.               <div>
  40.                 <span>咨询</span>
  41.                 <span>学习</span>
  42.               </div>
  43.             </div>
  44.             <!-- 右侧导航链接 -->
  45.             <div class="links">
  46.               <a href="">器材</a>
  47.               <a href="">大师</a>
  48.               <a href="">学院</a>
  49.               <a href="">实战</a>
  50.               <a href="">大赛</a>
  51.               <a href="">裤子</a>
  52.               <a href="">影视</a>
  53.               <a href="">其他</a>
  54.             </div>
  55.           </div>
  56.           <!-- 导航详情2 -->
  57.           <div class="nav-detail">
  58.             <!--左侧图标与描述-->
  59.             <div class="pic">
  60.               <span class="iconfont icon-renwujincheng"></span>
  61.               <div>
  62.                 <span>爱好</span>
  63.                 <span>姐妹</span>
  64.               </div>
  65.             </div>
  66.             <!--右侧导航链接-->
  67.             <div class="links">
  68.               <a href="">有品</a>
  69.               <a href="">图片</a>
  70.               <a href="">喝水</a>
  71.               <a href="">飞机</a>
  72.               <a href="">坦克</a>
  73.               <a href="">气球</a>
  74.               <a href="">毛线</a>
  75.               <a href="">其它</a>
  76.             </div>
  77.           </div>
  78.           <!-- 导航详情3 -->
  79.           <div class="nav-detail">
  80.             <!--左侧图标与描述-->
  81.             <div class="pic">
  82.               <span class="iconfont icon-gongdan"></span>
  83.               <div>
  84.                 <span>软件</span>
  85.                 <span>技能</span>
  86.               </div>
  87.             </div>
  88.             <!--右侧导航链接-->
  89.             <div class="links">
  90.               <a href="">学习</a>
  91.               <a href="">爱国</a>
  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.             </div>
  99.           </div>
  100.           <!-- 导航详情4 -->
  101.           <div class="nav-detail">
  102.             <!-- 左侧图标与描述 -->
  103.             <div class="pic">
  104.               <span class="iconfont icon-DOC"></span>
  105.               <div>
  106.                 <span>编程</span>
  107.                 <span>美女</span>
  108.               </div>
  109.               <!-- 右侧导航链接 -->
  110.             </div>
  111.             <div class="links">
  112.               <a href="">吃饭</a>
  113.               <a href="">周易</a>
  114.               <a href="">黄山</a>
  115.               <a href="">合肥</a>
  116.               <a href="">上海</a>
  117.               <a href="">杭州</a>
  118.               <a href="">北京</a>
  119.               <a href="">其他</a>
  120.             </div>
  121.           </div>
  122.         </div>
  123.         <!-- 轮播图 -->
  124.         <div class="slider">
  125.           <a href=""><img src="./static/images/2.jpg" alt=""/></a>
  126.           <a href=""><img src="./static/images/banner-right.jpg" alt=""/></a>
  127.         </div>
  128.       </div>
  129.     </div>
  130.   </body>
  131. </html>
  1. /*首页导航+轮播图*/
  2. .index-header {
  3.   background-color: #fff;
  4.   padding: 30px 0 40px;
  6.   display: flex;
  7.   flex-direction: column;
  8. }
  10. .index-header > .content {
  11.   width: 1200px;
  12.   margin: auto;
  13. }
  15. /********** 1. 顶部logo,搜索框与快速入口 **********/
  17. .index-header > .content > .log-search {
  18.   display: flex;
  19.   /*两端对齐*/
  20.   justify-content: space-between;
  21. }
  23. .index-header > .content > .log-search {
  24.   display: flex;
  25. }
  27. /*头部搜索框样式*/
  28. .index-header > .content > .log-search > .search {
  29.   width: 430px;
  30.   /*转为flex,可以更精准的控制搜索框与放大镜图标的样式*/
  31.   display: flex;
  32.   /*居中对齐,实际上会看到并到对正,因为那个label相对定位走了*/
  33.   justify-content: flex-end;
  34.   /*可以看出,搜索框应该更靠右会更好看一些,使用相对定精确移动*/
  35.   position: relative;
  36.   left: 140px;
  37. }
  38. .index-header > .content > .log-search > .search > input {
  39.   width: 333px;
  40.   height: 36px;
  41.   border: 1px solid #cccccc;
  42.   border-radius: 10px;
  43.   /*去掉轮廓线,获取焦点时不会出现蓝色边框*/
  44.   outline: none;
  45.   padding: 6px;
  46.   /*垂直居中*/
  47.   align-self: center;
  48. }
  49. .index-header > .content > .log-search > .search > input:hover {
  50.   box-shadow: 0 0 5px #888888;
  51. }
  52. .index-header > .content > .log-search > .search > label {
  53.   font-size: 28px;
  54.   position: relative;
  55.   top: 2px;
  56.   left: -38px;
  58.   /*垂直居中*/
  59.   align-self: center;
  60. }
  62. /*快速入口*/
  63. .index-header > .content > .log-search > .quick-entry {
  64.   /*必须设置宽度,否则无法产生剩余空间可供分配*/
  65.   width: 300px;
  66.   display: flex;
  67.   /*所有图标二端对齐*/
  68.   justify-content: space-between;
  69. }
  70. /*快速入口的图标设置*/
  71. .index-header > .content > .log-search > .quick-entry a {
  72.   font-size: 33px;
  73.   /*图标垂直居中*/
  74.   align-self: center;
  75. }
  77. /*用户鼠标划过字体图标时提供一个变色的效果反馈,提升体验*/
  78. .index-header > .content > .log-search > .quick-entry a:hover {
  79.   color: red;
  80. }
  82. /********** 2. 中部的主导航区 **********/
  84. .index-header > .content > .main-nav {
  85.   margin: 20px auto;
  86.   /*导航非常规范,网格更加快速*/
  87.   display: grid;
  88.   grid-template-columns: repeat(4, 300px);
  89. }
  91. /*每组导航区转为flex,水平排列*/
  92. .index-header > .content > .main-nav .nav-detail {
  93.   display: flex;
  94. }
  96. /*最左边的图标与标签比较特殊*/
  97. .index-header > .content > .main-nav .nav-detail .pic {
  98.   /*添加右边竖线*/
  99.   padding-right: 10px;
  100.   border-right: 1px solid #cccccc;
  101.   /*转为flex*/
  102.   display: flex;
  103. }
  104. /*设置图标样式,大小与前景色*/
  105. .index-header > .content > .main-nav .nav-detail .pic > span {
  106.   font-size: 40px;
  107.   color: red;
  108. }
  109. /*设置图标右边上下排列的描述文本样式*/
  110. .index-header > .content > .main-nav .nav-detail .pic > div {
  111.   padding-left: 5px;
  112.   /*转为flex,且为垂直排列*/
  113.   display: flex;
  114.   flex-direction: column;
  115.   /*分散对齐*/
  116.   justify-content: space-around;
  117. }
  119. /*设置主导航的链接样式*/
  120. .index-header > .content > .main-nav .nav-detail .links {
  121.   padding-left: 10px;
  123.   /*链接非常规范,且默认为二行显示,非常适合网格快速实现*/
  124.   display: grid;
  125.   /*minmax(最小值,最大值)*/
  126.   grid-template-columns: repeat(4, minmax(30px, auto));
  127.   /*设置表格单元之间的列间隙*/
  128.   grid-column-gap: 10px;
  129. }
  131. /********** 3. 轮播图 **********/
  133. .index-header > .content > .slider {
  134.   /*用网格布局快速实现*/
  135.   display: grid;
  136.   grid-template-columns: 900px 295px;
  137.   /*列间距*/
  138.   grid-column-gap: 5px;
  139. }
  141. .index-header > .content > .slider img:last-of-type:hover {
  142.   box-shadow: 0 0 8px #888888;
  143. }

效果图
效果图片

上一条：12月20作业下一条：2019年12月20日 作业（CSS）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多