search

博客列表 >2019年12月20日课后作业

2019年12月20日课后作业

Herry.
Herry.原创
2019年12月24日 20:45:42586浏览

2019年12月20日课后作业

  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>htmlwork</title>
  8.     <style>
  9.         /*初始化样式*/
  10.         *{
  11.             margin: 0;
  12.             padding: 0;
  13.             font-size: 13px;
  14.             /*方便布局添加一个轮廓线*/
  15.             /*outline: 1px dashed red;*/
  16.         }
  18.         a{
  19.             color: #555555;
  20.             font-size: 13px;
  21.             /*去掉下划线*/
  22.             text-decoration: none;
  23.         }
  25.         .index-header{
  26.             width: 1200px;
  27.             min-height: 300px;
  28.             margin: 30px auto;
  29.         }
  31.         .index-header > .top {
  32.             height: 70px;
  33.             position: relative;
  34.         }
  35.         .index-header > .top * {
  36.             height: inherit;
  37.             line-height: 70px;
  38.         }
  40.         /*顶部logo*/
  41.         .index-header > .top > .logo {
  42.             width: 176px;
  43.             position: absolute;
  44.             top: 0;
  45.             left: 0;
  46.         }
  47.         /*搜索框*/
  48.         .index-header > .top > .search {
  49.             width: 330px;
  50.             position: absolute;
  51.             top: 0 ;
  52.             right: 350px;
  53.         }
  54.         /*icon*/
  55.         .index-header > .top > .quick-start {
  56.             width: 300px;
  57.             position: absolute;
  58.             right: 0;
  59.         }
  61.         .index-header > .top > .logo img {
  62.             height: 100%;
  63.             display: block;
  64.         }
  66.         .index-header > .top > .search > input[type="search"] {
  67.             width: 330px;
  68.             height: 36px;
  69.             border-radius: 10px;
  70.             padding: 10px;
  71.         }
  73.         /*放大镜图标*/
  74.         .index-header > .top > .search > input[type="search"] + label {
  75.             font-size: 23px;
  76.             margin-left: -30px;
  77.             position: relative;
  78.             top: 5px;
  79.         }
  80.         .index-header > .top > .search > input[type="search"] :hover {
  81.             box-shadow: 0 0 5px #888888;
  82.         }
  83.          .index-header > .top > .quick-start > span {
  84.              font-size: 33px;
  85.              margin-right: 6px;
  86.          }
  87.         .index-header > .top > .quick-start > span:hover {
  88.             color: red;
  89.             /*设置鼠标样式*/
  90.             cursor: pointer;
  91.         }
  92.         /*中间导航区*/
  93.         .index-header > .nav {
  94.             height: 44px;
  95.         }
  96.         .index-header > .nav > .nav-item {
  97.             width: 300px;
  98.             height: inherit;
  99.             position: relative;
  101.             float: left;
  102.         }
  103.         .index-header > .nav > .nav-item > .iconfont {
  104.             font-size: 40px;
  105.             color: red;
  106.             position: absolute;
  108.         }
  109.         .index-header > .nav > .nav-item > .tag {
  110.             width: 40px;
  111.             position: absolute;
  112.             left: 45px;
  113.             border-right: 1px solid #cccccc;
  114.         }
  115.         .index-header > .nav > .nav-item > .links {
  116.             width: 160px;
  117.             position: absolute;
  118.             left: 95px;
  119.         }
  120.         .index-header > .nav > .nav-item > .links > a {
  121.             margin-right: 8px;
  122.         }
  123.         .index-header > .nav > .nav-item > .links > a:hover {
  124.             color: red;
  125.         }
  126.         .index-header > .slider-ads {
  127.             height: 320px;
  128.             position: relative;
  130.         }
  131.         .index-header > .slider-ads > .slider {
  132.             width: 900px;
  133.             position: absolute;
  135.         }
  136.         .index-header > .slider-ads > .ads {
  137.             width: 295px;
  138.             position: absolute;
  139.             right: 0;
  140.         }
  141.         .index-header > .slider-ads img {
  142.             height: 100%;
  143.             display: block;
  144.         }
  145.         .index-header > * {
  146.             margin: 20px 0;
  147.         }
  148.     </style>
  149. </head>
  150. <body>
  151. <!--主框样式-->
  152.      <div class="index-header">
  153. <!--上：顶部logo+搜索框search+图标icon-->
  154.          <div class="top">
  155.           <div class="logo">
  156.              <a href=""><img src="static/images/logo.png" alt=""></a>
  157.          </div>
  158.           <div class="search">
  159.               <input type="search" id="search"><label for="search" class="iconfont icon-jinduchaxun"></label>
  160.           </div>
  161.          <div class="quick-start">
  162.              <span class="iconfont icon-huiyuan1"></span>
  163.              <span class="iconfont icon-danmu1"></span>
  164.              <span class="iconfont icon-fabu"></span>
  165.              <span class="iconfont icon-fangda"></span>
  166.              <span class="iconfont icon-huiyuan2"></span>
  167.              <span class="iconfont icon-dianzan"></span>
  168.             </div>
  169.          </div>
  171. <!--         中：导航区nav-->
  172.          <div class="nav">
  173.              <div class="nav-item">
  174.                  <span class="iconfont icon-gongdan"></span>
  175.                  <div class="tag">
  176.                      <sapn>咨询</sapn>
  177.                      <span>学习</span>
  178.                  </div>
  179.                <div class="links">
  180.                  <a href="">器材</a>
  181.                  <a href="">器材</a>
  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.              </div>
  189.          </div>
  190.              <div class="nav-item">
  191.                  <span class="iconfont icon-gongdan"></span>
  192.                  <div class="tag">
  193.                      <sapn>咨询</sapn>
  194.                      <span>学习</span>
  195.                  </div>
  196.                  <div class="links">
  197.                      <a href="">器材</a>
  198.                      <a href="">器材</a>
  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.                  </div>
  206.              </div>
  207.              <div class="nav-item">
  208.                  <span class="iconfont icon-gongdan"></span>
  209.                  <div class="tag">
  210.                      <sapn>咨询</sapn>
  211.                      <span>学习</span>
  212.                  </div>
  213.                  <div class="links">
  214.                      <a href="">器材</a>
  215.                      <a href="">器材</a>
  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.                  </div>
  223.              </div>
  224.              <div class="nav-item">
  225.                  <span class="iconfont icon-gongdan"></span>
  226.                  <div class="tag">
  227.                      <sapn>咨询</sapn>
  228.                      <span>学习</span>
  229.                  </div>
  230.                  <div class="links">
  231.                      <a href="">器材</a>
  232.                      <a href="">器材</a>
  233.                      <a href="">器材</a>
  234.                      <a href="">器材</a>
  235.                      <a href="">器材</a>
  236.                      <a href="">器材</a>
  237.                      <a href="">器材</a>
  238.                      <a href="">器材</a>
  239.                  </div>
  240.              </div>
  241.          </div>
  242. <!--         下：轮播图slider+广告ads-->
  243.          <div class="slider-ads">
  244.              <div class="slider">
  245.                  <a href=""><img src="static/images/1.jpg" alt=""></a>
  246.              </div>
  247.              <div class="ads">
  248.                  <a href=""><img src="static/images/banner-right.jpg" alt=""></a>
  249.              </div>
  250.              </div>
  251.          </div>
  254. </body>
  255. </html>​

后附运行代码测试图

上一条：FLEX属性总结，练习--PHP培训十期线上班下一条：12月23，关于FLEX弹性盒子的初识及基本的运用方式
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多