Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS基础定位-PHP培训十期线上班 学号：510251 12月20日作业
Blogger Information
Blog 119
fans 3
comment 1
visits 94532
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基础定位-PHP培训十期线上班 学号：510251 12月20日作业
赵大叔
Original
873 people have browsed it

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、代码分析

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