Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 12.20作业网页传统布局
Blogger Information
Blog 4
fans 0
comment 0
visits 2249
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
12.20作业网页传统布局
天津饭
Original
645 people have browsed it

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="12.23课程源码/1223/static/font/iconfont.css">
  7.     <style>
  8.         *{
  10.             font-size:20px;
  11.             /*outline:1px dashed palevioletred;*/
  12.         }
  13.             .index-header{
  14.                 width:1500px;
  15.                 height:1000px;
  16.                 margin:50px auto;
  17.             }
  18.         .index-header>.top{
  19.             height:70px;
  20.             position:relative;
  21.         }
  22.         .index-header>.top*{
  23.             height:inherit;
  24.             line-height:100px;
  26.         }
  27.         .index-header>.top>.logo{
  28.             width:250px;
  29.             position:absolute;
  30.             top:0;
  31.             left:0;
  33.         }
  34.         .index-header>.top>.search{
  35.             width:300px;
  36.             position:absolute;
  37.             right:450px;
  38.             top:15px
  39.         }
  40.         .index-header>.top>.quick{
  41.             width:400px;
  42.             position:absolute;
  43.             right:0;
  44.             top:30px;
  46.         }
  47.         .index-header>.top>.search>input[type="search"]{
  48.             width:300px;
  49.             height:33px;
  50.             border-radius:8px;
  51.         }
  52.         .index-header>.top>.search>input[type="search"]+label{
  53.             font-size:30px;
  54.             margin:-30px;
  55.             position: relative;
  56.             top:5px;
  57.             right:10px
  58.         }
  59.         .index-header>.nav {
  60.             height: 50px;
  62.         }
  63.         .index-header>.nav >.nav-item{
  64.             width:350px;
  65.             height:80px;
  66.             position:relative;
  67.             float:left;
  69.         }
  70.         .index-header>.nav >.nav-item >.iconfont{
  71.             font-size:50px;
  72.             color:rebeccapurple;
  73.             position:absolute;
  74.         }
  75.         .index-header>.nav .nav-item .tag{
  76.             width: 50px;
  77.             position:absolute;
  78.             left:65px;
  79.             border-right:1px solid palevioletred;
  80.         }
  81.         .index-header>.nav .nav-item .links{
  82.             width:300px;
  83.             position:absolute;
  84.             left:120px;
  85.         }
  86.         .index-header>.nav >.nav-item>.links>a:hover{
  87.             color:lightgreen;
  88.         }
  89.         .index-header>.slider-ads{
  90.             height:500px;
  91.             position:relative;
  92.         }
  93.         .index-header>.slider-ads>.slider{
  94.             width:900px;
  95.             position:absolute;
  96.             top:100px;
  97.         }
  98.         .index-header>.slider-ads>.ads{
  99.             width:200px;
  100.             position:absolute;
  101.             top:100px;
  102.             right:200px;
  103.         }
  104.     </style>
  105. </head>
  106. <body>
  107.  <div class="index-header">
  108.     <div class="top">
  109.         <div class="logo">
  110.             <a href="https://www.php.cn"><img src="12.23课程源码/1223/static/images/logo.png"></a>
  111.         </div>
  112.                    <div class="search">
  113.                 <input type="search" id="search"><label for="search" class="iconfont icon-icon_group"></label>
  114.                    </div>
  115.         <div class="quick">
  116.             <span class="iconfont icon-icon_group"></span>
  117.             <span class="iconfont icon-icon_group"></span>
  118.             <span class="iconfont icon-icon_group"></span>
  119.             <span class="iconfont icon-icon_group"></span>
  120.             <span class="iconfont icon-icon_group"></span>
  121.             <span class="iconfont icon-icon_group"></span>
  122.         </div>
  123.     </div>
  124.     <div class="nav">
  125.         <div class="nav-item">
  126.             <span class="iconfont icon-DOC"></span>
  127.             <div class="tag">
  128.                 <span>咨询</span>
  129.                 <span>课程</span>
  130.             </div>
  131.                 <div class="links">
  132.                     <a href="">语文</a>
  133.                     <a href="">数学</a>
  134.                     <a href="">英语</a>
  135.                     <a href="">政治</a>
  136.                     <a href="">历史</a>
  137.                     <br>
  138.                     <a href="">生物</a>
  139.                     <a href="">汉语</a>
  140.                     <a href="">地理</a>
  141.                     <a href="">美语</a>
  142.                     <a href="">法语</a>
  144.                 </div>
  147.             </div>
  148.         <div class="nav-item">
  149.             <span class="iconfont icon-DOC"></span>
  150.             <div class="tag">
  151.                 <span>咨询</span>
  152.                 <span>课程</span>
  153.             </div>
  154.                 <div class="links">
  155.                     <a href="">语文</a>
  156.                     <a href="">数学</a>
  157.                     <a href="">英语</a>
  158.                     <a href="">政治</a>
  159.                     <a href="">历史</a>
  160.                     <br>
  161.                     <a href="">生物</a>
  162.                     <a href="">汉语</a>
  163.                     <a href="">地理</a>
  164.                     <a href="">美语</a>
  165.                     <a href="">法语</a>
  167.                 </div>
  170.         </div>
  171.         <div class="nav-item">
  172.             <span class="iconfont icon-DOC"></span>
  173.             <div class="tag">
  174.                 <span>咨询</span>
  175.                 <span>课程</span>
  176.             </div>
  177.                 <div class="links">
  178.                     <a href="">语文</a>
  179.                     <a href="">数学</a>
  180.                     <a href="">英语</a>
  181.                     <a href="">政治</a>
  182.                     <a href="">历史</a>
  183.                     <br>
  184.                     <a href="">生物</a>
  185.                     <a href="">汉语</a>
  186.                     <a href="">地理</a>
  187.                     <a href="">美语</a>
  188.                     <a href="">法语</a>
  190.                 </div>
  193.         </div>
  194.         <div class="nav-item">
  195.             <span class="iconfont icon-DOC"></span>
  196.             <div class="tag">
  197.                 <span>咨询</span>
  198.                 <span>课程</span>
  199.             </div>
  200.                 <div class="links">
  201.                     <a href="">语文</a>
  202.                     <a href="">数学</a>
  203.                     <a href="">英语</a>
  204.                     <a href="">政治</a>
  205.                     <a href="">历史</a>
  206.                     <br>
  207.                     <a href="">生物</a>
  208.                     <a href="">汉语</a>
  209.                     <a href="">地理</a>
  210.                     <a href="">美语</a>
  211.                     <a href="">法语</a>
  213.                 </div>
  216.         </div>
  218.     </div>
  219.     <div class="slider-ads">
  220.         <div class="slider">
  221.             <a href=""><img src="12.26/images/1.jpg" alt=""></a>
  222.         </div>
  223.         <div class="ads">
  224.             <a href=""><img src="12.26/images/banner-right.jpg" alt=""></a>
  225.         </div>
  226.     </div>
  228.   </div>
  230. </div>
  231. </body>
  232. </html>

感觉有点乱#关于定位父级

意思是在这个.index-header>.slider-ads盒子中把css代码写成 `position:relative;就是把slider-ads这个盒子定位为父级了吗

下面两个子元素写上position:absolute后，子元素位置的移动是相对于刚才定位的父元素做出改变

  1. .index-header>.slider-ads{
  2.             height:500px;
  3.             position:relative;
  4.         }
  5.         .index-header>.slider-ads>.slider{
  6.             width:900px;
  7.             position:absolute;
  8.             top:100px;
  9.         }
  10.         .index-header>.slider-ads>.ads{
  11.             width:200px;
  12.             position:absolute;
  13.             top:100px;
  14.             right:200px;
  15.         }
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