search

博客列表 >12月20日作业，实战页面静态布局使用POSITION标签完成

12月20日作业，实战页面静态布局使用POSITION标签完成

曾
曾原创
2019年12月22日 17:56:42659浏览
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns="http://www.w3.org/1999/html">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>页面实战布局</title>
  6.     <link rel="stylesheet" href="font/iconfont.css">
  7.     <style>
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         header{
  13.             height: 1000px;
  14.             width: 1300px;
  15.             position: relative;
  16.             left: 0px;
  17.             right: 0px;
  18.             top: 0;
  19.             bottom: 0;
  20.             margin: auto;
  21.             border: 1px solid red;
  22.         }
  23.         H1{
  24.             position: relative;
  25.             top: 30px;
  26.         }
  27.         form{
  28.             position: absolute;
  29.             left: 530px;
  30.             top: 60px;
  31.         }
  32.         a{
  33.             text-decoration: none;
  34.             color: black;
  35.             }
  36.         a:hover{
  37.             color: red;
  38.         }
  39.         span{
  40.             margin-right: 10px;
  41.             font-size: 14px;
  42.         }
  43.         .ser{
  44.             width: 391px;
  45.             height: 42px;
  46.             border: 1px solid lightgrey;
  47.             border-radius: 10px;
  48.             outline: none;
  49.         }
  50.         button{
  51.             border: 0;
  52.             background-color: transparent;
  53.             display: block;
  54.             position: absolute;
  55.             left: 350px;
  56.             top: 5px;
  57.         }
  58.         .icon-sousuo2 {
  59.             font-size: 25px;
  60.         }
  61.         .icon-huiyuan1,.icon-danmu1,.icon-fabu,.icon-fangda,.icon-huiyuan2,.icon-dianzan{
  62.             font-size: 30px;
  63.         }
  64.         .icon-gongdan,.icon-renwujincheng,.icon-shiyongwendang,.icon-DOC{
  65.             font-size: 47px;
  66.             color: red;
  67.         }
  68.         .vip{
  69.             position: absolute;
  70.             left: 950px;
  71.             top: 60px;
  72.         }
  73.         .vip_a{
  74.             margin: 0 6px 0;
  75.         }
  76.         .link{
  77.             margin: 50px 0 0 0;
  78.         }
  79.         .link_one,.link_tow,.link_thr,.link_four{
  80.             width: 290px;
  81.             height: 50px;
  82.         }
  83.         .icon{
  84.             margin-left: 2px;
  85.         }
  86.         .link_tow {
  87.             position: absolute;
  88.             top: 133px;
  89.             left: 310px;
  90.         }
  91.         .link_thr{
  92.             position: absolute;
  93.             top: 133px;
  94.             left: 640px;
  95.         }
  96.         .link_four{
  97.             position: absolute;
  98.             top: 133px;
  99.             left: 960px;
  100.         }
  101.         .l-box1{
  102.             width: 40px;
  103.             height: 42px;
  104.             border-right: 3px solid lightgrey;
  105.             position: relative;
  106.             left: 50px;
  107.             top: -50px;
  108.         }
  109.         .l-box2{
  110.             width: 180px;
  111.             height: 45px;
  112.             position: relative;
  113.             left: 105px;
  114.             top: -92px;}
  115.         .text{
  116.             line-height: 18px;
  117.         }
  118.     </style>
  119. </head>
  120. <body>
  121. <header>
  122.     <nav>
  123.         <H1><a href="https://www.php.cn"><img src="images/logo.png" alt=""></a></H1>
  124.         <form action="">
  125.             <label for="sch"></label>
  126.             <input type="search" class="ser" id="sch">
  127.             <button><i class="iconfont icon-sousuo2"></i></button>
  128.         </form>
  129.         <section class="vip">
  130.                 <a href="##" class="vip_a"><span class="iconfont icon-huiyuan1"></span></a>
  131.                 <a href="##" class="vip_a"><span class="iconfont icon-danmu1"></span></a>
  132.                 <a href="##" class="vip_a"><span class="iconfont icon-fabu"></span></a>
  133.                 <a href="##" class="vip_a"><span class="iconfont icon-fangda"></span></a>
  134.                 <a href="##" class="vip_a"><span class="iconfont icon-huiyuan2"></span></a>
  135.                 <a href="##" class="vip_a"><span class="iconfont icon-dianzan"></span></a>
  136.         </section>
  137.     </nav>
  138.     <section class="link">
  139.         <div class="link_one">
  140.             <span class="icon iconfont icon-gongdan"></span>
  141.             <div class="l-box1">
  142.                 <span class="text">咨询学习</span>
  143.             </div>
  144.             <div class="l-box2">
  145.                 <span><a href="">器材</a></span>
  146.                 <span><a href="">大师</a></span>
  147.                 <span><a href="">学员</a></span>
  148.                 <span><a href="">实战</a></span>
  149.                 <span><a href="">大赛</a></span>
  150.                 <span><a href="">裤子</a></span>
  151.                 <span><a href="">影视</a></span>
  152.                 <span><a href="">其他</a></span>
  153.             </div>
  154.         </div>
  155.         <div class="link_tow">
  156.             <span class="iconfont icon-renwujincheng"></span>
  157.             <div class="l-box1">
  158.                 <span class="text">爱好姐妹</span>
  159.             </div>
  160.             <div class="l-box2">
  161.                 <span><a href="">器材</a></span>
  162.                 <span><a href="">大师</a></span>
  163.                 <span><a href="">学员</a></span>
  164.                 <span><a href="">实战</a></span>
  165.                 <span><a href="">大赛</a></span>
  166.                 <span><a href="">裤子</a></span>
  167.                 <span><a href="">影视</a></span>
  168.                 <span><a href="">其他</a></span>
  169.             </div>
  170.         </div>
  171.         <div class="link_thr">
  172.             <span class="iconfont icon-shiyongwendang"></span>
  173.             <div class="l-box1">
  174.                 <span class="text">咨询学习</span>
  175.             </div>
  176.             <div class="l-box2">
  177.                 <span><a href="">器材</a></span>
  178.                 <span><a href="">大师</a></span>
  179.                 <span><a href="">学员</a></span>
  180.                 <span><a href="">实战</a></span>
  181.                 <span><a href="">大赛</a></span>
  182.                 <span><a href="">裤子</a></span>
  183.                 <span><a href="">影视</a></span>
  184.                 <span><a href="">其他</a></span>
  185.             </div>
  186.         </div>
  187.         <div class="link_four">
  188.             <span class="iconfont icon-DOC"></span>
  189.             <div class="l-box1">
  190.                 <span class="text">编程美女</span>
  191.             </div>
  192.             <div class="l-box2">
  193.                 <span><a href="">器材</a></span>
  194.                 <span><a href="">大师</a></span>
  195.                 <span><a href="">学员</a></span>
  196.                 <span><a href="">实战</a></span>
  197.                 <span><a href="">大赛</a></span>
  198.                 <span><a href="">裤子</a></span>
  199.                 <span><a href="">影视</a></span>
  200.                 <span><a href="">其他</a></span>
  201.             </div>
  202.         </div>
  203.     </section>
  204.     <div style="position: relative;top: 20px;">
  205.         <img src="images/4.jpg" alt="">
  206.         <img src="images/banner-right.jpg" height="320" width="370"/>
  207.     </div>
  208. </header>
  209. </body>
  210. </html>

大部分用的POSITION定位标签完成，宽度没设置好，强行把图片宽度加大了，经过实战，对于相对定位与绝对定位有了一定的了解，还需要继续学习，充分使用。
然后请老师指正一下，在最后图片部分DIV标签，最开始用CLASS定义了一个类名，但是类选择器在STYLE里面不能使用定位功能，不知道是否写法有错误，最后是在属性栏里面用的定位标签。

上一条：CentOS修改主机名及时间下一条：HTML(12月18日)作业_Form表单
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多