HTML+CSS（2024.1.15）-优快云博客

本文链接：https://blog.youkuaiyun.com/2403_83436016/article/details/145168938

@charset 'utf-8';
/*这些元素都建议重新初始化*/
body,div,dl,dt,dd,ul,ol,li,tr,td,th,
h1,h2,h3,h4,h5,h6,hr,br,img,table,
input,form,a,p,textarea{
    padding:0;
    margin:0;
    font-family:Arial,'Microsoft YaHei','宋体';
}
/*去掉列表默认排列*/
ul,ol,li{
    list-style:none;
}
/*去掉底部横线*/
/*把a元素更改设置成块级元素，这个根据实际情况决定要不要*/
a{
    text-decoration:none;
    display:block;
}
/*img标签要清除border。*/
/*display设为block设置为块级元素，默认为display:inline;
存在下边线多出4px状况,所以一般设为block*/
img{
    border:0;
    display:block;
}
/*清除浮动破坏带来的塌陷问题*/
/*清除浮动的兼容IE*/
.clearfloat {
	zoom: 1;
}
.clearfloat:after {
	display:block;
	clear:both;
	content:"";
	visibility:hidden;
	height:0;
}

以上为/css/reset.css的代码，为CSS的重置文件。

<link rel="stylesheet" href="/css/reset.css">

运行结果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>飙升榜</title>
    <link rel="stylesheet" href="/css/reset.css">
    <style>
    .bang{
      width: 280px;
      height: 610px;
      background-color: #EEE;
      border-radius: 3px;
      box-shadow: 2px 2px 5px #999;
    }
    .bang li{
        width: 280px;
        height: 41px;
        line-height: 41px;
    }
    .bang li > span{
        margin-left: 35px;
    }
   .bang li.active{
         width: 280px;
         height: 160px;
    }
    .bang > li > img {
        width: 110px;
        margin-left: 25px;
        padding-top: 25px;
        float: left;
    }
    .img-left{
        width: 120px;
        height: 160px;
        float: right;
        margin-top:25px ;
    }
    .img-left > p{
        margin-top: 20px;
    }
    .img-left > p >img{
        width: 100px;
        height: 40px;
    }
    .even{
        background-color: #FFF;
    }
    .odd{
        background-color: #EEE;
    }
    .evenall{
        background-color: #FFF;
        text-align: right;
    }
    .evenall > a{
        color: black;
        padding-right: 20px;
    }
    </style>
</head>
<body>
    <ul class="bang">
        <li class="active">
            <img src="\img\biaoshengbang.jpg" alt="">
            <div class="img-left">
               <h3>飙升榜</h3>
               <p> 
                <img src="\img\1.png" alt="">
               </p>
            </div>
        </li>
        <li class="even"><span>1 不重逢</span></li>
        <li class="odd"><span>2 温暖的房子</span></li>
        <li class="even"><span>3 永不毁灭的火焰</span></li>
        <li class="odd"><span>4 怪诞心理学</span></li>
        <li class="even"><span>5 晨光里有你</span></li>
        <li class="odd"><span>6 Teeth</span></li>
        <li class="even"><span>7 你好</span></li>
        <li class="odd"><span>8 ALONE</span></li>
        <li class="even"><span>9 在我心里面</span></li>
        <li class="odd"><span>10 芦苇飞</span></li>
        <li class="evenall"><a href="#">查看全部></a></li>
    </ul>
</body>
</html>

运行结果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/reset.css">
    <title>底部</title>
    <style>
      .box{
        background-color: #EEE;
        width: 1400px;
        height: 180px;
      }
      .box > li{
        height: 150px;
        width: 200px;
        float: left;
      }
      .box > li > img{
        margin-left: 20px;
        margin-top: 20px;
        width: 120px;
        height: 120px;
      }
      .box > li > span{
        display: block;
        margin-top: 10px;
        margin-left: 20px;
        width: 120px;
        text-align: center;
      }
    </style>
</head>
<body>
    <ul class="box">
        <li>
         <img src="\img\y1.png" alt="">
         <span>音乐开放平台</span>
        </li>
        <li>
            <img src="\img\y2.png" alt="">
            <span>云村交易所</span>
        </li>
        <li>
            <img src="\img\y3.png" alt="">
            <span>X&nbsp;StudioAI歌手</span>
        </li>
        <li>
            <img src="\img\y4.png" alt="">
            <span>用户认证</span>
        </li>
        <li>
            <img src="\img\y5.png" alt="">
            <span>AI免费写歌</span>
        </li>
        <li>
            <img src="\img\y6.png" alt="">
            <span>云推歌</span>
        </li>
        <li>
            <img src="\img\y7.png" alt="">
            <span>赞赏</span>
        </li>
    </ul>
</body>
</html>

运行结果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索框</title>
    <!--(flex)弹性盒子-->  
    <style>
        .search{
            display: flex;       
            align-items: center;
            border: 1px solid #c93009;
            border-radius: 5px;
            overflow: hidden;
            width: 559.5px;
            margin: 20px auto;
        }
        .search-input {
            border: none;
            outline: none;
            padding: 10px 20px;
            font-size: 16px;
            width: 72%;
        }
        .search > img{
            width: auto;
            height: 20px;
            margin-right: 15px;
        }
        .search-button {
            background-color: #ff4d4f;
            color: white;
            border: none;
            cursor: pointer;
            padding: 7.5px 24.5px;
            font-size: 16px;
            border-radius: 8px 8px 8px 8px;
        }
        .search-button:hover {
            background-color: #ff7a7b;
        }
    </style>
</head>
<body>
    <div class="search">
        <input type="text" class="search-input" placeholder="输入关键词">
        <img src="\img\AIshexiangtou.png">
        <button class="search-button">搜索</button>
    </div>
</body>
</html>

运行结果：