search

博客列表 >12.20作业网页传统布局

12.20作业网页传统布局

天津饭
天津饭原创
2019年12月28日 13:24:34644浏览

  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.         }
上一条：12月27日作业：pnp中文网移动端布局案例（flex）下一条：12月26号作业吗
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多