3.25-3.16作业

最新推荐文章于 2025-08-05 17:55:38 发布

山支岐010

最新推荐文章于 2025-08-05 17:55:38 发布

阅读量1.8k

点赞数 42

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/2401_89730214/article/details/146297836

3.25-3.16作业

01-网易云导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    .max{
      width: 100%;
      height: 80px;
      background-color: #242424;
    }
    .logo img{
       width: 40px;
       hight:40px;
      margin-top: 20px;
      margin-left: 100px;
      border-radius: 50%;
      float: left;
    }
    span{
      color: white;
      float: left;
      font-size: 40px;
      margin-top: 18px;
      margin-left: 5px;
    }
    .top{
      margin-left:30px;
      float: left;
    }
    li{
      color: #ccc;
      float: left;
      list-style: none;
      font-size: 20px;
      width: 100px;
      height: 80px;
      line-height: 80px;
      text-align: center;
    }
    li:hover{
      background-color:black;
    }
    input{
        width: 260px;
        height: 40px;
        margin-left: 180px;
        margin-top: 20px;
        border-radius: 30px;
        font-size: 18px;
        float: left;
    }
    .zx{
        width: 130px;
        height: 40px;
        border: 1px solid gainsboro;
        font-size: 18px;
        float: left;
        color: white;
        margin-left: 50px;
        margin-top: 20px;
        border-radius: 30px;
        line-height: 40px;
        text-align: center;
    }
    .dl{
        width: 50px;
        height: 40px;
        font-size: 18px;
        color: darkgray;
       float: left;
        margin-top: 30px;
        margin-left: 50px;
    }
  </style>
</head>
<body>
 <div class="max">
   <div class="logo"><img src="/image/wyy.webp" alt=""></div>
   <span>网易云音乐</span>
   <div class="top">
     <ul>
       <li>发现音乐</li>
       <li>我的音乐</li>
       <li>关注</li>
       <li>商城</li>
       <li>音乐人</li>
       <li>下载客户端</li>
     </ul>
   </div>
   <div class="sousuo">
       <form>
       <input type="text"  placeholder="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;音乐/视频/电台/用户">
       </form>
   </div>
     <div class="zx">
         创作者中心
     </div>
     <div class="dl">登录</div>
 </div>
</body>
</html>

在这里插入图片描述

02-作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;

        }
        .one{
            width: 180px;
            height: 50px;
            font-size: 25px;
            color: cornflowerblue;
            background-color: aliceblue;
            border-radius: 10px;
            box-shadow: 5px 5px 5px 4px;
            margin-top: 100px;
            margin-left: 100px;
            float: left;
            text-align: center;
            line-height: 50px;
        }
        .two{
            width: 180px;
            height: 50px;
            font-size: 25px;
            color: aliceblue;
            background-color:dodgerblue;
            border-radius: 10px;
            box-shadow: 5px 5px 5px 3px lightsteelblue;
            margin-left: 50px;
            margin-top: 100px;
            float: left;
            text-align: center;
            line-height: 50px;
        }
        .three{
            width: 180px;
            height: 50px;
            font-size: 25px;
            color: aliceblue;
            background-color:mediumseagreen ;
            border-radius: 10px;
            box-shadow: 5px 5px 5px 3px lightsteelblue;
            margin-left: 50px;
            margin-top: 100px;
            float: left;
            text-align: center;
            line-height: 50px;
        }
        .four{
            width: 100px;
            height: 50px;
            font-size: 25px;
            float: left;
            text-align: center;
            line-height: 50px;
            margin-left: 50px;
            margin-top: 100px;
            color: white;
            background-color: darkgray;
            border-radius: 10px;
        }
        .five{
            width: 180px;
            height: 50px;
            font-size: 25px;
            color: aliceblue;
            background-color:orange ;
            border-radius: 10px;
            box-shadow: 5px 5px 5px 3px lightsteelblue;
            margin-left: 50px;
            margin-top: 100px;
            float: left;
            text-align: center;
            line-height: 50px;
        }
        .six{
            width: 140px;
            height: 50px;
            font-size: 25px;
            color: aliceblue;
            background-color:palevioletred;
            border-radius: 10px;
            box-shadow: 5px 5px 5px 3px lightsteelblue;
            margin-left: 50px;
            margin-top: 100px;
            float: left;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
<ul>
    <li class="one">Default</li>
        <li class="two">Primary</li>
        <li class="three">Success</li>
        <li class="four">Info</li>
        <li class="five">Warning</li>
        <li class="six">Danger</li>
</ul>

</body>
</html>

在这里插入图片描述