Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS_(12.20)作业_全站首页导航与轮播图
Blogger Information
Blog 12
fans 0
comment 0
visits 7901
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
CSS_(12.20)作业_全站首页导航与轮播图
ys899
Original
906 people have browsed it

第一种 float+position 布局

CSS样式表

  1. @import "static/css/reset.css";
  3. .index-header  {
  4.     width: 1200px;
  5.     margin: 14px auto 0;
  6.     position: relative;
  7.     overflow: hidden;
  8. }
  9. .index-header > .content {
  10.     width: 1200px;
  11.     margin: auto;
  12. }
  13. .log-search{
  14.     width: 1200px;
  15.     height: 80px;
  16.     /*两端对齐*/
  17.     justify-content: space-between;
  18.     text-align: center;
  19.     overflow: auto;
  20. }
  21. .log-search .logo{
  22.     float: left;
  23.     #background-color:#000000;
  24. }
  25. .search{
  26.     width: 450px;
  27.     margin-left: 274px;
  28.     float: left;
  29.     #background-color:#55a555;
  30.     position: relative;
  31.     top:30px;
  32. }
  33. .search input{
  34.     width: 333px;
  35.     height: 36px;
  36.     border: 1px solid #cccccc;
  37.     border-radius: 10px;
  38.     /*去掉轮廓线,获取焦点时不会出现蓝色边框*/
  39.     outline: none;
  40.     padding: 6px;
  41.     /*垂直居中*/
  42.     align-self: center;
  43. }
  44. .search > input:hover {
  45.     box-shadow: 0 0 5px #888888;
  46. }
  47. .search label{
  48.     font-size: 28px;
  49.     position: relative;
  50.     top: 2px;
  51.     left: -38px;
  53.     /*垂直居中*/
  54.     align-self: center;
  55. }
  56. .quick-entry {
  57.     width: 300px;
  58.     float: left;
  59.     #background-color: #0077aa;
  60.     /*所有图标二端对齐*/
  61.     justify-content: space-between;
  62.     position: relative;
  63.     top:30px;
  64. }
  65. .quick-entry a {
  66.     font-size: 33px;
  67.     /*图标垂直居中*/
  68.     align-self: center;
  69. }
  71. /*用户鼠标划过字体图标时提供一个变色的效果反馈,提升体验*/
  72. .quick-entry a:hover {
  73.     color: red;
  74. }
  75. .nav-detail{
  76.     width:300px;
  77.     float:left;
  78.     margin: 20px auto;
  79. }
  80. .main-nav .nav-detail .pic{
  81.     float: left;
  82.     width: 80px;
  83.     #overflow: auto;
  84. }
  85. .main-nav .nav-detail .pic > span{
  86.     font-size: 40px;
  87.     color: red;
  88.     float:left;
  89. }
  90. .main-nav .nav-detail .pic > span > div{
  91.     padding-left: 5px;
  92.     /*设置表格单元之间的列间隙*/
  93.     #grid-column-gap: 10px;
  94.     float:right;
  95. }
  96. .main-nav .nav-detail .links{
  97.     float: left;
  98.     width: 120px;
  99.     height: 40px;
  100.     padding-left:5px;
  101.     border-left: 1px solid #000000;
  102. }
  103. .main-nav .nav-detail .links > a{
  104.     #padding-left: 50px;
  105. }
  106. /** 轮播图banner 开始 **/
  107. #banner {
  108.     width: 1200px;
  109.     margin: 15px auto 0;
  110.     overflow: hidden;
  111. }
  112. #banner img:hover{
  113.     box-shadow: 0px 0px 10px #666666;
  114. }
  115. /** 轮播图banner 结束 **/
  116. ##效果图
  117. ![](https://img.php.cn/upload/image/208/903/401/1577101530436311.png)
  119. ##第二种：Flex布局
  120. ###CSS样式表
  121. ```CSS reset.css
  122. * {
  123.     padding: 0;
  124.     margin: 0;
  126.     /*outline: 1px dashed red;*/
  127. }
  129. body :not(header, footer){
  131.     font-size: 13px;
  132. }
  133. a {
  134.     color: black;
  135.     text-decoration: none;
  136.     font-size: 13px;
  137. }
  139. li {
  140.     list-style: none;
  141. }
  142. ``` index_head.css
  143. @import "static/css/reset.css";
  145. /*首页导航+轮播图*/
  146. .index-header {
  147.     background-color: #fff;
  148.     padding: 30px 0 40px;
  150.     display: flex;
  151.     flex-direction: column;
  152. }
  154. .index-header > .content {
  155.     width: 1200px;
  156.     margin: auto;
  157. }
  159. /********** 1. 顶部logo,搜索框与快速入口 **********/
  161. .index-header > .content > .log-search {
  162.     display: flex;
  163.     /*两端对齐*/
  164.     justify-content: space-between;
  165. }
  167. .index-header > .content > .log-search {
  168.     display: flex;
  169. }
  171. /*头部搜索框样式*/
  172. .index-header > .content > .log-search > .search {
  173.     width: 430px;
  174.     /*转为flex,可以更精准的控制搜索框与放大镜图标的样式*/
  175.     display: flex;
  176.     /*居中对齐,实际上会看到并到对正,因为那个label相对定位走了*/
  177.     justify-content: flex-end;
  178.     /*可以看出,搜索框应该更靠右会更好看一些,使用相对定精确移动*/
  179.     position: relative;
  180.     left: 140px;
  181. }
  182. .index-header > .content > .log-search > .search > input {
  183.     width: 333px;
  184.     height: 36px;
  185.     border: 1px solid #cccccc;
  186.     border-radius: 10px;
  187.     /*去掉轮廓线,获取焦点时不会出现蓝色边框*/
  188.     outline: none;
  189.     padding: 6px;
  190.     /*垂直居中*/
  191.     align-self: center;
  192. }
  193. .index-header > .content > .log-search > .search > input:hover {
  194.     box-shadow: 0 0 5px #888888;
  195. }
  196. .index-header > .content > .log-search > .search > label {
  197.     font-size: 28px;
  198.     position: relative;
  199.     top: 2px;
  200.     left: -38px;
  202.     /*垂直居中*/
  203.     align-self: center;
  205. }
  207. /*快速入口*/
  208. .index-header > .content > .log-search > .quick-entry {
  209.     /*必须设置宽度,否则无法产生剩余空间可供分配*/
  210.     width: 300px;
  211.     display: flex;
  212.     /*所有图标二端对齐*/
  213.     justify-content: space-between;
  214. }
  215. /*快速入口的图标设置*/
  216. .index-header > .content > .log-search > .quick-entry a {
  217.     font-size: 33px;
  218.     /*图标垂直居中*/
  219.     align-self: center;
  220. }
  222. /*用户鼠标划过字体图标时提供一个变色的效果反馈,提升体验*/
  223. .index-header > .content > .log-search > .quick-entry a:hover {
  224.     color: red;
  225. }
  227. /********** 2. 中部的主导航区 **********/
  229. .index-header > .content > .main-nav {
  230.     margin: 20px auto;
  231.     /*导航非常规范,网格更加快速*/
  232.     display: grid;
  233.     grid-template-columns: repeat(4, 300px);
  234. }
  236. /*每组导航区转为flex,水平排列*/
  237. .index-header > .content > .main-nav .nav-detail {
  238.     display: flex;
  239. }
  241. /*最左边的图标与标签比较特殊*/
  242. .index-header > .content > .main-nav .nav-detail .pic {
  243.     /*添加右边竖线*/
  244.     padding-right: 10px;
  245.     border-right: 1px solid #cccccc;
  246.     /*转为flex*/
  247.     display: flex;
  248. }
  249. /*设置图标样式,大小与前景色*/
  250. .index-header > .content > .main-nav .nav-detail .pic > span {
  251.     font-size: 40px;
  252.     color: red;
  253. }
  254. /*设置图标右边上下排列的描述文本样式*/
  255. .index-header > .content > .main-nav .nav-detail .pic > div {
  256.     padding-left: 5px;
  257.     /*转为flex,且为垂直排列*/
  258.     display: flex;
  259.     flex-direction: column;
  260.     /*分散对齐*/
  261.     justify-content: space-around;
  262. }
  264. /*设置主导航的链接样式*/
  265. .index-header > .content > .main-nav .nav-detail .links {
  266.     padding-left: 10px;
  268.     /*链接非常规范,且默认为二行显示,非常适合网格快速实现*/
  269.     display: grid;
  270.     /*minmax(最小值,最大值)*/
  271.     grid-template-columns: repeat(4, minmax(30px, auto));
  272.     /*设置表格单元之间的列间隙*/
  273.     grid-column-gap: 10px;
  274. }
  276. /********** 3. 轮播图 **********/
  278. .index-header > .content > .slider {
  279.     /*用网格布局快速实现*/
  280.     display: grid;
  281.     grid-template-columns: 900px 295px;
  282.     /*列间距*/
  283.     grid-column-gap: 5px;
  284. }
  286. .index-header > .content > .slider  img:last-of-type:hover {
  287.     box-shadow: 0 0 8px #888888;
  288. }

```HTML5 首页内容
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/font/iconfont.css">
<link rel="stylesheet" href="index_header.css">
<title>全站首页导航与轮播图</title>
</head>

<body>

<div class="index-header">
<div class="content">
<!--logo与搜索框,快速入口-->
<div class="log-search">
<a href="" class="logo"><img src="static/images/logo.png" alt=""></a>
<div class="search">
<input type="search" name="search" id="search">
<label for="search" class="iconfont icon-jinduchaxun"></label>
</div>
<div class="quick-entry">
<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-huiyuan2"></a>
<a href="" class="iconfont icon-dianzan"></a>
</div>
</div> 

  1.     <!--主导航-->
  2.     <div class="main-nav">
  3.         <!--导航详情1-->
  4.         <div class="nav-detail">
  5.             <!--左侧图标与描述-->
  6.             <div class="pic">
  7.                 <span class="iconfont icon-gongdan"></span>
  8.                 <div>
  9.                     <span>资讯</span>
  10.                     <span>学习</span>
  11.                 </div>
  12.             </div>
  13.             <!--右侧导航链接-->
  14.             <div class="links">
  15.                 <a href="">器材</a>
  16.                 <a href="">大师</a>
  17.                 <a href="">学院</a>
  18.                 <a href="">实战</a>
  19.                 <a href="">大赛</a>
  20.                 <a href="">裤子</a>
  21.                 <a href="">影视</a>
  22.                 <a href="">其它</a>
  23.             </div>
  24.         </div>
  25.         <!--导航详情2-->
  26.         <div class="nav-detail">
  27.             <!--左侧图标与描述-->
  28.             <div class="pic">
  29.                 <span class="iconfont icon-renwujincheng"></span>
  30.                 <div>
  31.                     <span>爱好</span>
  32.                     <span>姐妹</span>
  33.                 </div>
  34.             </div>
  35.             <!--右侧导航链接-->
  36.             <div class="links">
  37.                 <a href="">有品</a>
  38.                 <a href="">图片</a>
  39.                 <a href="">喝水</a>
  40.                 <a href="">飞机</a>
  41.                 <a href="">坦克</a>
  42.                 <a href="">气球</a>
  43.                 <a href="">毛线</a>
  44.                 <a href="">其它</a>
  45.             </div>
  46.         </div>
  47.          <!--导航详情3-->
  48.         <div class="nav-detail">
  49.             <!--左侧图标与描述-->
  50.             <div class="pic">
  51.                 <span class="iconfont icon-gongdan"></span>
  52.                 <div>
  53.                     <span>软件</span>
  54.                     <span>技能</span>
  55.                 </div>
  56.             </div>
  57.             <!--右侧导航链接-->
  58.             <div class="links">
  59.                 <a href="">学习</a>
  60.                 <a href="">爱国</a>
  61.                 <a href="">敬业</a>
  62.                 <a href="">友善</a>
  63.                 <a href="">富强</a>
  64.                 <a href="">互助</a>
  65.                 <a href="">仁义</a>
  66.                 <a href="">其它</a>
  67.             </div>
  68.         </div>
  69.         <!--导航详情4-->
  70.         <div class="nav-detail">
  71.             <!--左侧图标与描述-->
  72.             <div class="pic">
  73.                 <span class="iconfont icon-DOC"></span>
  74.                 <div>
  75.                     <span>编程</span>
  76.                     <span>美女</span>
  77.                 </div>
  78.             </div>
  79.             <!--右侧导航链接-->
  80.             <div class="links">
  81.                 <a href="">吃饭</a>
  82.                 <a href="">周易</a>
  83.                 <a href="">黄山</a>
  84.                 <a href="">合肥</a>
  85.                 <a href="">上海</a>
  86.                 <a href="">杭州</a>
  87.                 <a href="">北京</a>
  88.                 <a href="">其它</a>
  89.             </div>
  90.         </div>
  91.     </div>
  93.     <!--轮播图-->
  94.     <div class="slider">
  95.         <a href=""><img src="static/images/2.jpg" alt=""></a>
  96.         <a href=""><img src="static/images/banner-right.jpg" alt=""></a>
  97.     </div>
  98. </div>

</div>
</body>
</html>
```

效果图

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：这个页面基本并不好写的, 即使一个老前端, 拿到这个案例, 也要好好琢磨一会的, 恭喜你,不错
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