第三次作业

最新推荐文章于 2024-08-03 20:32:29 发布

qingchuanyikong

最新推荐文章于 2024-08-03 20:32:29 发布

阅读量160

点赞数 1

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/qingchuanyikong/article/details/139786523

版权

淘宝的商品展示页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东</title>
    <style>
        .head{
            width: 1520px;
            height: 170px;
        }
        .img-1,.img-2{
            width: 300px;
            height: 150px;
            margin: 10px;
            float: left;
        }
        .Head{
            width: 880px;
            height: 150px;
            float: left;
            margin: 10px 0px;
        }
        .h1{
            width: 880px;
            height: 100px;
        }
        .it{
            width: 800px;
            height: 50px;
            line-height: 50px;
            font-size: larger;
            color: azure;
            margin: 20px 0px 0px 0px;
            border: 3px solid orange;
            border-radius: 10px;
            float: left;
        }
        .but{
            width: 70px;
            height: 55px;
            margin: 20px 0px 0px 0px;
            background-color: orange;
            border-radius: 15px;
            float: left;
        }
        .h2{
            width: 880px;
            height: 40px;
            display: grid;
            grid-template-columns: repeat(10,1fr);
            grid-gap: 5px;
        }
        .h2 > div{
            height: 40px;
            line-height: 40px;
            color: gray;
        }
        .body{
            width: 1520px;
            height: 470px;
        }
        .left{
            width: 300px;
            height: 450px;
            margin: 10px;
            background-color: gainsboro;
            float: left;
            display: grid;
            grid-template-rows: repeat(12,1fr);
            grid-gap: 10px;
        }
        .left > div:nth-child(1){
            color: black;
            font-size: larger;
            position: relative;
            left: 30px;
            top: 10px;
            float: left;
        }
        .in{
            color: red;
            display: inline-block;
        }
        .left > div {
            font-family: 楷体;
            color: azure;
            font-size: large;
            position: relative;
            left: 30px;
        }
        .right{
            width: 300px;
            height: 450px;
            margin: 10px;
            float: left;
        }
        .r{
            width: 300px;
            height: 80px;
            line-height: 80px;
        }
        .one{
            width: 80px;
            height: 50px;
            line-height: 50px;
            font-size: larger;
            color: white;
            font-family: 宋体;
            background-color: orangered;
            border-radius: 10px;
            margin: 5px 10px 0px 5px;
            position: relative;
            left: 15px;
        }
        .two{
            width: 80px;
            height: 50px;
            line-height: 50px;
            font-size: larger;
            color: white;
            font-family: 宋体;
            background-color: orange;
            border-radius: 10px;
            margin: 5px 5px 0px 5px;
            position: relative;
            left: 15px;
        }
        .three{
            width: 80px;
            height: 50px;
            line-height: 50px;
            font-size: larger;
            font-family: 宋体;
            background-color: ghostwhite;
            border-radius: 10px;
            margin: 5px 10px 0px 5px;
            position: relative;
            left: 15px;
        }
        .img-9,.img-11{
            width: 300px;
            height: 150px;
            margin: 5px 0px;
        }
        .img-10{
            width: 300px;
            height: 50px;
        }
        .middle{
            width: 880px;
            height: 450px;
            margin: 10px 0px 10px 0px;
            float: left;
        }
        .m1{
            width: 880px;
            height: 40px;
            background-color: gainsboro;
            display: grid;
            grid-template-columns: repeat(4,1fr);
            grid-gap: 2px;
        }
        .m1 > div {
            height: 40px;
            line-height: 40px;
            color: red;
            font-family: 宋体;
            font-size: larger;
            position: relative;
            left: 70px;
        }
        .m2{
            width: 880px;
            height: 390px;
            margin: 20px 0px 0px 0px;
            display: grid;
            grid-template-columns: repeat(2,1fr);
            grid-template-rows: repeat(2,1fr);
            grid-gap: 20px;
        }
        .m2 > div {
            background-color: papayawhip;
        }
        .four-1{
            height: 30px;
            font-size: x-large;
            margin: 15px 0px 10px 20px;
            float: left;
        }
        .font{
            font-size: small;
            color: white;
            background-color: orange;
            border-radius: 5px;
            margin: 20px 0px 00px 10px;
        }
        .four-2{
            width: 400px;
            height: 100px;
            margin: 0px 0px 10px 20px;
            font-size: large;
            display: grid;
            grid-template-rows: repeat(4,1fr);
            grid-gap: 8px;
        }
        .foot{
            width: 1520px;
            height: 65px;
            margin: 10px;
            display: grid;
            grid-template-columns: repeat(6,1fr);
            grid-gap: 8px;
        }
        .img-3,.img-4,.img-5,.img-6,.img-7,.img-8{
            float: left;
        }
        .F1{
            height: 20px;
            color: orange;
            font-family: 宋体;
            font-size: 25px;
            margin: 10px 10px;
            float: left;
        }
        .f1{
            height: 20px;
            color: orange;
            font-family: 宋体;
            margin: 10px 10px;
            float: left;
        }
        .F2,.F3,.F4,.F5,.F6{
            height: 20px;
            font-family: 宋体;
            font-size: 25px;
            margin: 10px 10px;
            float: left;
        }
        .f2,.f3,.f4,.f5,.f6{
            height: 20px;
            color: rgba(150, 148, 148, 0.851);
            font-family: 宋体;
            margin: 10px 10px;
            float: left;
        }
        
    </style>
</head>
<body>
    <div class="head">
        <div class="img-1">
            <img src="淘宝logo2.png" width="300px" height="150px">
        </div>
        <div class="Head">
            <div class="h1">
                <input type="text" class="it" placeholder="    宝贝    |   连衣裙">
                <button type="button" class="but">搜索</button>
            </div>
            <div class="h2">
                <div>大额神劵</div>
                <div>苹果惊喜劵</div>
                <div>家电爆款</div>
                <div>汽车惊喜券</div>
                <div>3c数码优惠</div>
                <div>美味狂欢</div>
                <div>女装</div>
                <div>货架</div>
                <div>空调</div>
                <div>手机</div>
            </div>
        </div>
        <div class="img-2">
            <img src="618.png" width="300px" height="150px">
        </div>
    </div>
    <div class="body">
        <div class="left">
            <div>分类
                <div class="in">&nbsp;618狂欢节</div>
            </div>
            <div>电脑&nbsp;/&nbsp;办公&nbsp;/&nbsp;文具</div>
            <div>工业品&nbsp;/&nbsp;商业&nbsp;/&nbsp;定制</div>
            <div>家电&nbsp;/&nbsp;手机&nbsp;/&nbsp;数码</div>
            <div>家具&nbsp;/&nbsp;家装&nbsp;/&nbsp;家居</div>
            <div>女装&nbsp;/&nbsp;男装&nbsp;/&nbsp;内衣</div>
            <div>女鞋&nbsp;/&nbsp;男鞋&nbsp;/&nbsp;运动</div>
            <div>汽车&nbsp;/&nbsp;珠宝&nbsp;/&nbsp;箱包</div>
            <div>食品&nbsp;/&nbsp;生鲜&nbsp;/&nbsp;健康</div>
            <div>母婴&nbsp;/&nbsp;童装&nbsp;/&nbsp;潮玩</div>
            <div>美妆&nbsp;/&nbsp;洗护&nbsp;/&nbsp;宠物</div>
            <div>娱乐&nbsp;/&nbsp;图书&nbsp;/&nbsp;鲜花</div>
        </div>
        <div class="middle">
            <div class="m1">
                <div>天猫&nbsp;&nbsp;&nbsp;&nbsp;|</div>
                <div>淘宝直播&nbsp;&nbsp;&nbsp;&nbsp;|</div>
                <div>1688严选&nbsp;&nbsp;&nbsp;&nbsp;|</div>
                <div>司法拍卖</div>
            </div>
            <div class="m2">
                <div>
                    <img src="图1.png" width="430px" height="185px">
                </div>
                <div>
                    <div class="four-1">淘江湖</div>
                    <div>
                        <button type="button" class="font">话题榜</button>
                    </div>
                    <div class="four-2">
                        <div>热门&nbsp;&nbsp;致taobao.com用户的一...</div>
                        <div>热门&nbsp;&nbsp;牛！中专女生杀进阿里巴...</div>
                        <div>热门&nbsp;&nbsp;午休神器爆火！95后小伙</div>
                        <div>热门&nbsp;&nbsp;你们怎么还没有发现PC</div>
                    </div>
                </div>
                <div>
                    <img src="图2.png" width="430px" height="185px">
                </div>
                <div>
                    <img src="图3.png" width="430px" height="185px">
                </div>
            </div>
        </div>
        <div class="right">
            <div class="img-9">
                <img src="图4.png" width="300px" height="150px">
            </div>
            <div class="r">
                <button type="button" class="one">登录</button>
                <button type="button" class="two">注册</button>
                <button type="button" class="three">开店</button>
            </div>
            <div class="img-10">
                <img src="图5.png" width="300px" height="50px">
            </div>
            <div class="img-11">
                <img src="图12.png" width="300px" height="150px">
            </div>
        </div>
    </div>
    <div class="foot">
        <div>
            <img src="图6.png" width="70px" height="65px" class="img-3">
            <div class="F1">猜你喜欢</div>
            <div class="f1">精选好物推荐</div>
        </div>
        <div>
            <img src="图7.png" width="70px" height="65px" class="img-4">
            <div class="F2">潮电数码</div>
            <div class="f2">疯抢8.5折起</div>
        </div>
        <div>
            <img src="图8.png" width="70px" height="65px" class="img-5">
            <div class="F3">服饰时尚</div>
            <div class="f3">大牌直降</div>
        </div>
        <div>
            <img src="图9.png" width="70px" height="65px" class="img-6">
            <div class="F4">运动户外</div>
            <div class="f4">满300减50</div>
        </div>
        <div>
            <img src="图10.png" width="70px" height="65px" class="img-7">
            <div class="F5">精致护理</div>
            <div class="f5">买一享十</div>
        </div>
        <div>
            <img src="图11.png" width="70px" height="65px" class="img-8">
            <div class="F6">家享生活</div>
            <div class="f6">大牌不只5折</div>
        </div>
    </div>
</body>
</html>

淘宝的个人中心页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝</title>
    <style>
        .head{
            width: 1480px;
            height: 75px;
            background-color: rgb(255, 85, 0);
        }
        .font-1{
            width: 150px;
            height: 75px;
            color: white;
            font-family: 宋体;
            font-size: 35px;
            padding: 18px 0px 0px 100px;
            display: inline-block;
        }
        .font-2{
            width: 40px;
            height: 15px;
            color: white;
            font-size: large;
            padding: 0px 0px 0px 120px;
            display: inline-block;
            position: relative;
            bottom: 8px;
        }
        .font-3{
            width: 80px;
            height: 15px;
            color: white;
            font-size: large;
            padding: 0px 0px 0px 40px;
            display: inline-block;
            position: relative;
            bottom: 8px;
        }
        .set{
            width: 400px;
            height: 25px;
            float: right;
            position: relative;
            right: 80px;
        }
        .in{
            width: 300px;
            height: 25px;
            float: right;
            position: relative;
            top: 22px;
        }
        .but-1{
            width: 50px;
            height: 30px;
            float: right;
            position: relative;
            top: 22px;
        }
        .foot{
            width: 1480px;
            height: 700px;
            margin-top: 20px;
        }
        .left{
            width: 280px;
            height: 700px;
            margin-right: 50px;
            float: left;
        }
        .left-1{
            width: 180px;
            height: 250px;
            float: right;
            display: grid;
            grid-template-rows: repeat(10,1fr);
        }
        .left-1 > div:nth-child(1){
            color: red;
        }
        .left-1 > div{
            margin-top: 15px;
        }
        .body{
            width: 820px;
            height: 700px;
            float: left;
        }
        .c1{
            width: 820px;
            height: 90px;
            background-color: rgb(234, 231, 231);
        }
        .img-1{
            width: 80px;
            height: 90px;
            float: left;
        }
        .font-6{
            width: 300px;
            height: 90px;
            line-height: 90px;
            float: left;
            position: relative;
            left: 5px;
        }
        .font-7{
            width: 100px;
            height: 90px;
            line-height: 90px;
            float: left;
            position: relative;
            left: 100px;
        }
        .font-8{
            width: 100px;
            height: 90px;
            line-height: 90px;
            float: left;
            position: relative;
            left: 200px;
        }
        .c2{
            width: 820px;
            height: 60px;
            display: grid;
            grid-template-columns: repeat(5,1fr);
        }
        .c2 > div{
            margin: auto;
        }
        .c3{
            width: 820px;
            height: 40px;
            background-color: rgb(204, 244, 244);
            margin: 20px 0px;
        }
        .img-2{
            width: 60px;
            height: 40px;
            float: left;
        }
        .font-4{
            width: 80px;
            height: 40px;
            line-height: 40px;
            font-size: large;
            color: rgb(133, 206, 246);
            float: left;
            position: relative;
            left: 6px;
        }
        .c4{
            width: 820px;
            height: 55px;
            background-color: rgb(137, 243, 248);
        }
        .font-5{
            width: 250px;
            height: 55px;
            line-height: 55px;
            color: white;
            font-size: 25px;
            font-family: 宋体;
            display: inline-block;
            position: relative;
            left: 10px;
        }
        .but-2{
            width: 115px;
            height: 35px;
            font-size: large;
            float: right;
            margin: 8px 10px;
        }
        .c5{
            width: 820px;
            height: 380px;
            background-color: whitesmoke;
            display: grid;
            grid-template-columns: repeat(3,1fr);
        }
        .c5 > div{
            margin: 20px 10px;
            border: 1px solid gray;
        }
        .img-3{
            width: 253px;
            height: 250px;
        }
        .font-9{
            width: 253px;
            height: 40px;
            line-height: 40px;
            color: orange;
            font-size: larger;
            font-family: 宋体;
            position: relative;
            left: 10px;
        }
        .font-10{
            width: 253px;
            height: 30px;
            font-size: small;
            font-family: 宋体;
            position: relative;
            left: 10px;
        }
        .img-4{
            width: 253px;
            height: 250px;
        }
        .font-11{
            width: 253px;
            height: 40px;
            line-height: 40px;
            color: orange;
            font-size: larger;
            font-family: 宋体;
            position: relative;
            left: 10px;
        }
        .font-12{
            width: 253px;
            height: 30px;
            font-size: small;
            font-family: 宋体;
            position: relative;
            left: 10px;
        }
        .img-5{
            width: 253px;
            height: 250px;
        }
        .font-13{
            width: 253px;
            height: 40px;
            line-height: 40px;
            color: orange;
            font-size: larger;
            font-family: 宋体;
            position: relative;
            left: 10px;
        }
        .font-14{
            width: 253px;
            height: 30px;
            font-size: small;
            font-family: 宋体;
            position: relative;
            left: 10px;
        }
        .right{
            width: 300px;
            height: 180px;
            background-color: aquamarine;
            margin-left: 20px;
            float: left;
        }
        .img-6{
            width: 300px;
            height: 180px;
        }
    </style>
</head>
<body>
    <div class="head">
        <div class="font-1">我的淘宝</div>
        <div class="font-2">首页</div>
        <div class="font-3">账号设置</div>
        <div class="set">
            <button type="submit" class="but-1">搜索</button>
            <input type="text" class="in">
        </div>
    </div>
    <div class="foot">
        <div class="left">
            <div class="left-1">
                <div>全部功能</div>
                <div>我的购物车</div>
                <div>已买到的宝贝</div>
                <div>购买过的店铺</div>
                <div>我的卡卷包</div>
                <div>我的发票</div>
                <div>我的收藏</div>
                <div>评价管理</div>
                <div>退款维权</div>
                <div>我的足迹</div>
            </div>
        </div>
        <div class="body">
            <div class="c1">
                <div class="img-1">
                    <img src="头像.png" width="80px" height="90px">
                </div>
                <div class="font-6">xxxx(xxxxxxxxx)</div>
                <div class="font-7">我的收货地址</div>
                <div class="font-8">我的支付宝</div>
            </div>
            <div class="c2">
                <div>待付款</div>
                <div>待发货</div>
                <div>待收货</div>
                <div>待评价</div>
                <div>退款</div>
            </div>
            <div class="c3">
                <div class="img-2">
                    <img src="小车.png" width="60px" height="40px">
                </div>
                <div class="font-4">我的物流</div>
            </div>
            <div class="c4">
                <div class="font-5">根据浏览，猜我喜欢</div>
                <button type="button" class="but-2">换一组</button>
            </div>
            <div class="c5">
                <div>
                    <div class="img-3">
                        <img src="照片1.png" width="253px" height="250px">
                    </div>
                    <div class="font-9">￥398.00</div>
                    <div class="font-10">大桶超算!卡诗双重功能洗发水...</div>
                </div>
                <div>
                    <div class="img-4">
                        <img src="照片2.png" width="253px" height="250px">
                    </div>
                    <div class="font-11">￥128.00</div>
                    <div class="font-12">宫品蔷薇滋润修护干枯洗发水顺滑...</div>
                </div>
                <div>
                    <div class="img-5">
                        <img src="照片3.png" width="253px" height="250px">
                    </div>
                    <div class="font-13">￥65.00</div>
                    <div class="font-14">小木槿韩国红绿棕黑白吕洗发水防...</div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="img-6">
                <img src="日历.png" width="300px" height="180px">
            </div>
        </div>
    </div>
</body>
</html>

淘宝的登录页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页</title>
    <style>
        .all{
            width: 1480px;
            height: 900px;
            background-color: rgb(233, 229, 229);
        }
        .img-1{
            width: 100px;
            height: 60px;
            padding: 20px 0px 0px 200px;
        }
        .content{
            width: 900px;
            height: 500px;
            margin: 100px 0px 0px 350px;
            background-color: white;
            border-radius: 12px;
        }
        .left{
            width: 480px;
            height: 400px;
            border-width: 0px 1px 0px 0px;
            border-style: solid;
            border-color: rgb(233, 229, 229);
            margin: 50px 0px 0px 90px;
            float: left;
        }
        .right{
            width: 300px;
            height: 400px;
            /* background-color: aquamarine; */
            margin: 50px 10px 0px 0px;
            float: right;
        }
        .font-1{
            color: orangered;
            display: inline-block;
            margin: 0px 50px 0px 100px;
        }
        .font-2{
            display: inline-block;
        }
        .In-1,.In-2{
            width: 350px;
            height: 40px;
            background-color: rgb(243, 239, 239);
            margin-top: 20px;
            margin-left: 40px;
            border-radius: 6px;
        }
        .but{
            width: 360px;
            height: 40px;
            background-color: orange;
            color: white;
            margin-top: 40px;
            margin-left: 40px;
            border-radius: 6px;
        }
        .box{
            width: 400px;
            height: 20px;
            color: rgb(86, 84, 84);
            margin-top: 60px;
            margin-left: 40px;
            display: grid;
            grid-template-columns: repeat(4,1fr);
        }
        .font-3{
            font-size: 28px;
            height: 30px;
            line-height: 30px;
            margin-left: 28px;
            margin-top: 20px;
            font-family: 宋体;
        }
        .img-2{
            width: 220px;
            height: 220px;
            margin-top: 55px;
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <div class="all">
        <div class="img-1">
            <img src="淘宝logo.png" width="100px" height="60px">
        </div>
        <div class="content">
            <div class="left">
                <h2 class="font-1">密码登录</h2>
                <h2 class="font-2">短信登录</h2>
                <div class="in-1">
                    <input type="text" class="In-1" placeholder="账号名/邮箱/手机号">
                </div>
                <div class="in-2">
                    <input type="password" class="In-2" placeholder="请输入登录密码">
                </div>
                <button type="submit" class="but">登录</button>
                <div class="box">
                    <div>支付宝登录</div>
                    <div>免费注册</div>
                    <div>忘记账号名</div>
                    <div>忘记密码</div>
                </div>
            </div>
            <div class="right">
                <div class="font-3">手机扫码安全登录</div>
                <div class="img-2">
                    <img src="二维码.png" width="220px" height="220px">
                </div>
            </div>
        </div>
    </div>
</body>
</html>