search

博客列表 >前端学习-1220号作业

前端学习-1220号作业

天
天原创
2019年12月31日 13:15:44691浏览

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. }

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

上一条：2019-12-25 flex容器项目上6个属性、组件开发思路及导航代码-PHP培训十期下一条：12月26日网站各个组件的实战，以及FLEX的具体应用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多