简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >CSS_(12.20)作业_全站首页导航与轮播图

CSS_(12.20)作业_全站首页导航与轮播图

ys899
ys899原创
2019年12月23日 19:45:46901浏览

第一种 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>
```

效果图

上一条：1217作业js数组增删查改与js事件PHP培训第九期线上班下一条：CentOS修改主机名及时间
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多