css&html第三次大作业（仿淘宝页面）

打铁的小羊

于 2024-06-20 18:07:52 发布

阅读量188

点赞数 1

文章标签： css html 课程设计

本文链接：https://blog.csdn.net/2301_79792510/article/details/139839705

版权

页面一登录页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面一   登陆页面</title>
    <style>
         *{
            margin: 0%;
        
        }
        /* div{
            border: 1px solid black;
        } */
 

        .box2{
            width: 600px;
            height: 400px;
          background-color: antiquewhite;
            margin-left: 30%;
            margin-top: 10%;
            border-radius: 20px;
        }

        .b21{
            height: 20%;
            font-size: 30px;
            text-align: center
        }
        
        
        .b22{
            height: 70%;
            font-size: 50px;
            text-align: center;

        }
        
        .b23{
            height: 10%;
            text-align: center;

        }
        span{
            text-align: center;
            font-size: 20px;

        }
    </style>
</head>
<body>
    <form action="https://www.taobao.com/"><div class="box1"> <a href="https://www.taobao.com/"><img src="./淘宝logo2.png" alt=""></a></div>
        <div class="box2">
            <div class="b21">密码登录|短信登录</div>
            <div class="b22">
                <p><input type="text" placeholder="账号名/邮箱/手机号" style="height: 50px; width:400px; border-radius: 10px"></p>
                <p><input type="password" placeholder="请输入登录密码"  style="height: 50px; width:400px;border-radius: 10px" ></p>
                <p><button type="submit" style="height: 50px;width: 400px;border-radius: 10px;" >登录</button></p>
             </div>
            <div class="b23">
                <span>免费注册</span>
                <span>忘记账户名</span>
                <span>忘记密码</span>
            </div>
        </div>
    </form>
</body>
</html>

页面二淘宝主页（部分）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面二   淘宝主页</title>

    <style>
        .box{
            display: grid;
            height: 1500px;
            grid-template-columns:repeat(5,1fr) ;
            grid-template-rows:repeat(13,1fr) ;
            grid-gap: 10px;
            /* text-align: center; */
            font-size: 25px;
            
        }
          /* 导航栏 */
        .box>:nth-child(1){
            grid-column: 1/6;
            background-color: rgb(247, 225, 225);
            position: relative;
            text-align: center;
           
            
        }
        /* 分类索引 */
        .box>:nth-child(2){
            grid-row: 2/5;
            background-color: rgb(247, 225, 225);
        }
        .box>:nth-child(3){
            grid-column: 2/6;
            background-color: rgb(247, 225, 225);
            height: 100px;
        }
        .box>:nth-child(4){
            grid-row: 3/5;
            background-color:rgb(247, 225, 225);
            height: 400px;
        }
        .box>:nth-child(5){
            grid-column: 3/4;
            background-color: rgb(247, 225, 225);
        }
        .box>:nth-child(6){
            
            background-color: rgb(247, 225, 225);
        }
        .box>:nth-child(7){
            
            background-color: rgb(247, 225, 225);
        }
        .box>:nth-child(8){
            
            background-color: rgb(247, 225, 225);
        }
        .box>:nth-child(9){
            
            background-color: rgb(247, 225, 225);
        }
        .box>:nth-child(10){
            
            background-color: rgb(247, 225, 225);
        }
        .box>:nth-child(11){
            grid-column: 1/6;
            background-color: rgb(247, 225, 225);
        }
        .box>:nth-child(12){
            grid-column: 1/2;
            grid-row: 6/10;
            background-color: rgb(247, 225, 225);
        }
        .box>:nth-child(13){
            grid-column: 2/3;
            grid-row: 6/10;
            background-color: rgb(247, 225, 225);
        }
        .box>:nth-child(14){
            grid-column: 3/4;
            grid-row: 6/10;
            background-color: rgb(247, 225, 225);
        }
        .box>:nth-child(15){
            grid-column: 4/5;
            grid-row: 6/10;
            background-color: rgb(247, 225, 225);
        } 
        .box>:nth-child(16){
            grid-column: 5/6;
            grid-row: 6/10;
            background-color: rgb(247, 225, 225);
        }
         .box>:nth-child(17){
            grid-column: 1/2;
            grid-row: 10/14;
            background-color: rgb(247, 225, 225);
        } 
        .box>:nth-child(18){
            grid-column:2/3;
            grid-row: 10/14;
            background-color: rgb(247, 225, 225);
        }
         .box>:nth-child(19){
            grid-column: 3/4;
            grid-row: 10/14;
            background-color: rgb(247, 225, 225);
        }
        .box>:nth-child(20){
            grid-column: 4/5;
            grid-row: 10/14;
            background-color: rgb(247, 225, 225);
        }
        .box>:nth-child(21){
            grid-column: 5/6;
            grid-row: 10/14;
            background-color: rgb(247, 225, 225);
        }
        




        p:hover{
            color: red;
        }
        .c2:hover{color: rgb(38, 239, 11);}
        
        div{
            border-radius: 15px;
           
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 搜索栏 -->
    <div>
        
        <input type="text" placeholder="请输入搜索内容 " style="width: 900px; height: 60px; font-size: large; margin-top: 20px; border-radius: 15px;">
        <button style="width: 100px; height: 60px; font-size: large; margin-top: 20px; color: red;">搜索</button><br>
        <p style="font-size: large;">大额神券 &nbsp; &nbsp;  &nbsp;  苹果惊喜券 &nbsp;  &nbsp;  &nbsp;  买一亨十  &nbsp;  &nbsp;  &nbsp; 家电爆款  &nbsp;  &nbsp;  &nbsp; 3c数码优惠  &nbsp;  &nbsp;  &nbsp; 女装 &nbsp;  &nbsp;  &nbsp;  美味狂欢 &nbsp;  &nbsp;  &nbsp;  货架</p>
    </div>
    <div class="c2">
        <img src="./冰淇淋.png" width="35px" height="35px">电脑 / 办公 /文具<br>
        <img src="./饼干.png" width="35px" height="35px">工艺 / 商业 /定制<br>
        <img src="./蛋炒饭.png" width="35px" height="35px"> 家电 / 手机 / 数码<br>
        <img src="./烤鸡.png" width="35px" height="35px">家居 / 家具/ 家装<br>
        <img src="./牛奶.png" width="35px" height="35px"> 母婴 / 玩具/ 动漫<br>
        <img src="./蛋卷.png" width="35px" height="35px"> 美妆 /个护 / 清洁<br>
        <img src="./棒棒糖.png" width="35px" height="35px">食品 / 饮料/ 酒水<br>
        <img src="./果汁.png" width="35px" height="35px"> 汽车 / 用品 /用品<br>
        <img src="./冰淇淋.png" width="35px" height="35px">运动 / 户外 / 运动<br>
        <img src="./冰淇淋.png" width="35px" height="35px">运动 / 户外 / 运动<br>
        <img src="./冰淇淋.png" width="35px" height="35px">运动 / 户外 / 运动<br>
        <img src="./冰淇淋.png" width="35px" height="35px">运动 / 户外 / 运动<br>
    </div>
    <div> <pre style="font-size: 30px; color: rgb(250, 95, 12); text-align: center; ">天猫 | 淘宝直播 | 1688严选 | 司法拍卖 | 天猫超市 | 聚划算</pre></div>
    <div><img src="./下单商品.png" width="300px" height="400px"></div>
    <div> <img src="./商品3.png" ></div>
    <div> <img src="./商品3.png" ></div>
    <div style="text-align: center;"> <img src="./星星.png" width="30px"height="30px" > <br>宝贝收藏
        <br>
        <br> 
        <img src="./店铺.png" width="30px"height="30px" ><br>买过的店<br>
    </div>
    <div><img src="./商品3.png" ></div>
    <div><img src="./商品3.png" ></div>
    <div><img src="./更多.png" ></div>
    <div style="text-align: center;"><img src="./冰淇淋.png" width="35px" height="35px" >
        猜你喜欢
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        潮店数码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        服饰时尚&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        运动户外&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        精致护理</div>

        
        <div> <img src="./商品.png" width="310px" height="360px"></div>
        <div> <img src="./商品.png" width="310px" height="360px"></div>
        <div> <img src="./商品.png" width="310px" height="360px"></div>
        <div> <img src="./商品.png" width="310px" height="360px"></div>
        <div> <img src="./商品.png" width="310px" height="360px"></div>
        <div> <img src="./商品.png" width="310px" height="360px"></div>
        <div> <img src="./商品.png" width="310px" height="360px"></div>
        <div> <img src="./商品.png" width="310px" height="360px"></div>
        <div> <img src="./商品.png" width="310px" height="360px"></div>
        <div> <img src="./商品.png" width="310px" height="360px"></div>
        
        
    </div>
</body>
</html>

页面三商品详细页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面三  商品详细页</title>
</head>
<style>
    div{
        /* border: 1px solid red; */
 
        border-radius: 15px;
        
    }
    .c1{
        height: 100px;
        
    }
    .c2{
        height: 100px;
    }
    .c3{
        height: 600px;
    }
    .c3>div{
         float: left;
    }
    p{
        
        font-size: 50px;
        color: red;
        text-align: center;
    }

</style>
</head>
<body>
<div class="box">
    <div class="c1"><img src="./天猫.png" ></div>
    <div class="c2"><img src="./商品2.png" ></div>
    <div class="c3">
    <div><img src="./商品.png" width="400px" height="600px"></div>   
    <div>
        <h1 style="text-align: center;">湖北特产中华老字号黄...</h1><br>
        <p>￥12.8</p><br>
        <p style="font-size: large;color: black;">配送:
            湖北黄石 至 长沙市望城区快递: 免运费 48小时内发货</p>
            <button style="height: 100px; width: 300px;font-size: 50px;background-color: red;border-top-left-radius: 15px;border-bottom-left-radius: 15px; ">马上抢</button>
            <button style="height: 100px; width: 300px;font-size: 50px;background-color: orange;border-top-right-radius: 15px;border-bottom-right-radius: 15px; ">加入购物车</button>
            <span style="font-size: 50px;" ><img src="./星星.png" width="50px" height="50px" >收藏</span>

    </div>   
    </div>
</div>
</body>
</html>