HTML,CSS 制作

编程语言 2024-11-01 15:19:13 阅读次数: 0

一，

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Music Chart</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
    }

   .chart-container {
      max-width: 1800px;
      margin: 50px auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

   .chart-header {
      display: flex;
      align-items: center;
    }

   .chart-header.chart-header-left {
      display: flex;
      align-items: center;
      margin-right: 10px;
    }

   .chart-header img {
      margin-right: 10px;
    }

   .chart-header h2 {
      font-size: 28px;
      color: #333;
    }

   .chart-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid #ddd;
    }

   .chart-item:last-child {
      border-bottom: none;
    }

   .chart-position {
      font-size: 18px;
      color: #c41010;
      width: 30px;
      text-align: center;
    }

   .chart-position2 {
      font-size: 18px;
      color: rgb(124, 142, 168);
      width: 30px;
      text-align: center;
    }

   .chart-song-info {
      flex-grow: 1;
    }

   .chart-song-title {
      font-size: 18px;
      color: #333;
    }
    .chart-tail{
        font-size: 14px;
    }
     a{
       
        color: rgb(16, 16, 24);
     }
  </style>
</head>

<body>
  <div class="chart-container">
    <div class="chart-header">
      <div class="chart-header-left">
        <img src="../img/飙升榜.jpg" alt="">
      </div>
      <div>
        <h2><a href="飙升榜">飙升榜</a></h2>
        <img src="../img/音乐播放键.jpg" alt="">
        <img src="../img/创建文件夹.jpg" alt="">
      </div>
    </div>
  </div>
  <ul class="chart-list">
    <li class="chart-item">
      <span class="chart-position">1</span>
      <div class="chart-song-info">
        <p class="chart-song-title">APT.</p>
      </div>
    </li>
    <li class="chart-item">
      <span class="chart-position">2</span>
      <div class="chart-song-info">
        <p class="chart-song-title">我愿</p>
      </div>
    </li>
    <li class="chart-item">
      <span class="chart-position">3</span>
      <div class="chart-song-info">
        <p class="chart-song-title">我只能离开</p>
      </div>
    </li>
    <li class="chart-item">
      <span class="chart-position2">4</span>
      <div class="chart-song-info">
        <p class="chart-song-title">于是</p>
      </div>
    </li>
    <li class="chart-item">
      <span class="chart-position2">5</span>
      <div class="chart-song-info">
        <p class="chart-song-title">绽放</p>
      </div>
    </li>
    <li class="chart-item">
      <span class="chart-position2">6</span>
      <div class="chart-song-info">
        <p class="chart-song-title">孤独患者</p>
      </div>
    </li>
    <li class="chart-item">
      <span class="chart-position2">7</span>
      <div class="chart-song-info">
        <p class="chart-song-title">再等冬天(Memories)</p>
      </div>
    </li>
    <li class="chart-item">
      <span class="chart-position2">8</span>
      <div class="chart-song-info">
        <p class="chart-song-title">麦恩莉</p>
      </div>
    </li>
    <li class="chart-item">
      <span class="chart-position2">9</span>
      <div class="chart-song-info">
        <p class="chart-song-title">不懂她</p>
      </div>
    </li>
    <li class="chart-item">
      <span class="chart-position2">10</span>
      <div class="chart-song-info">
        <p class="chart-song-title">米奇GO</p>
    </div>
    </li>
      <li class="chart-tail">
        <div style="text-align:right;">
            <a href="#">查看全部></a>
          </div>
      </li>
  </ul>
</body>
</html>

二，

<!DOCTYPE html>
<head>
    <title></title>
    <link rel="stylesheet" href="css/index.css">
</head>
<style>
    * {
    margin: 0;
    padding: 0
}

.icons {
    display: flex;
    justify-content: space-between;
    padding: 10px 40px;
    background-color:rgb(242,242,242);
    /* background-color: rgb(83, 44, 160); */
}

.icons_items {
    display: flex;
    flex-direction: column;
    font-size: 20px;
    margin-top: 80px;
    margin-left: 5px;
    margin-right: 5px;
    width: 180px;
    height: 180px;
    font-weight:lighter;
    
}

.icons_items_imgs {
    border-radius: 10%;
    width: 180px;
    height: 120px;
    margin-bottom: 30px;
}

</style>
<body>
        </div>
        <div class="icons">
            <div class="icons_items">
                <img class="icons_items_imgs" src="../img/小图标1.jpg" alt="">
                <span>音乐开放平台</span>
            </div>
            <div class="icons_items">
                <img class="icons_items_imgs" src="../img/小图标2.jpg" alt="">
                <span>云村交易所</span>
            </div>
            <div class="icons_items">
                <img class="icons_items_imgs" src="../img/小图标3.jpg" alt="">
                <span>X Studio歌手</span>
            </div>
            <div class="icons_items">
                <img  class="icons_items_imgs" src="../img/小图标4.jpg" alt="">
                <span>用户认证</span>
            </div>
            <div class="icons_items">
                <img  class="icons_items_imgs" src="../img/小图标5.jpg" alt="">
                <span>AI免费写歌</span>
            </div>
            <div class="icons_items">
                <img  class="icons_items_imgs" src="../img/小图标6.jpg" alt="">
                <span>云推歌</span>
            </div>
            <div class="icons_items">
                <img  class="icons_items_imgs" src="../img/小图标7.jpg" alt="">
                <span>赞赏</span>
            </div>
        </div>
        </body>
</html>

三，

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>search</title>
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="../CSS/reset.css">
    <style>
        /* 通用列表样式清除 */
        ol,
        ul {
            list-style: none;
        }

        /* 搜索栏容器 */
       .search-wrapper {
            width: 965.6px;
            margin: 0 auto;
        }

       .search-bar {
            height: 47.2px;
            border: 2px solid #ff5000;
            background: #fff;
            border-radius: 8px;
            display: flex;
            align-items: center;
        }

        /* 搜索类别选择器 */
       .search-category-select {
            width: 58px;
            height: 50px;
            font-size: 14.5px;
            background: #fff;
            font-weight: 500;
            color: #11192d;
            font-family: Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, PingFang SC, Microsoft YaHei;
            border-radius: 12px;
            box-shadow: 0 24px 48px 0 rgba(0, 17, 51,.07);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        /* 下拉菜单 */
       .search-category-dropdown {
            background-color: #fff;
            color: #11192d;
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 1;
        }

       .search-category-select:hover+.search-category-dropdown {
            display: block;
        }

        /* 导航菜单 */
       .search-nav li {
            width: 50px;
            height: 40px;
            text-align: center;
            cursor: pointer;
            line-height: 42px;
        }

       .search-nav ol {
            margin-top: -2px;
            background-color: #fff;
            color: #11192d;
            display: none;
        }

       .search-nav li:hover ol {
            display: block;
        }

       .search-nav ol li:hover {
            color: #ff5000;
        }

        /* 搜索图标 */
       .search-icon {
            display: inline-block;
            margin-left: 10px;
            width: 18px;
            height: 18px;
            background-image: url(../img/下划线.jpg);
            background-size: cover;
        }

        /* 输入框容器 */
       .search-input-container {
            flex-grow: 1;
            position: relative;
        }

        /* 输入框 */
       .search-input {
            width: 100%;
            height: 40px;
            line-height: 40px;
            padding-left: 5px;
            border: none;
            outline: none;
        }

        /* 搜索图标按钮 */
       .search-icon-button {
            width: 28px;
            height: 28px;
            position: absolute;
            right: 360px;
            top: 21px;
            z-index: 1;
            background-image: url(../img/相机.jpg);
            background-size: 28px 28px;
            box-sizing: border-box;
            cursor: pointer;
        }

        /* 搜索按钮 */
       .search-button {
            line-height: 30px;
            font-size: 18px;
            font-weight: 500;
            color: #fff;
            background: #ff5000;
            height: 39px;
            width: 70px;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            z-index: 1;
            outline: none;
        }
    </style>
</head>

<body>
    <div class="search-wrapper">
        <div class="search-bar">
            <div class="search-category-select">
                <nav class="search-nav">
                    <ul>
                        <li>宝贝
                            <ol>
                                <li>天猫</li>
                                <li>店铺</li>
                            </ol>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="search-icon"></div>
            <div class="search-input-container">
                <input class="search-input" type="text" placeholder="|">
            </div>
            <div class="search-icon-button"></div>
            <button class="search-button" type="submit">搜索</button>
        </div>
    </div>
</body>

</html>

四，

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="../CSS/电子书.css">
</head>
<body>
<div class="hobbies">
    <div class="sel_Cir">
        <div class="cirShow">
            <ul class="cirBig">
                <li>
                    <span class="cirHead">
                        <a href="#"  target="_blank">
                            <img src="../img/图书1.jpg" title="无限超脱自遮天而始" alt="无限超脱自遮天而始" class="lazy"/>
                        </a>
                        <s class="fire"></s>
                    </span>
                    <h3><a href="#" title="无限超脱自遮天而始" target="_blank">无限超脱自遮天而始</a></h3>
                    <p class="little"><del>5起点币/千字</del></p>
                    <span class="attent">
                        <s class="fans"></s>
                        <img src="../img/免费阅读.jpg" alt="">
                        <s class="cards"></s>
                        <i></i>
                    </span>
                </li>
                <li>
                    <span class="cirHead">
                        <a href="#"  target="_blank">
                            <img src="../img/图书2.jpg" title="开局一把斩魂刀,打12345" alt="开局一把斩魂刀,打12345" class="lazy"/>
                        </a>
                        <s class="fire"></s>
                    </span>
                    <h3><a href="#" title="开局一把斩魂刀,打12345" target="_blank">开局一把斩魂刀,打12345</a></h3>
                    <p class="little"><del>5起点币/千字</del></p>
                    <span class="attent">
                        <s class="fans"></s>
                        <img src="../img/免费阅读.jpg" alt="">
                        <s class="cards"></s>
                        <i></i>
                    </span>
                </li>
                <li>
                    <span class="cirHead">
                        <a href="#"  target="_blank">
                            <img src="../img/图书3.jpg" title="大王请住手" alt="大王请住手" class="lazy"/>
                        </a>
                        <s class="fire"></s>
                    </span>
                    <h3><a href="#" title="大王请住手" target="_blank">大王请住手</a></h3>
                    <p class="little"><del>5起点币/千字</del></p>
                    <span class="attent">
                        <s class="fans"></s>
                        <img src="../img/免费阅读.jpg" alt="">
                        <s class="cards"></s>
                        <i></i>
                    </span>
                </li>
                <li>
                    <span class="cirHead">
                        <a href="#"  target="_blank">
                            <img src="../img/图书4.jpg" title="领主又红名了" alt="领主又红名了" class="lazy"/>
                        </a>
                        <s class="fire"></s>
                    </span>
                    <h3><a href="#" title="领主又红名了" target="_blank">领主又红名了</a></h3>
                    <p class="little"><del>5起点币/千字</del></p>
                    <span class="attent">
                        <s class="fans"></s>
                        <img src="../img/免费阅读.jpg" alt="">
                        <s class="cards"></s>
                        <i></i>
                    </span>
                </li>
                <li>
                    <span class="cirHead">
                        <a href="#"  target="_blank">
                            <img src="../img/图书5.jpg" title="蜀山:芝仙问道" alt="蜀山:芝仙问道" class="lazy"/>
                        </a>
                        <s class="fire"></s>
                    </span>
                    <h3><a href="#" title="蜀山:芝仙问道" target="_blank">蜀山:芝仙问道</a></h3>
                    <p class="little"><del>5起点币/千字</del></p>
                    <span class="attent">
                        <s class="fans"></s>
                        <img src="../img/免费阅读.jpg" alt="">
                        <s class="cards"></s>
                        <i></i>
                    </span>
                </li>
            </ul>
    </div>
</div>
</div>
</body>
</html>


* {margin: 0;padding: 0;list-style: none;}
body{ color: #483b38; background: #bec1bd; font-weight: normal; }
img{border: none;}
a{text-decoration: none; outline:none;  color: #4d1d12;}
a:hover{color: #ee8040;}

input{outline: none; border: none; background: none;font-family:"Microsoft Yahei", arial,sans-serif;}
h1,h2,h3,h4,h5,p{font-family:"Microsoft Yahei", arial,sans-serif; }
em,h2,h1,h3,i{font-style: normal; font-weight: normal;}
em,span{display: inline-block;}

.hobbies {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    perspective: 340px;
}
.sel_Cir{
    margin-left: 250px;
    margin-right: 265px;
    font:12px/20px "Microsoft Yahei", arial,sans-serif; 
}
.cirShow{
    background: rgb(252, 252, 241); 
    overflow: hidden;
}
.cirBig li{
    width: 204.2px;   
    height: 292px; 
    float: left; 
    text-align: center; 
    padding-top: 50px;
}
.cirBig .cirHead{
    width: 80px; 
    height: 100px; 
    border-radius: 0%; 
    position: relative;
}
.cirBig .cirHead img{
    width: 100%; 
    height: 100%; 
}
.cirBig li h3{
    font-size: 18px; 
    width: 242px; 
    height: 20px; 
    overflow: hidden; 
    margin: 16px auto 8px; 
    color: #212121; 
    white-space: nowrap;
     text-overflow: ellipsis;
    }
.cirBig li h3 a:hover{color: #f26552;}
.cirBig li .little{ 
    width:226px; 
    height: 32px; 
    line-height: 16px; 
    overflow: hidden; 
    margin: 0 auto; 
    text-overflow: ellipsis; 
    display: -webkit-box;  
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
}
.cirBig li .attent{
    position: relative;
    left: 10px;
    margin-top: 20px;
}

猜你喜欢

转载自blog.csdn.net/weixin_63529199/article/details/143203822
今日推荐
周排行
微信开放平台 公众号第三方平台开发 教程四 代公众号调用接口的SDK和demo
CentOS 7安装chrome
贪吃蛇案列---2.0可调速版
Ubuntu桌面只剩壁纸
Linxu wc
接口测试六（基本认证）
51 nod 1006 公共串（Lcs）
数据库设计知识点（思维导图）
ORACLE 11G DataGuard的一些高级管理案例研究
基础管理类命
每日归档
更多
2025-01-25(0)
2025-01-24(0)
2025-01-23(0)
2025-01-22(0)
2025-01-21(0)
2025-01-20(0)
2025-01-19(0)
2025-01-18(0)
2025-01-17(0)
2025-01-16(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022