search

博客列表 >1220作业+HTML和CSS的简单应用（float和position）+10期线上班

1220作业+HTML和CSS的简单应用（float和position）+10期线上班

江川林
江川林原创
2019年12月25日 10:52:34790浏览

朱老师好，本次作业交的有点晚，抱歉

在老师没有讲此次作业的时候，做的非常吃力，也参考了其他同学的作业，发现很不实用，不清晰

在老师讲之前，自己经常用浮动，顶部的LOGO，search,icon做出来，下面的导航用浮动，怎么浮都不行，很乱

本次朱老师的细心讲解，让我对页面的排版有了清晰的认识，也重新理解了定位，更灵活的运用了定位知识，将此次作业完成，以下是我结合老师的讲解和根据自己的理解，完成之前我没做完的作业（里面字体图标我都是用的图片）

以下是图片：

以下是代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>1220作业制作</title>
  6.     <style>
  7.         /*初始化*/
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.             /*outline:1px  red dashed;*/
  12.             font-size: 13px;
  13.         }
  14.         /*a标签初始化*/
  15.         a {
  16.             list-style: none;
  17.             text-decoration: none;
  18.             color: #555555;
  19.         }
  20.         .header  {
  21.             height: 300px;
  22.             width: 1200px;
  23.             margin: 30px auto;
  24.         }
  25.         .header > .head  {
  26.             height: 100px;
  27.             position: relative;
  28.         }
  29.         .header > .head >.head-logo {
  30.             height: inherit;
  31.             width: 300px;
  32.             position: absolute;
  33.             top: 0;
  34.             left: 0;
  35.         }
  36.         .header > .head > .head-search {
  37.             height: inherit;
  38.             width: 300px;
  39.             border-radius: 10px;
  40.             position: absolute;
  41.             top: 0;
  42.             right: 330px;
  43.         }
  44.         .header > .head > .head-search input[type="search"] {
  45.             height: 30px;
  46.             width: 300px;
  47.             position: relative;
  48.             top: 20px;
  49.         }
  50.         .header > .head > .head-search input[type="search"] + label {
  51.             position: relative;
  52.             top: 25px;
  53.         }
  54.         .header > .head > .head-search img {
  55.             margin-left: -30px;
  56.         }
  57.         .header > .head > .head-icon {
  58.             height: 70px;
  59.             width: 300px;
  60.             position: absolute;
  61.             top: 0;
  62.             right: 0;
  63.         }
  64.         .header > .head > .head-icon img {
  65.             position: relative;
  66.             top: 20px;
  67.             margin-right: 10px;
  68.         }
  69.         .header > .head > .head-icon > a:hover{
  70.             color: red;
  71.             cursor: pointer;
  72.         }
  73.         .header > .main {
  74.             height: 40px;
  75.             position: relative;
  76.         }
  77.         .header > .main > .main-one {
  78.             height: inherit;
  79.             width: 300px;
  80.             position: relative;
  81.             top: 0;
  82.             left: 0;
  83.             float: left;
  84.         }
  85.         .header > .main > .main-one >.main-image {
  86.             height: 70px;
  87.             width: 40px;
  88.             position: absolute;
  89.             top: 0;
  90.             left: 0;
  91.         }
  92.         .header > .main > .main-one > .main-option {
  93.             height: 70px;
  94.             width: 40px;
  95.             position: absolute;
  96.             top: 0;
  97.             left: 45px;
  98.             border-right:1px solid #555555;
  99.         }
  100.         .header > .main > .main-one > .main-body {
  101.             height: 70px;
  102.             width: 200px;
  103.             position: absolute;
  104.             top: 0;
  105.             right: 0;
  106.         }
  107.         .header > .main > .main-one > .main-body > span:hover {
  108.             color: red;
  109.             cursor: pointer;
  110.         }
  111.         .end {
  112.             height: 130px;
  113.             position: relative;
  114.         }
  115.         .end > .end-picture {
  116.             height: inherit;
  117.             position: absolute;
  118.             top: 0;
  119.             left: 0;
  120.         }
  121.         .end > .end-ads {
  122.             height: inherit;
  123.             position: absolute;
  124.             top: 0;
  125.             right: 0;
  126.         }
  127.     </style>
  128. </head>
  129. <body>
  130. <div class="header" >
  131. <!--    上：LOGO+search+icon-->
  132.     <div class="head">
  133.         <!--LOGO栏-->
  134.         <div class="head-logo">
  135.                 <img src="static/images/logo.png" alt="php中文网LOGO">
  136.             </div>
  137. <!--        搜索框栏-->
  138.                  <div class="head-search">
  139.                         <input type="search" name="search" id="search"><label for="search"><img src="images/sousuo.png" alt="" id="search"></label>
  140.                  </div>
  141.         <!--        图标栏-->
  142.         <div class="head-icon">
  143.             <span><a href="" class="icon"><img src="images/办公.png" alt=""></a></span>
  144.             <span><a href="" class="icon"><img src="images/duihua.png" alt=""></a></span>
  145.             <span><a href="" class="icon"><img src="images/shangchuan.png" alt=""></a></span>
  146.             <span><a href="" class="icon"><img src="images/tianjia.png" alt=""></a></span>
  147.             <span><a href="" class="icon"><img src="images/lianxiren.png" alt=""></a></span>
  148.             <span><a href="" class="icon"><img src="images/dianzan.png" alt=""></a></span>
  149.         </div>
  150.     </div>
  151. <!--主体-->
  152.     <div class="main">
  153.         <div class="main-one">
  154.             <div class="main-image">
  155.                 <img src="images/作业.png" alt="">
  156.             </div>
  157.             <div class="main-option">
  158.                 <p>咨询</p>
  159.                 <p>学习</p>
  160.             </div>
  161.             <div class="main-body">
  162.                 <div>
  163.                     <a href=""><span>实战</span></a>
  164.                     <a href=""><span>实战</span></a>
  165.                     <a href=""><span>实战</span></a>
  166.                     <a href=""><span>实战</span></a>
  167.                 </div>
  168.                 <div>
  169.                     <a href=""><span>学习</span></a>
  170.                     <a href=""><span>学习</span></a>
  171.                     <a href=""><span>学习</span></a>
  172.                     <a href=""><span>学习</span></a>
  173.                 </div>
  174.             </div>
  175.         </div>
  176.         <div class="main-one">
  177.         <div class="main-image">
  178.             <img src="images/作业.png" alt="">
  179.         </div>
  180.         <div class="main-option">
  181.             <p>咨询</p>
  182.             <p>学习</p>
  183.         </div>
  184.         <div class="main-body">
  185.             <div>
  186.                 <a href=""><span>实战</span></a>
  187.                 <a href=""><span>实战</span></a>
  188.                 <a href=""><span>实战</span></a>
  189.                 <a href=""><span>实战</span></a>
  190.             </div>
  191.             <div>
  192.                 <a href=""><span>学习</span></a>
  193.                 <a href=""><span>学习</span></a>
  194.                 <a href=""><span>学习</span></a>
  195.                 <a href=""><span>学习</span></a>
  196.             </div>
  197.         </div>
  198.     </div>
  199.         <div class="main-one">
  200.         <div class="main-image">
  201.             <img src="images/作业.png" alt="">
  202.         </div>
  203.         <div class="main-option">
  204.             <p>咨询</p>
  205.             <p>学习</p>
  206.         </div>
  207.         <div class="main-body">
  208.             <div>
  209.                 <a href=""><span>实战</span></a>
  210.                 <a href=""><span>实战</span></a>
  211.                 <a href=""><span>实战</span></a>
  212.                 <a href=""><span>实战</span></a>
  213.             </div>
  214.             <div>
  215.                 <a href=""><span>学习</span></a>
  216.                 <a href=""><span>学习</span></a>
  217.                 <a href=""><span>学习</span></a>
  218.                 <a href=""><span>学习</span></a>
  219.             </div>
  220.         </div>
  221.     </div>
  222.         <div class="main-one">
  223.         <div class="main-image">
  224.             <img src="images/作业.png" alt="">
  225.         </div>
  226.         <div class="main-option">
  227.             <p>咨询</p>
  228.             <p>学习</p>
  229.         </div>
  230.         <div class="main-body">
  231.             <div>
  232.                 <a href=""><span>实战</span></a>
  233.                 <a href=""><span>实战</span></a>
  234.                 <a href=""><span>实战</span></a>
  235.                 <a href=""><span>实战</span></a>
  236.             </div>
  237.             <div>
  238.                 <a href=""><span>学习</span></a>
  239.                 <a href=""><span>学习</span></a>
  240.                 <a href=""><span>学习</span></a>
  241.                 <a href=""><span>学习</span></a>
  242.             </div>
  243.         </div>
  244.     </div>
  245.     </div>
  246. <!--    轮播图和广告-->
  247.     <div class="end">
  248. <!--        轮播图-->
  249.         <div class="end-picture">
  250.             <a href=""><img src="static/images/1.jpg" alt=""></a>
  251.         </div>
  252. <!--        广告位-->
  253.         <div class="end-ads">
  254.             <a href=""><img src="static/images/banner-right.jpg" alt="广告位"></a>
  255.         </div>
  256.     </div>
  257. </div>
  258. </body>
  259. </html>
上一条：弹性布局flex知识点-PHP第十期上线班下一条：css基础html基础-Php第十期线上培训班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多