作业二：游戏导航栏以及模仿某网站的三个页面-CSDN博客

本文链接：https://blog.csdn.net/2301_80203161/article/details/139603545

1.游戏导航栏

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏导航栏</title>
    <style>
        div{
            border: solid rgb(111, 111, 146);
            margin: auto;
            width: 1200px;
            height: 50px;
            background-color: rgb(111, 111, 146);
            box-shadow: 10px 10px 10px rgb(111, 111, 146);
            border-radius: 20px;
            text-align: center;
            line-height: 2;
            text-shadow: 10px 10px  10px white;

        }
        span{
            color: black;
            font-size: 25px;
            font-weight: normal;
            
        }
        span:hover{
            background-color: red
        }
    </style>
</head>
<body>
    <div>
        <span>游戏1&nbsp;&nbsp;&nbsp;</span>
        <span>游戏2&nbsp;&nbsp;&nbsp;</span>
        <span>游戏3&nbsp;&nbsp;&nbsp;</span>
        <span>游戏4&nbsp;&nbsp;&nbsp;</span>
        <span>游戏5&nbsp;&nbsp;&nbsp;</span>
        <span>游戏6&nbsp;&nbsp;&nbsp;</span>
        <span>游戏7&nbsp;&nbsp;&nbsp;</span>
        <span>游戏8&nbsp;&nbsp;&nbsp;</span>
        <span>游戏9&nbsp;&nbsp;&nbsp;</span>
    </div>
</body>
</html>

运行结果如下：

2.淘宝登录页

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝登陆页面</title>
    <style>
        *{
            margin: 0px;
        }
        /* div{
            border: 1px solid red;
        } */
        .A,.C{
            height: 100px;
        }
        .B{
            width: 600px;
            height: 500px;
            margin: auto;
            /* box-shadow: 10px 10px 10px rgb(233, 233, 243); */
            background-color: rgb(233, 233, 243);
            border-radius: 20px;
        }
        .B0{
            text-align: center;
            height: 15%;
        }
        .B1{
            text-align: center;
            height: 20%;
        }
        .B2{
            text-align: center;
            height:15%;
        }
        .B3{
            text-align: center;
            height:15%;
        }
        .B4{
            text-align: center;
            height:20%;
        }
        .B5{
            text-align: center;
            height:20%;
        }
        input{
            width: 300px;
            height: 40px;
            border-radius: 10px;
        } 
        button{
            width: 300px;
            height: 40px;
        }
    </style>
</head>
<body>
    <form action="https://www.taobao.com">
    <div class="A"><img src="./微信截图_taobaologo.png" alt=""></div>
    <div class="B">
        <div class="B0"></div>
        <div class="B1"><h1>密码登录|短信登陆</h1></div>
        <div class="B2">
            <p><input type="text" name="username" id="username" value="" placeholder="账户名/邮箱/手机号"></p>
        </div>
        <div class="B3">
            <p><input type="password" name="password" id="password" value="" placeholder="请输入登录密码"></p>
        </div>
        <div class="B4">
            <p><button type="submit">登录</button></p>
        </div>
        <div class="B5">
            <span>免费注册</span>
            <span>忘记账户名</span>
            <span>忘记密码</span>
        </div>
    </div>
    <div class="C"></div>
    </form>
</body>
</html>

运行结果如下：

3.淘宝主页

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页面</title>
    <style>
        .H{
            /* border: 1px solid red; */
            height: 100px;
        }
        .H1,H2{

            float: left;
        }
        .H2{
            /* text-align: center; */
            margin-top: 1%;
        }
        input{
            width: 700px;
            height: 40px;
        }
        button{
            width: 50px;
            height: 40px;
        }
        
        .box{
            margin-top: 5%;
            margin-left: 15%;
            display: grid;
            width: 1200px;
            height: 1500px;
            grid-template-columns: repeat(5,1fr);
            grid-template-rows: repeat(5,1fr);
            grid-gap: 10px;
        }
        .box > div{
            border: 1px solid red;
            width: 234px;
            height: 366px;
            
        }
    </style>
</head>
<body>
    <div class="H">
        <div class="H1"><img src="./微信截图_20240607162128.png" alt=""></div>
        <div class="H2">
            <input type="text">
            <button type="submit">搜索</button></p>
        </div>
    </div>
    <div class="box">
        <div><img src="./微信截图_zhuye.png" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>
        <div><img src="./微信截图_zhuye.png" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>
        <div><img src="./微信截图_zhuye.png" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>
        <div><img src="./微信截图_zhuye.png" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>
        <div><img src="./微信截图_zhuye.png" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>
        <div><img src="./微信截图_zhuye.png" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>
        <div><img src="./微信截图_zhuye.png" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>
        <div><img src="./微信截图_zhuye.png" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>
        <div><img src="./微信截图_zhuye.png" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>
        <div><img src="./微信截图_zhuye.png" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>
    </div>
</body>
</html>

运行结果如下：

4.淘宝商品页

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品页</title>
    <style>
        *{
            margin: 0px;
            background-color: rgb(225, 230, 234);
        }
        div{
            /* border: 1px solid red; */
        }
        
        .box{
            height: 100px;
            /* background-color: antiquewhite; */
        }
        .box1,.box2{
            text-align: center;
            height: 50px;
            float: left;
            margin-top: 20px
        }
        .box1{
            width: 10%;
        }
        .box2{
            width: 40%;
            margin-left: 300px;
        }
        input{
            height: 35px;
            width: 300px;
            margin-top: 5px;
            border-radius: 10px;
        }
        button{
            height: 35px;
            margin-top: 5px;
            border-radius: 10px;
            background-color: rgb(247, 127, 8);
        }
        .B1{
            height: 80px;
            /* background-color: aqua; */
            width: 1200px;
            margin-left: 280px;
            background-color: white;
        }
        .B2{
            background-color: white;
            height: 500px;
            /* background-color: aqua; */
            width: 1200px;
            margin-left: 280px;
        }
        .B11,.B12{
            background-color: white;
            text-align: center;
            height: 450px;
            float: left;
            margin-top: 20px
        }
        .B11{
            width: 38%;
            margin-left: 5px;
        }
        .B12{
            width: 58%;
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"><img src="https://img.alicdn.com/imgextra/i2/O1CN01a69z6z1hJklCkBqOU_!!6000000004257-2-tps-174-106.png" alt="" height="50px"></div>
        <div class="box2">
            <input type="text" placeholder="搜索宝贝">
            <button type="submit">搜索</button>
            <button type="submit">搜本店</button>
        </div>
    </div>
    <div class="B">
        <div class="B1"><img src="./微信截图_611.png" alt="" height="78px" width="1190px"></div>
        <div class="B2">
            <div class="B11"><img src="./微信截图_6112.png" alt="" height="470px" width="500px"></div>
            <div class="B12">
                <ul>
                    <li>痞帅飞行员设计感春秋季胖子新款外套2024爆款工装上衣牛仔夹克男</li>
                    <li>已售300+</li>
                    <li><img src="./微信截图_6113.png" alt=""></li>
                    <li>广东广州至
                        郴州市
                        宜章县
                        快递: 免运费
                        48小时内发货
                    </li>

                </ul>
                <p><button>领券购买</button>
                    <button>加入购物车</button></p>
            <div>
        </div>
    </div>
</body>
</html>

运行结果如下：