简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 前端学习-1220号作业
Blogger Information
Blog 4
fans 0
comment 0
visits 2262
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号作业
天
Original
690 people have browsed it

1220号作业

效果图展示
终于是完成了一次作业，之前的作业后面会慢慢补上

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <link rel="stylesheet" href="D:\phpstudy_pro\WWW\static\font\iconfont.css">
  8.   <!-- <link rel="stylesheet" href="D:\phpstudy_pro\WWW\chapter1\1220zuoye.css"> -->
  9.   <style media="screen">
  10.         /* 初始化 */
  11.       *{
  12.          margin: 0;
  13.          padding: 0;
  14.          font-size: 14px;
  15.          /* 添加一个轮廓线 */
  16.          /* outline: 1px  dashed red; */
  17.       }
  18.       /* A 标签需要单独设置字体和颜色 */
  19.       a {
  20.               color: #555;
  21.               font-size: 13px;
  22.               /* 下划线去掉 */
  23.               text-decoration: none;
  24.       }
  25.       /* 容器，大盒子，ID能不用就不用，尽可能用class */
  26.       .index-header{
  27.         width: 1200px;
  28.         min-height: 300px;
  29.         margin: 30px auto;
  30.       }
  31.        /* 父级类 后买要是空格，则是选择所有下级类 */
  32.         .index-header > .logo-search-quickly{
  33.           height: 70px;
  34.           /* 绝对定位，相对于他的父级元素定位， */
  35.           /* 相对定位，相对于元素其本身 */
  36.           /* 固定，则是相对于整个html文档。 */
  37.           /* 转为定位元素 */
  38.           position: relative;
  39.         }
  40.         /* 统一样式 */
  41.         .index-header > .logo-search-quickly * {
  42.               /* 默认和父元素一致 */
  43.             height: inherit;
  44.                /* 设置行高，就可以使得行内元素垂直居中 */
  45.             line-height: 70px;
  46.         }
  47.         /* logo */
  48.         .index-header > .logo-search-quickly > .logo {
  49.               width: 170px;
  50.               position: absolute;
  51.               /* 默认值，可省略 */
  52.               top: 0;
  53.               left: 0;
  54.         }
  55.         .index-header > .logo-search-quickly > .search {
  56.               width: 330px;
  57.               position: absolute;
  58.               /* 默认值，可省略 */
  60.               right: 350px;
  61.         }
  62.         .index-header > .logo-search-quickly > .quickly {
  63.               width: 300px;
  64.               position: absolute;
  65.               /* 默认值，可省略 */
  67.               right: 0;
  68.         }
  69.         .index-header > .logo-search-quickly > .logo img {
  70.               /* 自适应，响应式图片 */
  71.               height: 100%;
  72.               /* 这里添加图片有，有个bug，图片底部有白边，需要设置为块元素 */
  73.               display: block;
  74.         }
  75.         .index-header > .logo-search-quickly > .search > input[type="search"] {
  76.               width: 330px;
  77.               height: 36px;
  78.               border-radius: 10px;
  79.               padding: 10px;
  80.         }
  81.          /* 放大镜图标,加号，选择相邻元素 */
  82.          .index-header > .logo-search-quickly > .search > input[type="search"]+label {
  83.                /* 放大镜是字体图标 */
  84.                font-size: 23px;
  85.                margin-left: -30px;
  86.                position: relative;
  87.                top: 5px;
  88.          }
  89.          .index-header > .logo-search-quickly > .quickly > a  {
  90.                font-size: 33px;
  91.                margin-left: 6px;
  92.          }
  93.          .index-header > .logo-search-quickly > .quickly > a:hover  {
  94.                color: red;
  95.                /* 设置鼠标样式 */
  96.                cursor: pointer;
  97.          }
  98.           .index-header > .logo-search-quickly > .search > input[type="search"]:hover{
  99.             box-shadow: 6px 6px 5px #888888
  100.           }
  101.           /* 中间导航区 */
  102.           .index-header > .main-nav{
  103.                height: 44px;
  104.           }
  105.           .index-header > .main-nav > .nav-deatail{
  106.                width: 300px;
  107.                height: inherit;
  108.                /* 转为定位元素，父级 */
  109.                position: relative;
  110.                float: left;
  112.           }
  113.           .index-header > .main-nav > .nav-deatail > .pic > .iconfont{
  114.                font-size: 40px;
  115.                color: red;
  116.                position: absolute;
  118.           }
  119.           .index-header > .main-nav > .nav-deatail > .pic > .tag{
  120.                width: 40px;
  121.                position: absolute;
  122.                left: 45px;
  123.                border-right: 1px solid #cccccc;
  125.           }
  126.           .index-header > .main-nav > .nav-deatail > .links{
  127.                width: 120px;
  128.                position: absolute;
  129.                left: 95px;
  131.           }
  132.           .index-header > .main-nav > .nav-deatail > .links a:hover{
  133.                color: red;
  135.           }
  136.         .index-header > .banner {
  137.              height: 320px;
  138.              position: relative;
  139.         }
  140.         .index-header > .banner > .slider {
  141.              width: 900px;
  142.              position: absolute;
  143.         }
  144.         .index-header > .banner > .ads {
  145.             width: 295px;
  146.             position: absolute;
  147.             right: 0;
  148.         }
  149.         .index-header > .banner img {
  150.           height: 100%;
  151.           display: block;
  152.         }
  153.   </style>
  154.   <title>12月20日作业</title>
  155. </head>
  156.   <div class="index-header">
  157.     <div class="logo-search-quickly">
  158.        <div class="logo">
  159.           <a href=""><img src="D:\phpstudy_pro\WWW\static\images\logo.png" alt=""></a>
  160.        </div>
  161.        <div class="search">
  162.          <input type="search" name="search" id="search">
  163.          <label for="search" class="iconfont icon-jinduchaxun"></label>
  164.        </div>
  165.        <div class="quickly">
  166.          <a href="" class="iconfont icon-huiyuan1"></a>
  167.          <a href="" class="iconfont icon-danmu1"></a>
  168.          <a href="" class="iconfont icon-fabu"></a>
  169.          <a href="" class="iconfont icon-fangda"></a>
  170.          <a href="" class="iconfont icon-huiyuan2"></a>
  171.          <a href="" class="iconfont icon-dianzan"></a>
  172.        </div>
  173.      </div>
  174.     <div class="main-nav">
  175.       <div class="nav-deatail">
  176.           <div class="pic">
  177.             <span class="iconfont icon-gongdan"></span>
  178.             <div class="tag">
  179.               <span>资讯</span>
  180.               <span>学习</span>
  181.             </div>
  182.           </div>
  183.           <div class="links">
  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.              <a href="">影视</a>
  191.              <a href="">其它</a>
  192.           </div>
  193.       </div>
  194.       <div class="nav-deatail">
  195.         <div class="pic">
  196.            <span class="iconfont icon-renwujincheng"></span>
  197.            <div class="tag">
  198.              <span>爱好</span>
  199.              <span>姐妹</span>
  200.            </div>
  201.         </div>
  202.          <div class="links">
  203.           <a href="">油品</a>
  204.           <a href="">飞机</a>
  205.           <a href="">图片</a>
  206.           <a href="">喝水</a>
  207.           <a href="">坦克</a>
  208.           <a href="">气球</a>
  209.           <a href="">毛虾</a>
  210.           <a href="">大侠</a>
  211.         </div>
  212.       </div>
  213.       <div class="nav-deatail">
  214.         <div class="pic">
  215.           <span class="iconfont icon-gongdan"></span>
  216.           <div class="tag">
  217.             <span>软件</span>
  218.             <span>技能</span>
  219.           </div>
  220.         </div>
  221.         <div class="links">
  222.           <a href="">学习</a>
  223.           <a href="">爱国</a>
  224.           <a href="">敬业</a>
  225.           <a href="">友善</a>
  226.           <a href="">明主</a>
  227.           <a href="">富强</a>
  228.           <a href="">和平</a>
  229.           <a href="">正义</a>
  230.         </div>
  231.       </div>
  232.       <div class="nav-deatail">
  233.         <div class="pic">
  234.           <span class="iconfont icon-gongdan"></span>
  235.           <div class="tag">
  236.             <span>编程</span>
  237.             <span>美女</span>
  238.           </div>
  239.         </div>
  240.           <div class="links">
  241.             <a href="">吃饭</a>
  242.             <a href="">睡觉</a>
  243.             <a href="">合肥</a>
  244.             <a href="">北京</a>
  245.             <a href="">杭海</a>
  246.             <a href="">云南</a>
  247.             <a href="">西安</a>
  248.             <a href="">天津</a>
  249.           </div>
  250.         </div>
  251.       </div>
  252.     <div class="banner">
  253.       <div class="slider">
  254.         <a href=""><img src="D:\phpstudy_pro\WWW\static\images\2.jpg" alt=""></a>
  255.       </div>
  256.       <div class="ads">
  257.         <a href=""><img src="D:\phpstudy_pro\WWW\static\images\banner-right.jpg" alt=""></a>
  258.       </div>
  259.     </div>
  260.   </div>
  262. <body>
  264. </body>
  265. </html>

*完成作业的时候，遇到一个问题，就是广告图片在加上css之后，就一直会超出index-header的范围，且加上

  1. right：0；

的时候,广告图片一直居右，最后费了好长时间，各种修改，各种尝试，在调试的时候，发现banner类的css一直没有生效，随即检查css代码是，发现上面多了一个

  1. }

修改之后，就完全正常了。第一次学习的时候，还是很有必要跟着老师的思路，一步步完成，多写几次，慢慢就有感觉了。

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！