Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css基础html基础-Php第十期线上培训班
Blogger Information
Blog 22
fans 0
comment 0
visits 11966
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基础html基础-Php第十期线上培训班
迫
Original
760 people have browsed it

由于工作原因，故12.20与12.23两次作业只能在12.25上交。
页面元素居中的布局margin:0 auto，html引入css的方法，<link rel="stylesheet" href="../static/font/iconfont.css">
调用图标的方法有两种<span class="iconfont icon-huiyuan1"></span>和<span class="iconfont"></span>

一段完整调用css布局构建一个首页的代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <!--    引入图标css-->
  6.     <link rel="stylesheet" href="../static/font/iconfont.css">
  7.     <title>12.20作业</title>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.             font-size: 13px;
  13.             /*添加轮廓线*/
  14.             /*outline: 1px dashed red;*/
  15.         }
  16.         a{
  17.             color: #555;
  18.             font-size: 14px;
  19.             /*去掉下划线*/
  20.             text-decoration: none;
  21.         }
  22.         /*容器*/
  23.         .index-header{
  24.             width: 1200px;
  25.             min-height: 400px;
  26.             margin: 30px auto;
  27.         }
  28.         .index-header > .top{
  29.             height: 70px;
  30.             /*定位为父级*/
  31.             position: relative;
  32.         }
  33.         .index-header > .top *{
  34.             height: inherit;
  35.             line-height: 70px;
  36.         }
  37.         .index-header > .top>.logo{
  38.             width: 176px;
  39.             position: absolute;
  40.             top: 0;
  41.             left: 0;
  42.         }
  43.         .index-header > .top>.search{
  44.             width: 330px;
  45.             position: absolute;
  46.             right: 350px;
  47.             top: 0;
  49.         }
  50.         .index-header > .top>.quick-start{
  51.             width: 300px;
  52.             position: absolute;
  53.             right: 0;
  54.             top: 0;
  55.         }
  56.         .index-header > .top>.logo img{
  57.             height: 100%;
  58.             display: block;
  59.         }
  60.         .index-header > .top>.search >input[type="search"]{
  61.             box-shadow: 0 0 5px red;
  62.             width: 330px;
  63.             height: 36px;
  64.             border-radius: 10pxs;
  65.         }
  66.         .index-header > .top>.search >input[type="search"]+label{
  67.             font-size: 23px;
  68.             color: green;
  69.             margin-left: -30px;
  70.             position: relative;
  71.             top: 5px;
  72.         }
  73.         /*快速入口*/
  74.         .index-header > .top>.quick-start>span{
  75.             font-size: 30px;
  76.             margin-right: 6px;
  77.         }
  78.         .index-header > .top>.quick-start>span:hover{
  79.             color: red;
  80.             cursor: pointer;
  81.         }
  83.         .index-header > .nav{
  84.             height: 50px;
  85.         }
  86.         .index-header > .nav >.nav-item{
  87.             width: 300px;
  88.             height: inherit;
  89.             position: relative;
  90.             float: left;
  91.         }
  92.         .index-header > .nav >.nav-item>.iconfont{
  93.             font-size: 40px;
  94.             color: red;
  95.             position: absolute;
  96.             float: left;
  97.         }
  98.         .index-header > .nav >.nav-item>.tag{
  99.             width: 40px;
  100.             position: absolute;
  101.             left: 45px;
  102.             border-right: 1px solid #cccccc;
  103.             float: left;
  104.         }
  105.         .index-header > .nav >.nav-item>.links{
  106.             width: 160px;
  107.             position: absolute;
  108.             left: 95px;
  109.             float: left;
  110.         }
  111.         .index-header > .nav >.nav-item>.links>a:hover{
  112.             color: red;
  113.         }
  114.         /*slider+ads*/
  115.         .index-header>.slider-ads{
  116.             position: relative;
  117.             height: 320px;
  118.         }
  119.         .index-header>.slider-ads>.slider{
  120.             width: 900px;
  121.             position: absolute;
  122.         }
  123.         .index-header>.slider-ads>.ads{
  124.             width: 295px;
  125.             position: absolute;
  126.             right: 0;
  127.         }
  128.         .index-header>.slider-ads img{
  129.             display: block;
  130.         }
  131.         .index-header>*{
  132.             margin: 0;
  133.         }
  134.     </style>
  136. </head>
  137. <body>
  138. <div class="index-header">
  139. <!--    上：logo+搜索框+图标-->
  140.     <div class="top">
  141.         <div class="logo">
  142.             <a href=""><img src="../static/images/logo.png" alt=""></a>
  143.         </div>
  144.         <div class="search">
  145.             <input type="search" id="search"><label for="search" class="iconfont icon-jinduchaxun"></label>
  146.         </div>
  147.         <div class="quick-start">
  148.             <span class="iconfont icon-huiyuan1"></span>
  149.             <span class="iconfont"></span>
  150.             <span class="iconfont icon-huiyuan1"></span>
  151.             <span class="iconfont icon-huiyuan1"></span>
  152.             <span class="iconfont icon-huiyuan1"></span>
  154.         </div>
  155.     </div>
  156. <!--    中：导航区-->
  157.     <div class="nav">
  158.         <div class="nav-item">
  159.             <span class="iconfont"></span>
  160.             <div class="tag">
  161.                 <span>咨询</span>
  162.                 <span>学习</span>
  163.             </div>
  164.             <div class="links">
  165.                 <a href="">器材</a>
  166.                 <a href="">器材</a>
  167.                 <a href="">器材</a>
  168.                 <a href="">器材</a>
  169.                 <a href="">器材</a>
  170.                 <a href="">器材</a>
  171.                 <a href="">器材</a>
  172.                 <a href="">器材</a>
  173.             </div>
  174.         </div>
  175.         <div class="nav-item">
  176.             <span class="iconfont"></span>
  177.             <div class="tag">
  178.                 <span>咨询</span>
  179.                 <span>学习</span>
  180.             </div>
  181.             <div class="links">
  182.                 <a href="">器材</a>
  183.                 <a href="">器材</a>
  184.                 <a href="">器材</a>
  185.                 <a href="">器材</a>
  186.                 <a href="">器材</a>
  187.                 <a href="">器材</a>
  188.                 <a href="">器材</a>
  189.                 <a href="">器材</a>
  190.             </div>
  191.         </div>
  192.         <div class="nav-item">
  193.             <span class="iconfont"></span>
  194.             <div class="tag">
  195.                 <span>咨询</span>
  196.                 <span>学习</span>
  197.             </div>
  198.             <div class="links">
  199.                 <a href="">器材</a>
  200.                 <a href="">器材</a>
  201.                 <a href="">器材</a>
  202.                 <a href="">器材</a>
  203.                 <a href="">器材</a>
  204.                 <a href="">器材</a>
  205.                 <a href="">器材</a>
  206.                 <a href="">器材</a>
  207.             </div>
  208.         </div>
  209.         <div class="nav-item">
  210.             <span class="iconfont"></span>
  211.             <div class="tag">
  212.                 <span>咨询</span>
  213.                 <span>学习</span>
  214.             </div>
  215.             <div class="links">
  216.                 <a href="">器材</a>
  217.                 <a href="">器材</a>
  218.                 <a href="">器材</a>
  219.                 <a href="">器材</a>
  220.                 <a href="">器材</a>
  221.                 <a href="">器材</a>
  222.                 <a href="">器材</a>
  223.                 <a href="">器材</a>
  224.             </div>
  225.         </div>
  226.     </div>
  227.     <!--    下：图片轮播+广告-->
  228.     <div class="slider-ads">
  229.         <div class="slider">
  230.             <a href=""><img src="../static/images/1.jpg" alt=""></a>
  231.         </div>
  232.         <div class="ads">
  233.             <a href=""><img src="../static/images/banner-right.jpg" alt=""></a>
  234.         </div>
  235.     </div>
  236. </div>
  237. </body>
  238. </html>


上图为效果图，上述代码知识点总结

  1. 定位，position,relative将块地位为父级，absolute将行内元素定位为子级；
  2. css的调用，<link rel="stylesheet" href="">和@import url(),一般使用前者link的方法
  3. emmet语法：id（#）,class（.）子节点（>），兄弟节点（+），上级节点（^）重复（*）分组（()）需要在实战中多运用
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