Web前端——网页页面设计

一.京东服务中心1.代码编写<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=devi

Aa hui

446人浏览 · 2025-01-13 20:47:28

Aa hui · 2025-01-13 20:47:28 发布

一.京东服务中心

1.代码编写

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

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

    <style>

        .box {
            width: 300px;

            height: 400px;

            background-color: #F7F8FC;

            border-radius: 10px;

            text-align: center;

        }

        .row {
            width: 300px;

            height: 100px;

            /* border: 1px solid red; */

        }

        .row .col {
            /* border: 1px solid red; */

            width: 80px;

            height: 80px;

            float: left;

            margin: 10px;

        }

        .col > img {
            width: 55px;

            margin-left: 12px;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="row">

            <div class="col">

                <img src="./img/dou.png" alt="">

                <p>京豆</p>

            </div>

            <div class="col">

                <img src="./img/phone.png" alt="">

                <p>充值中心</p>

            </div>

            <div class="col">

                <img src="./img/jie.png" alt="">

                <p>金条借款</p>

            </div>

        </div>

        <div class="row">

            <div class="col">

                <img src="./img/ka.png" alt="">

                <p>礼品卡</p>

            </div>

            <div class="col">

                <img src="img/yisheng.png" alt="">

                <p>问医生</p>

            </div>

            <div class="col">

                <img src="./img/butie.png" alt="">

                <p>国家补贴</p>

            </div>

        </div>

        <div class="row">

            <div class="col">

                <img src="./img/ka.png" alt="">

                <p>信用卡</p>

            </div>

            <div class="col">

                <img src="./img/aihuishou.png" alt="">

                <p>爱回收</p>

            </div>

            <div class="col">

                <img src="./img/youxi.png" alt="">

                <p>游戏</p>

            </div>

        </div>

        <div class="row">

            <div class="col">

                <img src="./img/jiayouka.png" alt="">

                <p>加油卡</p>

            </div>

            <div class="col">

                <img src="./img/qiye.png" alt="">

                <p>企业计划购</p>

            </div>

            <div class="col">

                <img src="./img/yun.png" alt="">

                <p>云建站</p>

            </div>

        </div>

    </div>

</body>

</html>

2.运行结果

二，音乐飙升榜

1.代码编写

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

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

    <style>

        .bang {
            width: 280px;

            height: 620px;

            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: 30px;

        }

        .bang li.active {
            width: 280px;

            height: 170px;

        }

        .bang > li > img {
            width: 110px;

            margin-left: 25px;

            padding-top: 25px;

            float: left;

        }

        .img-left {
            width: 120px;

            height: 120px;

            float: right;

            margin-top: 25px;

        }
        .img-left > p {
            width: 120px;

            height: 50px;

            border: 1px solid red;

            margin-top:20px ;
        }
        .img-left > p >img {
            float: left;
        }

        .even {
            background-color: #EEE;

        }

        .odd {
            background-color: #DDD;

        }

        .all {
            text-align: right;

        }

        .all > a{
            color: #222;

        }

    </style>

</head>

<body>

    <ul class="bang">

        <li class="active even">

            <img src="./img/飙升榜.png" alt="">

            <div class="img-left">

                <h3>飙升榜</h3>

                <p>

                    <img src="./img/保存.jpg" alt="">

                    <img src="./img/播放.jpg" alt="">

                </p>

            </div>

           

        </li>

        <li class="odd">

            <span>1 不重逢</span>        

        </li>

        <li class="even">

            <span>2 温暖的房子</span>        

        </li>

        <li class="odd">

            <span>3 永不熄灭的火焰</span>  

        </li>

        <li class="even">

            <span>4 怪诞心理学</span>  

        </li>

        <li class="odd">

            <span>5 忒修斯的船</span>  

        </li>

        <li class="even">

            <span>6 晨光里有你</span>  

        </li>

        <li class="odd">

            <span>7 No Cap（Phonk口水）</span>  

        </li>

        <li class="even">

            <span>8 Fire!</span>  

        </li>

        <li class="odd">

            <span>9 Teeth</span>  

        </li>

        <li class="even">

            <span>10 你是旷野 是山间的风</span>  

        </li>

        <li class="odd all">

            <a href="#">查看全部></a>

        </li>

    </ul>

</body>

</html>

2.运行结果

三，网易云服务

1.代码编写

<!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="styles.css">

    <style>

        .container {
    display: flex;

    justify-content: space-around;

    align-items: center;

    background-color: #f0f0f0;

    padding: 20px;

}

.item {
    display: flex;

    flex-direction: column;

    align-items: center;

}

.icon {
    width: 50px;

    height: 50px;

    border-radius: 50%;

    background-color: pink;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 10px;

}

.icon.music:before {
    content: "\f001";

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

}

.icon.exchange:before {
    content: "\f15c";

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

}

.icon.studio:before {
    content: "\f121";

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

}

.icon.auth:before {
    content: "\f023";

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

}

.icon.ai:before {
    content: "\f5ff";

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

}

.icon.push:before {
    content: "\f0e7";

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

}

.icon.reward:before {
    content: "\f004";

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

}

    </style>

</head>

<body>

    <div class="container">

        <div class="item">

            <img src="./img/音乐播放平台.png" alt="">

            <span>音乐开放平台</span>

        </div>

        <div class="item">

            <img src="./img/云村交易.png" alt="">

            <span>云村交易所</span>

        </div>

        <div class="item">

            <img src="./img/歌手.png" alt="">

            <span>X StudioAI歌手</span>

        </div>

        <div class="item">

            <img src="./img/用户认证.png" alt="">

            <span>用户认证</span>

        </div>

        <div class="item">

            <img src="./img/写歌1.png" alt="">

            <span>AI 免费写歌</span>

        </div>

        <div class="item">

            <img src="./img/云推歌.png" alt="">

            <span>云推歌</span>

        </div>

        <div class="item">

            <img src="./img/赞赏.png" alt="">

            <span>赞赏</span>

        </div>

    </div>

</body>

</html>

2.运行结果

技术共进，成长同行——讯飞AI开发者社区

更多推荐

AI智能体第4期——深入了解人工智能智能体的不同类型：反应式、规划式等

讯飞AI开发者社区

人工智能和数据科学就业市场：到底发生了什么？

讯飞AI开发者社区

深度解读 RTX 4090：算力爆发下的应用场景与未来趋势

随着人工智能、大数据与高性能计算的需求不断增长，硬件设备的算力已经成为推动整个科技行业进步的关键引擎。近年来，NVIDIA 的显卡在 AI、渲染、科研和游戏领域都有着举足轻重的地位。其中，作为 40 系列的旗舰产品，不仅刷新了游戏性能的天花板，更在算力层面展现出前所未有的强大能力。本文将从多个角度深入解析 RTX 4090 的算力应用与价值。