search

博客列表 >CSS基础定位-PHP培训十期线上班 学号：510251 12月20日作业

CSS基础定位-PHP培训十期线上班 学号：510251 12月20日作业

赵大叔
赵大叔原创
2019年12月25日 19:23:22877浏览

CSS基础定位-PHP培训十期线上班 学号：510251 12月20日作业

小白一个，完全跟着老师的代码敲出来的。

1、HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="static/font/iconfont.css">
  6.     <title>12月20作业</title>
  7.     <style>
  8.         * { /*初始化*/
  9.             margin:0; /*内边距*/
  10.             padding: 0; /*外边距*/
  11.             font-size: 13px; /*字体*/
  12.             /*outline: 1px dashed red; !*轮廓线条*!*/
  13.         }
  15.         a { /*字体初始化*/
  16.            color: #555;
  17.             font-size: 13px;
  18.             text-decoration: none; /*下划线去掉，decoration修饰*/
  19.         }
  20.          /*设置容器样式，少用ID，框架才用ID*/
  21.         .index-header { /*.index-header 选择器*/
  22.             width: 1200px;
  23.             min-height: 300;
  24.             margin:30px auto; /*居中*/
  25.         }
  27.         .index-header > .top{ /* >：子元素； 空格：所有后代元素*/
  28.             height: 70px;
  29.             position: relative; /*转为定位父级，relative相对定位*/
  30.         }
  32.         .index-header > .top * { /*统一样式，*表示所有*/
  33.             height: inherit;  /*inherit继承*/
  34.             line-height: 70px; /*垂直居中，设置行高*/
  35.         }
  37.         /*设置logo*/
  38.         .index-header > .top > .logo {
  39.             width: 176px;
  40.             position: absolute; /*绝对定位*/
  41.             top:0; /*logo相对top，左上0*/
  42.             left: 0;
  44.         }
  45.         /*设置搜索框*/
  46.         .index-header > .top > .search{
  47.             width: 330px;
  48.             position: absolute;
  49.             top: 0;
  50.             right: 350px; /*6个图标，占300px*/
  51.         }
  52.         /*设置图标*/
  53.         .index-header > .top > .quick-start{
  54.             width: 300px;
  55.             position: absolute;
  56.             top: 0;/*quick-start相对top，右上0*/
  57.             right: 0;
  58.         }
  60.         .index-header > .top > .logo img{
  61.             height: 100%;
  62.             display: block; /*清除下边框*/
  63.         }
  64.         /*搜索框*/
  65.         .index-header > .top > .search >input[type="search"]{ /*选择：input标签+属性*/
  66.             width: 330px;
  67.             height: 36px;
  68.             border-radius: 10px; /*设置圆角*/
  69.             padding: 10px;
  70.         }
  71.         /*放大镜*/
  72.         .index-header > .top > .search >input[type="search"]+label{ /*+号表示选择相临元素*/
  73.            font-size: 23px;
  74.             margin: -30px; /*移动放大镜，支持负值*/
  75.             position: relative;
  76.             top: 5px;
  77.         }
  78.         /*鼠标停留：hover*/
  79.         .index-header > .top > .search >input[type="search"]:hover{ /*阴影*/
  80.             box-shadow: 0 0 5px #888888; /*665，66有偏移*/
  81.         }
  82.         /*快速入口*/
  83.         .index-header > .top>.quick-start>span{
  84.             font-size: 33px;
  85.             margin-right: 6px;
  86.         }
  88.         .index-header > .top>.quick-start>span:hover{
  89.             color: red;
  90.             cursor:pointer;
  91.         }
  92.         /*导航区*/
  93.         .index-header >.nav{
  94.             height: 44px;
  95.         }
  97.         .index-header >.nav> .nav-item{
  98.             width: 300px; /*1200/4=300*/
  99.             height: inherit; /*继承*/
  100.             position: relative; /*转为定位元素*/
  101.             float: left; /*左右浮动*/
  102.         }
  104.         .index-header >.nav> .nav-item>.iconfont{
  105.             font-size: 40px;
  106.             color: red;
  107.             position: absolute;
  108.             /*top: ;
  109.             left: ;*/
  110.         }
  111.         .index-header >.nav> .nav-item>.tag{
  112.             width: 40px;
  113.             position: absolute;
  114.             left: 45px; /*5像素间隙*/
  115.             border-right: 1px solid #cccccc;  /*右边框*/
  116.         }
  117.         .index-header >.nav> .nav-item>.links{
  118.             width: 160px;
  119.             position: absolute;
  120.             left:95px;
  121.         }
  122.         .index-header >.nav> .nav-item>.links>a{
  123.             margin: 4px;
  124.         }
  125.         .index-header >.nav> .nav-item>.links>a:hover{
  126.             color: red;
  128.         }
  130.         .index-header>.slider-ads{
  131.             height: 320px;
  132.             position: relative;
  133.         }
  135.         .index-header>.slider-ads>.slider{
  136.             width: 900px;
  137.             position: absolute;
  139.         }
  140.         .index-header>.slider-ads>.ads{
  141.             width: 295px;
  142.             position: absolute;
  143.             right: 0; /*从右边开始*/
  145.         }
  147.         .index-header>.slider-ads img{
  148.             height: 100%;
  149.             display: block;
  151.         }
  152.         .index-header>*{
  153.             margin: 20px 0; /*紧*/
  154.         }
  155.     </style>
  156. </head>
  157. <body>
  159. <div class="index-header">
  160. <!--    上：logo+search+incon-->
  161.     <div class="top">
  162.         <div class="logo">
  163.             <a href=""><img src="static/images/logo.png" alt=""></a> <!--链接里放图片-->
  164.         </div>
  165.         <div class="search">
  166.             <input type="search" id="search"><label for="search" class="iconfont icon-jinduchaxun"></label>
  167. <!--            阿里图标一定要放内联框架里显示，label，class，放大镜图标-->
  168.         </div>
  169.         <div class="quick-start"> <!--快速入口-->
  170.             <span class="iconfont icon-huiyuan1"></span>
  171.             <span class="iconfont icon-charutupian"></span>
  172.             <span class="iconfont icon-shangyibu"></span>
  173.             <span class="iconfont icon-icon_tianjia"></span>
  174.             <span class="iconfont icon-huiyuan2"></span>
  175.             <span class="iconfont icon-html"></span>
  176.         </div>
  178.     </div>
  180. <!--    中：导航，nav-->
  181.     <div class="nav">
  182.         <div class="nav-item" >
  183.             <span class="iconfont icon-DOC"></span> <!--图标；iconfont基础样式-->
  184.             <div class="tag">
  185.                 <span>资讯</span>
  186.                 <span>学习</span>
  187.             </div>
  188.             <div class="links">
  189.                 <a href="">器材</a> <!--ctrl+d,复制-->
  190.                 <a href="">器材</a>
  191.                 <a href="">器材</a>
  192.                 <a href="">器材</a>
  193.                 <a href="">器材</a>
  194.                 <a href="">器材</a>
  195.                 <a href="">飞机</a>
  196.                 <a href="">其它</a>
  197.             </div>
  198.         </div>
  199.         <div class="nav-item" >
  200.             <span class="iconfont icon-DOC"></span>
  201.             <div class="tag">
  202.                 <span>资讯</span>
  203.                 <span>学习</span>
  204.             </div>
  205.             <div class="links">
  206.                 <a href="">器材</a>
  207.                 <a href="">器材</a>
  208.                 <a href="">器材</a>
  209.                 <a href="">器材</a>
  210.                 <a href="">器材</a>
  211.                 <a href="">器材</a>
  212.                 <a href="">器材</a>
  213.                 <a href="">器材</a>
  214.             </div>
  215.         </div>
  216.         <div class="nav-item" >
  217.             <span class="iconfont icon-DOC"></span>
  218.             <div class="tag">
  219.                 <span>资讯</span>
  220.                 <span>学习</span>
  221.             </div>
  222.             <div class="links">
  223.                 <a href="">器材</a>
  224.                 <a href="">器材</a>
  225.                 <a href="">器材</a>
  226.                 <a href="">器材</a>
  227.                 <a href="">器材</a>
  228.                 <a href="">器材</a>
  229.                 <a href="">器材</a>
  230.                 <a href="">器材</a>
  231.             </div>
  232.         </div>
  233.         <div class="nav-item" >
  234.             <span class="iconfont icon-DOC"></span>
  235.             <div class="tag">
  236.                 <span>资讯</span>
  237.                 <span>学习</span>
  238.             </div>
  239.             <div class="links">
  240.                 <a href="">器材</a>
  241.                 <a href="">器材</a>
  242.                 <a href="">器材</a>
  243.                 <a href="">器材</a>
  244.                 <a href="">器材</a>
  245.                 <a href="">器材</a>
  246.                 <a href="">器材</a>
  247.                 <a href="">器材</a>
  248.             </div>
  249.         </div>
  250.     </div>
  252. <!--    下：轮播，slider+广告，ads-->
  253.     <div class="slider-ads">
  254.         <div class="slider">
  255.             <a href=""><img src="static/images/1.jpg" alt=""></a>
  256.         </div>
  257.         <div class="ads">
  258.             <a href=""><img src="static/images/banner-right.jpg" alt=""></a>
  259.         </div>
  260.     </div>
  262. </div>
  264. </body>
  265. </html>

2、布局分析

3、代码分析

上一条：12月20日_ jQuery选择器、表单对象属性 - 九期线上班下一条：2019年12月23日作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多