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

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

荔枝哥哥
荔枝哥哥原创
2019年12月22日 22:04:07971浏览
  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;
  5. display: flex;
  6. flex-direction: column;
  7. }
  8. .index-header > .content {
  9. width: 1200px;
  10. margin: auto;
  11. }
  12. /********** 1. 顶部logo,搜索框与快速入口 **********/
  13. .index-header > .content > .log-search {
  14. display: flex;
  15. /*两端对齐*/
  16. justify-content: space-between;
  17. }
  18. .index-header > .content > .log-search {
  19. display: flex;
  20. }
  21. /*头部搜索框样式*/
  22. .index-header > .content > .log-search > .search {
  23. width: 430px;
  24. /*转为flex,可以更精准的控制搜索框与放大镜图标的样式*/
  25. display: flex;
  26. /*居中对齐,实际上会看到并到对正,因为那个label相对定位走了*/
  27. justify-content: flex-end;
  28. /*可以看出,搜索框应该更靠右会更好看一些,使用相对定精确移动*/
  29. position: relative;
  30. left: 140px;
  31. }
  32. .index-header > .content > .log-search > .search > input {
  33. width: 333px;
  34. height: 36px;
  35. border: 1px solid #cccccc;
  36. border-radius: 10px;
  37. /*去掉轮廓线,获取焦点时不会出现蓝色边框*/
  38. outline: none;
  39. padding: 6px;
  40. /*垂直居中*/
  41. align-self: center;
  42. }
  43. .index-header > .content > .log-search > .search > input:hover {
  44. box-shadow: 0 0 5px #888888;
  45. }
  46. .index-header > .content > .log-search > .search > label {
  47. font-size: 28px;
  48. position: relative;
  49. top: 2px;
  50. left: -38px;
  51. /*垂直居中*/
  52. align-self: center;
  53. }
  54. /*快速入口*/
  55. .index-header > .content > .log-search > .quick-entry {
  56. /*必须设置宽度,否则无法产生剩余空间可供分配*/
  57. width: 300px;
  58. display: flex;
  59. /*所有图标二端对齐*/
  60. justify-content: space-between;
  61. }
  62. /*快速入口的图标设置*/
  63. .index-header > .content > .log-search > .quick-entry a {
  64. font-size: 33px;
  65. /*图标垂直居中*/
  66. align-self: center;
  67. }
  68. /*用户鼠标划过字体图标时提供一个变色的效果反馈,提升体验*/
  69. .index-header > .content > .log-search > .quick-entry a:hover {
  70. color: red;
  71. }
  72. /********** 2. 中部的主导航区 **********/
  73. .index-header > .content > .main-nav {
  74. margin: 20px auto;
  75. /*导航非常规范,网格更加快速*/
  76. display: grid;
  77. grid-template-columns: repeat(4, 300px);
  78. }
  79. /*每组导航区转为flex,水平排列*/
  80. .index-header > .content > .main-nav .nav-detail {
  81. display: flex;
  82. }
  83. /*最左边的图标与标签比较特殊*/
  84. .index-header > .content > .main-nav .nav-detail .pic {
  85. /*添加右边竖线*/
  86. padding-right: 10px;
  87. border-right: 1px solid #cccccc;
  88. /*转为flex*/
  89. display: flex;
  90. }
  91. /*设置图标样式,大小与前景色*/
  92. .index-header > .content > .main-nav .nav-detail .pic > span {
  93. font-size: 40px;
  94. color: red;
  95. }
  96. /*设置图标右边上下排列的描述文本样式*/
  97. .index-header > .content > .main-nav .nav-detail .pic > div {
  98. padding-left: 5px;
  99. /*转为flex,且为垂直排列*/
  100. display: flex;
  101. flex-direction: column;
  102. /*分散对齐*/
  103. justify-content: space-around;
  104. }
  105. /*设置主导航的链接样式*/
  106. .index-header > .content > .main-nav .nav-detail .links {
  107. padding-left: 10px;
  108. /*链接非常规范,且默认为二行显示,非常适合网格快速实现*/
  109. display: grid;
  110. /*minmax(最小值,最大值)*/
  111. grid-template-columns: repeat(4, minmax(30px, auto));
  112. /*设置表格单元之间的列间隙*/
  113. grid-column-gap: 10px;
  114. }
  115. /********** 3. 轮播图 **********/
  116. .index-header > .content > .slider {
  117. /*用网格布局快速实现*/
  118. display: grid;
  119. grid-template-columns: 900px 295px;
  120. /*列间距*/
  121. grid-column-gap: 5px;
  122. }
  123. .index-header > .content > .slider img:last-of-type:hover {
  124. box-shadow: 0 0 8px #888888;
  125. }

效果图
效果图片

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议