简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 1220作业+HTML和CSS的简单应用（float和position）+10期线上班
Blogger Information
Blog 25
fans 1
comment 1
visits 17091
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
1220作业+HTML和CSS的简单应用（float和position）+10期线上班
江川林
Original
780 people have browsed it

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

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

在老师讲之前，自己经常用浮动，顶部的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>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：不上你们跳个坑, 就体会不到出坑的狂喜... 之前让大家写的那个作业 , 我知道会难住一部分人, 甚至有人都开始怀疑人生, 经过23日的课程, 大家又像是走进了世外桃源, 这样才能大家记忆深刻, 珍惜得之不易的学习成果... 祝你成功
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！