search

博客列表 >css基础html基础-Php第十期线上培训班

css基础html基础-Php第十期线上培训班

迫
迫原创
2019年12月25日 12:32:08674浏览

由于工作原因，故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（.）子节点（>），兄弟节点（+），上级节点（^）重复（*）分组（()）需要在实战中多运用
上一条：1220作业+HTML和CSS的简单应用（float和position）+10期线上班下一条：2019.12.23第四节课 flex入门
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多