HTML作业3

最新推荐文章于 2024-07-23 23:43:36 发布

瑞清ヾ(≧▽≦*)o

最新推荐文章于 2024-07-23 23:43:36 发布

阅读量67

点赞数 1

文章标签： html 前端 css

本文链接：https://blog.csdn.net/2301_80829238/article/details/140634833

版权

仿写淘宝官网

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>
        *{
            margin: 0;
            padding: 0;
        }

        ul li{
            list-style-type: none;
        }

        /* 首页nav */
        .a{
            height: 35px;
            width: 100%;
            background-color: white;
        }

        /* nav盒子 */
        .a1{
            width: 1190px;
            height: 100%;
            margin: auto;
            background-color: gainsboro;
        }

        /* 主体内容 */
        .c{
            width: 100%;
            height: auto;
        }

        /* 主体内容盒子 */
        #b{
            width: 1190px;
            height: auto;
            margin: auto;
        }

        .b1{
            width: 100%;
            height: 150px;
        }

        .b2{
            display: flex;
            width: 1190px;
            height: 100%;
            margin: auto;
            background-color: gainsboro;
        }

        .b3{
            width: 143px;
            height: 58px;
            text-align: center;
        }

        /* 搜索框 */
        .s{
            width: 627px;
            height: 65px;
            border: 5px solid rgb(243, 85, 12);
            background-color: rgb(250, 249, 249);
        }
        input[type='text']{
            width: 550px;
            height: 63px;
        }
        input[type='submit']{
            width: 60px;
            height: 60px;
            background-color: rgb(252, 179, 142);
        }

        /* 所有商品内容 */
        .n{
            width: 100%;
            height: auto;
            background-color: white;
            margin-bottom: 30px;
            display: inline;
        }

        .n1{
            border-top: 40px solid white;
            background-color: rgb(237, 231, 231);
            width: 250px;
            height: 490px;
            float: left;
        }

        .n2{
            border-top: 40px solid white;
            background-color: white;
        }

    </style>
</head>
<body>
    <nav class="a">
        <div class="a1">
            https://www.taobao.com/
        </div>
    </nav>
    <section class="c">
        <div id="b">
            <header class="b1">
                <div class="b2">
                    <a href="https://www.taobao.com/">
                        <img src="./head.png" height="100px" width="200px">
                    </a>
                    <form action="" class="s">
                        <input type="text" class="text" placeholder="毛绒玩具">
                        <input type="submit" class="submit" value="搜索">
                    </form>
                </div>
            </header>
            <div class="n">
                <div class="n1">
                    <ul>
                        <li><b>分类</b></li><br>
                        <li>电脑 / 办公 / 文具</li><br>
                        <li>工业品 / 商业 / 定制</li><br>
                        <li>家电 / 手机 / 数码</li><br>
                        <li>家具 / 家装 / 家居</li><br>
                        <li>女装 / 男装 / 内衣</li><br>
                        <li>女鞋 / 男鞋 / 运动</li><br>
                        <li>汽车 / 珠宝 / 箱包</li><br>
                        <li>食品 / 生鲜 / 健康</li><br>
                        <li>母婴 / 童装 / 潮玩</li><br>
                        <li>美妆 / 洗护 / 宠物</li><br>
                        <li>娱乐 / 图书 / 鲜花</li><br>
                    </ul>
                </div>
                <div class="n2"><img src="./n2.png" height="65%" width="75%"></div>
            </div>
        </div>
    </section>

</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>
        body {
            font-family: Arial, sans-serif;
        }

        .header {
            background-color: rgb(237, 145, 16);
            color: white;
            padding: 10px;
            text-align: center;
            border-radius: 5px 5px 0 0;
        }
 
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            padding: 20px;
        }
 
        .product {
            width: 30%;
            margin: 10px;
            border: 1px solid gainsboro;
            border-radius: 5px;
            overflow: hidden;
            position: relative;
            cursor: pointer;
        }
 
        .product img { 
            width: 100%;  
            height: auto;
        }
            
    </style>

    <script>
        function showProductId(productId) {
            alert("商品ID: " + productId);
        }
    </script>
</head>
<body>
    <div class="header">淘宝</div>
    <div class="container">
        <div class="product">
            <img src="./1.png" alt="商品图片">
        </div>
    
        <div class="product">
            <img src="./2.png" alt="商品图片">
        </div>
       
        <div class="product">
            <img src="./3.png" alt="商品图片">
        </div>
        
        <div class="product">
            <img src="./4.png" alt="商品图片">
        </div>
        
        <div class="product">
            <img src="./5.png" alt="商品图片">
        </div>

        <div class="product">
            <img src="./6.png" alt="商品图片">
    </div>

</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>
        *{
            margin: 0;
            padding: 0;
        }

        .div{
            width: 100%;
            height: 800px;
            background-image: url(./hui.png);
            background-size: 100%;
        }

        .login{
            margin-top: 10px;
		    margin-left: 350px;
            width: 700px;
            height: 450px;
            background-color: white;
        }
        input[type='text']{
            margin-top: 100px;
            margin-left: 35px;
            width: 350px;
            height: 60px;
        }

        input[type='password']{
            margin-top: 50px;
            margin-left: 35px;
            width: 350px;
            height: 60px;
        }

        input[type='submit']{
            margin-top: 50px;
            margin-left: 35px;
            width: 350px;
            height: 60px;
            background-color: rgb(251, 82, 21);
            color: white;
        }

        .login img{
            margin-top: 10px;
            margin-bottom: 10px;
            width: 300px;
            height: 350px;
            float: right;
        }

        .login div{
            margin-top: auto;
            margin-left: 125px;
        }
    </style>
</head>
<body>
    <div class="div">
        <header>
            <img src="./head.png" alt="">
        </header>
        <div class="login">
            <img src="./扫码.png" alt="">
            <div style="font-size: 35px;"><b>密码登录</b></div>
            <input type="text" placeholder="用户名/邮箱/手机号"><br>
            <input type="password" name="password" id="" placeholder="请输入登录密码"><br>
            <input type="submit" value="登录">
        </div>
    </div>
</body>
</html>