html-页面设计（一） 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style type="text/css">
    a{
    color:#4F94CD;
  }
  a:hover{
    color: #DCB5FF;
  }
        li{
        width: 100px;
        font-weight:bold;
        margin-top: 0px;
        font-size: 20px;
        line-height:10px;
        float:left;
        color: #6495ED;
    }
    li:hover{
        font-size: 30px;
    }
    .shang{
        border-radius:30px;
        height: 150px;
        border:0px solid #508ABF;
        margin-bottom: 10px;
      
    }
    .zuo{
        width: 300px;
        height: 553px;
        border-radius:30px;
        border:10px solid #ACCBE2;
        display: inline-block;
        margin-top:5px;       
         background: url(http://m.qpic.cn/psc?/V50ZGk6j3FLyTQ0gd0jT1j8Gz207fD5g/TmEUgtj9EK6.7V8ajmQrENxvlE2QSm1urOXVAXiqCsWe03O*21GDkXBCjw8FEdyawAVy6fe7FMRdaWix9KJ1W6qGCKoraN5JZDUOiO9Vghc!/b&bo=HAKwAwAAAAABF50!&rf=viewer_4) no-repeat;
           background-size:cover;
    }
    .you{
        width: 1002.5px;
        height: 550px;
        border-radius:30px;
        border:10px solid #ACCBE2;
        display: inline-block;
         margin-top:5px;   
          background: url(http://m.qpic.cn/psc?/V50ZGk6j3FLyTQ0gd0jT1j8Gz207fD5g/TmEUgtj9EK6.7V8ajmQrEOx9vnbFtRkKZT6Iy59vY*on*kr06T423UoVjcnX1K*1Y8W0zcz6xRJeVJSML4.CHZLKT8Cpbmp0i5z4L*kmbPg!/b&bo=gAc4BAAAAAABF4s!&rf=viewer_4) no-repeat;
           background-size:cover;
    }
 .zoomImage, .zoomImage2{
      width: 100%;
      height: 0;
      padding-top: 100%;
      overflow: hidden;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-background-size: cover;
      -moz-background-size: cover;
    }
    .zoomImage2 {
      padding-top: 60%;
    }
  .shang li{
    width: 100px;
    font-weight:bold;
    margin-top: 0px;
    font-size: 20px;
    line-height: 24px;
    float:left;
    color: #CAE1FF;
    list-style-type:none;
  }
  .shang li:hover{
    font-size: 30px;
  }
   .zhuce{
    width: 400px;
    height: 300px;
    margin-top: 140px;
  }
  .zhuce li{
    width: 200px;
    font-weight:bold;
    font-size: 20px;
    line-height: 30px;
    color: #CAE1FF;
    list-style-type:none;
  }
  .boke{
    width: 300px;
    height: 300px;
    margin-top: 140px;
     margin-left: 40px;
  }
  .boke li{
    width: 200px;
    font-weight:bold;
    font-size: 20px;
    line-height: 50px;
    color: #4F94CD;
    list-style-type:none;
  }
    </style>
</head>
<body>

   <div class="shang">
    <ul>
    <li><a href="https://www.cnblogs.com/">博客园</a></li>
    <li><a href="https://www.cnblogs.com/qiuyutingyyds/">首页</a></li>
    <li ><a href="https://i.cnblogs.com/posts/edit">新随笔</a></li>
    <li><a href="https://msg.cnblogs.com/send/%E4%BB%8A%E5%A4%A9%E5%8F%88%E5%8F%8C%E5%8F%92%E5%8F%95%E5%9C%A8%E6%95%B2%E4%BB%A3%E7%A0%81">联系</a></li>
    <li><a href="https://www.cnblogs.com/qiuyutingyyds/">订阅</a></li>
    <li><a href="https://i.cnblogs.com/posts">管理</a></li>
  </ul>
    <div class="zoomImage2" style="background-image: url(http://m.qpic.cn/psc?/V50ZGk6j3FLyTQ0gd0jT1j8Gz207fD5g/TmEUgtj9EK6.7V8ajmQrEGR0Oy2PuDpwLo8lX992zrAqIwbq*q4nkwpjni*sE0UdcjT1GTWWHhy9ubukBEfm9417zr1t*CCCygPROftPzEI!/b&bo=GQJ.AgAAAAABF1c!&rf=viewer_4">
    </div>

    </div>
    <div class="zuo">
    <div class="zhuce">
    <ul>
    <li>公告</li>
    <li>昵称：大佬          </li>
    <li>园龄：70年            </li>
    <li>粉丝：1亿         </li>
    <li>关注：0           </li>
    <li><a href="file:///C:/Users/%E9%82%B1/Desktop/PHP/%E4%BD%9C%E4%B8%9A/%E9%82%B1%E9%9B%A8%E5%A9%B7.html">编辑</a></li>
    </ul>
    </div>
  </div>
    <div class="you">
     <div class="boke">
    <ul>
    <li></li>
    <li>Hanyu Yuzuru </li>
  <li><a href="https://www.bilibili.com/video/BV1js411R7MY?p=1&share_medium=iphone&share_plat=ios&share_session_id=DC61AA7F-62EF-44F8-B925-9FCF29DEB5C0&share_source=QQ&share_tag=s_i&timestamp=1647770074&unique_k=ZHP8tQH">《花になる》</a></li>
  <li><a href="https://www.bilibili.com/video/BV14W411X7Wt?p=2&share_medium=iphone&share_plat=ios&share_session_id=97B8E70B-BD01-4135-B0A9-EF2FE1627DBD&share_source=QQ&share_tag=s_i&timestamp=1647770145&unique_k=8uItvkn">《花が咲く》</a></li>
  <li><a href="https://www.bilibili.com/video/BV1R34y1C71D?p=1&share_medium=iphone&share_plat=ios&share_session_id=A29B0A96-D9EC-4F73-9593-6BA9874219C8&share_source=QQ&share_tag=s_i&timestamp=1647770109&unique_k=8LoXq5B">《春よ来い》</a></li>
    </ul>
   
    </div>
        </div><!--end: footer -->

</div><!--end: home 自定义的最大容器 -->
    <div id="page_end_html">
 <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/elkyo/APlayer.min.css">
  <div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="7341682159" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="#2D8CF0"></div>
  <script src="https://blog-static.cnblogs.com/files/elkyo/APlayer.min.js"></script>
  <script src="https://blog-static.cnblogs.com/files/elkyo/Meting.min.js"></script>

    </div>
    </div>

</body>
</html>

 

posted @ 2022-03-21 20:49  今天又双叒叕在敲代码  阅读(33)  评论(0)  编辑  收藏  举报