Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 2020作业
Blogger Information
Blog 26
fans 0
comment 2
visits 35053
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
2020作业
小辰
Original
657 people have browsed it

下面是我做好的效果图下面是我做好的效果图

全部代码如下全部代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <link rel="stylesheet"  href="static/font/iconfont.css"><link rel="stylesheet" type="text/css" href="index_header.css">
  6.     <style >
  7.          /*对所有元素进行总的样式设计*/
  8.          * {
  9.              margin: 0;
  10.              padding: 0;
  11.              /*font-size: 18px;*/
  12.             font-size: 14px;
  13.              /*color: #666666;*/
  14.             font-size: #555555
  15.              outline:2px dashed red;
  17.          } 
  18.          /*对所有链接的字体进行设计*/
  19.          a {
  20.              color: #555555;
  21.             /*font-size: 18px;*/
  22.             font-size:  14px;
  23.             text-decoration: none;
  24.          }
  25.          /*设置主页头部*/
  26.          .index-header {
  27.              width: 1200px;
  28.              min-height: 300px;
  29.              margin: 30px auto;
  31.          }
  32.          /*设置主页头部最上面的导航栏*/
  33.          .index-header > .top {
  34.              height: 70px;
  35.              position: relative;
  36.          }
  37.          /*对顶部所有元素进行设置*/
  38.          .index-header > .top  * {
  39.              height: inherit;
  40.              line-height: 70px;
  41.          }
  42.          /*对logo的样式进行设计*/
  43.          .index-header > .top > .logo {
  44.             width: 176px;
  45.             position: absolute;
  46.             top: 0;
  47.             left: 0;
  48.         }
  49.         /*对搜索框进行设置*/
  50.          .index-header > .top > .search {
  51.             width: 330px;
  52.             position: absolute;
  53.             right: 350px;
  54.         }
  55.         /*快速链接设置*/
  56.         .index-header > .top > .quick-start {
  57.             /*width: 300px;*/
  58.             width: 330px;
  59.             position: absolute;
  60.             right: 0;
  61.         }
  62.         .index-header > .top > .logo img {
  63.             height: 100%;
  64.             display: block;
  65.         }
  66.         /*搜索框样式*/
  67.         .index-header > .top > .search > input[type="search"] {
  68.             /*占满空间*/
  69.             width: 330px;
  70.             height: 36px;
  71.             border-radius: 10px;
  72.             padding: 10px;
  73.         }
  74.         /*放大镜样式*/
  75.        .index-header > .top > .search > input[type="search"] + label {
  76.             /*设置大小*/
  77.             font-size: 23px;
  78.             /*微调显示位置*/
  79.             /*负左外边距, 处相反方向移动,实现上移到搜索框内的效果*/
  80.             margin-left: -30px;
  81.             /*相对定位,实现居中效果*/
  82.             position: relative;
  83.             top: 2px;
  84.         }
  85.         /*鼠标悬停显示小手*/
  86.         .index-header > .top > .quick-start > span {
  87.             font-size: 33px;
  88.             margin-right: 6px;
  89.         }
  90.         /*鼠标悬停为红色*/
  91.         .index-header > .top > .quick-start > span:hover {
  92.             cursor: pointer;
  93.             color: red;
  94.         }
  95.         /*选择框中的seach类型*/
  96.         .index-header > .top > .search > input[type="search"]:hover {
  97.             cursor: pointer;
  98.             /*添加盒子阴影,实现外发光*/
  99.             box-shadow: 0 0 5px #888888;
  100.         }
  103.         /*中间导航链接区*/
  104.         .index-header > .nav {
  105.             height: 44px;
  106.         }
  107.         /*导航中的每一个链接组*/
  108.         .index-header > .nav > .nav-item {
  109.             width: 300px;
  110.             height: inherit;
  111.             /*float: left;*/
  112.             /*转为定位父级*/
  113.             position: relative;
  114.         }
  116.         /*字体图标*/
  117.         .index-header > .nav > .nav-item > .iconfont {
  118.             font-size: 40px;
  119.             color: red;
  120.             position: absolute;
  121.         }
  123.         /*标签*/
  124.         .index-header > .nav > .nav-item > .tag {
  125.             width: 40px;
  126.             position: absolute;
  127.             /*top: 0;*/
  128.             left: 45px;
  129.             border-right: 1px solid #cccccc;
  130.         }
  131.         /*链接组*/
  132.         .index-header > .nav > .nav-item > .links {
  133.             width: 160px;
  134.             position: absolute;
  135.             /*top: 0;*/
  136.             left: 95px;
  137.         }
  138.         /*链接组中的链接样式*/
  139.         .index-header > .nav > .nav-item > .links > a {
  140.             margin-right: 8px;
  141.         }
  142.         .index-header > .nav > .nav-item > .links > a:hover {
  143.             color: red;
  144.         }
  146.         /*最后将每一个导航组模块全部左浮动,收工*/
  147.         .index-header > .nav > .nav-item {
  148.             float: left;
  149.         }
  151.         /*右边的轮播与广告图片*/
  152.         .index-header > .slider-ads {
  153.             height: 600px;
  154.             width: 700px;
  155.             position: relative;
  156.         }
  158.         .index-header > .slider-ads > .slider {
  159.             height: 600px;
  160.             width: 200px;
  161.             position: absolute;
  162.             /*默认从左上角开始定位,可以省略*/
  163.             top: 0;
  164.             left: 0;
  165.         }
  168.         .index-header > .slider-ads > .ads {
  169.             width:100px;
  170.             position: absolute;
  171.             top: 0; /* 可省略 */
  172.             right: 0;
  173.         }
  174.         .index-header > .slider-ads  img {
  175.             height: 100%;
  176.             /*清除图片空白区*/
  177.             display: block;
  178.         }
  179.         /*参考线可以清楚的看到图片下面的空白区*/
  180.         .index-header > .slider-ads a {
  181.             /*outline: 1px solid blue;*/
  182.         }
  183.         /*统一调整每个组件中的上下外边距*/
  184.         .index-header > * {
  185.             margin: 20px 0;
  186.         }
  191.     </style>
  192.     <title>全站首页导航与轮播图</title>
  193. </head>
  194. <body>
  195. <div class="index-header">
  197.          <!-- <div class="log-search"> -->
  198.               <!-- <a href="" class="logo"><img src="static/img/logo.png" alt=""></a> -->
  199.               <div class="top">
  200.         <!--右侧logo-->
  201.         <div class="logo">
  202.             <!--logo-->
  203.             <a href=""><img src="static/img/logo.png" alt=""></a>
  204.         </div> 
  205.         <!-- 中间搜索框 -->
  206. # 这段代码自己打的实现不了效果，用老师的代码就可以实现效果，不知道为什么？求解答，呜呜 
  207. <!-- 这段代码自己打的实现不了效果，用老师的代码就可以实现效果，不知道为什么？ -->
  208.               <!-- <div class="search"> -->
  209.                    <!-- <input type="search"  id="search"> -->
  210.                     <!-- <label for="search" class="iconfont icon-jinduchaxun"></label></div> -->
  211.                    <div class="search">
  212.             <input type="search" id="search"><label for="search" class="iconfont icon-jinduchaxun"></label>
  213.         </div>
  215.              <!-- 右侧功能快速入口 -->
  216.             <div class="quick-start">
  217.                 <span class="iconfont icon-huiyuan1"></span>
  218.                 <span class="iconfont icon-danmu1"></span>
  219.                 <span  class="iconfont icon-fabu"></span>
  220.                 <span href="" class="iconfont icon-fangda"></span>
  221.                 <span href="" class="iconfont icon-huiyuan2"></span>
  222.                 <span href="" class="iconfont icon-dianzan"></span>
  223.                 </div>
  225.             </div>
  226.             <!-- 主导航 -->
  227.             <div class="nav">
  228.                  <!-- 导航详情1 -->
  229.                   <div class="nav-item">
  230.                       <span class="iconfont icon-gongdan"></span>
  231.                      <div class="tag">
  232.                      <span>资讯</span>
  233.                     <span>学习</span>
  234.                      </div>
  236.                      <div class="links">
  237.                          <a href="">器材</a> 
  238.                          <a href="">大师</a>
  239.                          <a href="">大师</a>
  240.                          <a href="">大师</a>
  241.                          <a href="">大师</a>
  242.                          <a href="">大师</a>
  243.                          <a href="">大师</a>
  244.                          <a href="">其他</a>
  245.                      </div>
  246.                   </div><div class="nav-item">
  247.                       <span class="iconfont icon-gongdan"></span>
  248.                      <div class="tag">
  249.                      <span>资讯</span>
  250.                     <span>学习</span>
  251.                      </div>
  253.                      <div class="links">
  254.                          <a href="">器材</a> 
  255.                          <a href="">大师</a>
  256.                          <a href="">大师</a>
  257.                          <a href="">大师</a>
  258.                          <a href="">大师</a>
  259.                          <a href="">大师</a>
  260.                          <a href="">大师</a>
  261.                          <a href="">其他</a>
  262.                      </div>
  263.                   </div><div class="nav-item">
  264.                       <span class="iconfont icon-gongdan"></span>
  265.                      <div class="tag">
  266.                      <span>资讯</span>
  267.                     <span>学习</span>
  268.                      </div>
  270.                      <div class="links">
  271.                          <a href="">器材</a> 
  272.                          <a href="">大师</a>
  273.                          <a href="">大师</a>
  274.                          <a href="">大师</a>
  275.                          <a href="">大师</a>
  276.                          <a href="">大师</a>
  277.                          <a href="">大师</a>
  278.                          <a href="">其他</a>
  279.                      </div>
  280.                   </div>
  281.                   <div class="nav-item">
  282.                         <span class="iconfont icon-gongdan"></span>
  283.                        <div class="tag">
  284.                        <span>资讯</span>
  285.                     <span>学习</span>
  286.                        </div>
  288.                        <div class="links">
  289.                             <a href="">器材</a> 
  290.                             <a href="">大师</a>
  291.                             <a href="">大师</a>
  292.                             <a href="">大师</a>
  293.                             <a href="">大师</a>
  294.                             <a href="">大师</a>
  295.                             <a href="">大师</a>
  296.                             <a href="">其他</a>
  297.                        </div>
  298.                   </div>
  299.                 </div>
  307.             <<!-- 轮播图 -->
  308.             <div class="slider-ads">
  309.             <div class="slider"><a href=""><img src="static/img/1.jpg" alt=""></a></div>
  310.             <div class="ads"><a href=""><img src="static/img/2.jpg" alt=""></a></div>
  312.          </div>
  313.     </div>
  314. </div>
  315. </body>
  316. </html>

老师我上面的放大镜的地方，明明和老师写的一样，但位置就是有点不对，一直在下一行，直接用老师的代码就行，我想知道有什么不同。老师我上面的放大镜的地方，明明和老师写的一样，但位置就是有点不对，一直在下一行，直接用老师的代码就行，我想知道有什么不同。

以上就是我的作业结果。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：看来你对负外边距不熟悉 , 建议看一下margin的介绍, 这个属性允许负值, 元素会向相反的方向移动
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