登录  /  注册
首页 > 博客列表 > 2020作业
博主信息
博文 26
粉丝 0
评论 2
访问量 34221
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
2020作业
小辰
原创
633人浏览过

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

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

  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>

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

以上就是我的作业结果。

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：看来你对负外边距不熟悉 , 建议看一下margin的介绍, 这个属性允许负值, 元素会向相反的方向移动
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录