第三次作业

最新推荐文章于 2024-11-11 23:45:17 发布

不会敲代码的吗喽

最新推荐文章于 2024-11-11 23:45:17 发布

阅读量115

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_79878463/article/details/139995787

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页</title>
    <style>
        .A{
            display: grid;
            margin: auto;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(3,1fr);
            height: 800px;
            width: 1000px;
            /* border: 5px solid red; */
            background-color:ghostwhite;
        }
        .a{
            grid-area:1/1/2/2;
            /* background-color: pink; */
        }
        .b{
            grid-area: 1/3/2/4;
            /* background-color: green; */
            width: 100px;
            height: 50px;
        }
        .c{
            grid-area: 2/2/3/3;
            background-color: white;
            border-radius: 5%;
            width: 800px;
            height: 500px;
            display: grid;
            margin: auto;
            grid-template-columns: repeat(2,1fr);
            
        }
        .c1{
            display: grid;
            margin: auto;
            grid-template-columns: repeat(4,1fr);
            grid-template-rows: repeat(6,1fr);
            width: 400px;
            height: 500px;
        }
        .mima{
            /* background-color: aqua; */
            grid-area: 2/2/2/2;
            width: 200px;
            height: 5px;
        }
        .duanxin{
            color: orangered;
        }
        .zhanghaokuang{
            grid-area: 3/2/4/3;
            border-radius: 5%;
        }
        .sgin{
            grid-area: 4/2/5/4;
            border-radius: 5%;
        }
        #button{
            background-color: coral;
            border: 0px;
            border-radius: 10%;
            width: 150px;
            height: 35px;
        }
        .sloge{
            grid-area: 5/2/6/4;
        }
    </style>
</head>
<body>
    <div class="A">
        <div class="a">
            <img src="./loge.png" alt="">
        </div>
        <div class="b">
            
        </div>
        <div class="c">
            <div class="c1">
                <div class="mima">
                    <!-- <a class="">密码登录</a> -->
                    <strong>密码登录</strong>&nbsp;&nbsp;&nbsp;&nbsp;
                    <strong class="duanxin">短信登录</strong>
                </div>
                <div class="zhanghaokuang">
                    <p><input type="text" placeholder="账号名/邮箱/手机号" ></p >
                    <p><input type="password" placeholder="请输入登录密码"></p >        
                </div>
                <div class="sgin">
                    <p><input type="submit" value="登录" id="button"></p>
                </div>
                <div class="sloge">
                    <img src="./sloge.png" alt="">
                </div>
            </div>
            <div class="c2">
                <img src="./erweima.png" alt="" width="300px" height="500px">
            </div>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <style>
        .sum{
            display: grid;
            grid-template-columns: repeat(5,1fr);
            grid-template-rows: repeat(5,1fr);
            /* border: 5px solid red; */
            /* background-color: pink; */
            grid-gap: 5px;
            height: 1000px;
        }
        .top{
            grid-column: 1/6;
            /* background-color: aquamarine; */
            height: 50px;
            
        }
        .loge{
            grid-area: 2/1/3/2;
            /* background-color: yellow; */
            margin-top: -120px;
            margin-bottom: 120px;
            margin-left: 40px;
            border-radius: 5%;
            width: 150px;
            height: 100px;
        }
        .box{
            grid-area: 2/2/3/6;
            /* background-color: yellowgreen; */
            margin-top: -120px;
            margin-bottom: 120px;
        }
        .nav{
            grid-area: 3/1/6/2;
            /* background-color:pink; */
            margin-top: -120px;
            margin-bottom: 120px;
        }
        .sbox{
            grid-area: 3/2/4/6;
            /* background-color: chartreuse; */
            margin-top: -120px;
            margin-bottom: 120px;
            height: 100px;
        }
        img{
            height: auto;
            width: auto;
            width:100%;
        }
        [title *= "ph"]{
            border-radius: 5%;
        }
        .phA{
            grid-area: 4/2/6/3;
            background-color: crimson;
            margin-top: -220px;
            margin-bottom: 120px;
        }
        .phB{
            grid-area: 4/3/5/5;
            /* background-color: beige; */
            margin-top: -220px;
            margin-bottom: 120px;
        }
        .phC{
            grid-area: 4/5/5/6;
            /* background-color: brown; */
            margin-top: -220px;
            margin-bottom: 120px;
        }
        .phD{
            grid-area: 5/3/6/4;
            /* background-color: cyan; */
            margin-top: -205px;
            margin-bottom: 120px;
        }
        .phE{
            grid-area: 5/4/6/5;
            /* background-color: cyan; */
            margin-top: -205px;
            margin-bottom: 120px;
        }
        .phF{
            grid-area: 5/5/6/6;
            /* background-color: cyan; */
            margin-top: -200px;
            margin-bottom: 120px;
        }
        .top>ul>li{
            float: left;
            list-style: none;
            text-align: center;
            padding: 0px 15px 0px;
        }
        .box>p>input{
            border: 4px solid #ff5000;
            width: 800px;
            height: 40px;
        }
        .box>p>button{
            background-color: #ff5000;
            color: white;
            width: 80px;
            height: 50px;
            border: 0;
            border-radius: 5%;
        }
        .nav{
            background-color:aliceblue;
            color: ;
            line-height: 50px;
            list-style: 40px;
            border-radius: 5%;
        }
        .sbox>ul>li{
            background-color:aliceblue;
            /* 垂直排列变水平 */
            float: left;
            list-style: none;
            text-align: center;
            height: 35px;
            /* 边距 */
            line-height: 35px;
            /* 间距 */
            width: 320px;
            /* 字体大小 */
            font-size: 20px;
            font-family: 楷体;
            border-radius: 5%;
        }
        .ssbox{
            color: black;
            text-decoration: none;
        }
        ul>li:hover{
            background-color: #ff5000;
        }
        
    </style>
</head>
<body>
    <div class="sum">
        <div class="top">
                <ul class="fl">
                    <li>
                        <span>中国大陆</span>
                        <span>v</span>
                    </li>
                    <li class="mr7">
                        <a href="#" class="login mr7">亲，请登录</a>
                        <a href="#">免费注册</a>
                    </li>
                    <li class="mr7">
                        <a href="#">手机逛淘宝</a>
                    </li>
                    <li>
                        <a href="#">网页无障碍</a>
                    </li>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <li>
                        <a href="#">我的淘宝</a>
                        <span></span>
                    </li>
                    <li>
                        <span class="mr5 c4"></span>
                        <a href="#">购物车</a>
                        <strong class="c4"></strong>
                        <span></span>
                    </li>
                    <li>
                        <a href="#"><span></span>收藏夹</a>
                        <span></span>
                    </li>
                    <li>
                        <a href="#">商品分类</a>
                        <a href="#">免费开店</a>
                    </li>
                    <li class="line">|</li>
                    <li>
                        <a href="#">卖家中心</a>
                        <span></span>
                    </li>
                    <li>
                        <a href="#">联系客服</a>
                        <span></span>
                    </li>
                </ul>
        </div>
        <div class="loge"><img src="./TAOBAO.png" alt="" width="250px" height="150px"></div>
        <div class="box">
            <p><input type="text" placeholder="宝贝 v | 云计算课程"><button>搜索</button></p>
        </div>
        <div class="nav">
            <pre><h1>          分类</h1></pre>
            <pre>        电脑    /   办公    /   文具
        电商    /   商业    /   定制
        家电    /   手机    /   数码
        家具    /   家装    /   家居
        女装    /   男装    /   内衣
        女鞋    /   男鞋    /   运动
        汽车    /   珠宝    /   男鞋
        食品    /   生鲜    /   健康
        美妆    /   洗护    /   宠物
        娱乐    /   图书    /   鲜花
    </pre>
        </div>
        <div class="sbox">
            <ul>
                <li class="ssbox"><span>天猫宝贝</span></li>
                <li class="ssbox"><span>淘宝直播</span></li>
                <li class="ssbox"><span>1688严选</span></li>
                <li class="ssbox"><span>司法拍卖</span></li>
            </ul>
        </div>
        <div class="phA">
            <img src="./phA.png" alt="">
        </div>
        <div class="phB">
            <img src="./phB.png" alt="">
        </div>
        <div class="phC">
            <img src="./phC.png" alt="">
        </div>
        <div class="phD">
            <img src="./phD.png" alt="">
        </div>
        <div class="phE">
            <img src="./phE.png" alt="">
        </div>
        <div class="phF">
            <img src="./phF.png" alt="">
        </div>
    </div>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝商品页</title>
    <style>
        li{
            list-style-type: none;
            width: 196px;
            height: 328px;
            border: 1px solid #f2f2f2;
            margin: -3px;
            line-height: 1;
            padding-left: 20px;
            padding-top: 22px;
            padding-right: 20px;
            display: inline-block;
            
        }
        li:hover{
            border-color: red;
        }

        a{
            text-decoration: none;
        }

        .pro-introduce{
            font-size: 14px;
            color: #9b9b9b;
            line-height: 20px;
            padding-top: 10px;
        }

        .pro-price{
            font-size: 18px;
            color:red;
        }
        .pro-boss{
            font-size: 12px;
            color: #9b9b9b;
        }
        .pro-sale{
            border-top: 1px solid #9b9b9b;
            position: relative;
        }
        .pro-font{
            position: absolute;
            top:9px;
            right: 0;
            color: #9b9b9b;
            font-size: 12px;
        }
        .top{
            display: grid;
            grid-template-columns: repeat(4,1fr);
        }
        .top1{
            /* background-color: pink; */
            width: 30%;
            grid-column: 1/2;
        }
        .top2{
            width: 70%;
            /* background-color: aqua; */
            grid-column: 2/5;
            
        }
        .top2>p>input{
            border: 4px solid #ff5000;
            width: 750px;
            height: 40px;
        }
        .top2>p>button{
            background-color: #ff5000;
            color: white;
            width: 80px;
            height: 50px;
            border: 0;
            border-radius: 5%;
        }
    </style>
</head>
<body>
    <!-- 目录自己完成 -->
    <div class="top">
        <div class="top1">
            <img src="./TaoBao..png" alt="">
        </div>
        <div class="top2">
            <p><input type="text" placeholder="好友v | vx可推">
                <button>搜索</button></p>
        </div>
        </div>
    <!-- 商品页 -->
    <div>
        <ul>
            
            <li>
                <a href="https://detail.tmall.com/item.htm?id=788629309537&ali_refid=a3_430673_1006:1109650549:N:psxaCYNgTp2i9q7rbenh8w%3D%3D:194c7a5b38c687e07ed197b554dda47f&ali_trackid=162_194c7a5b38c687e07ed197b554dda47f&spm=a2e0b.20350158.31919782.1&bxsign=tanZKWnaUoHqx6Ku6qZAES5tQK0rBycpyKlj1WwUtusGq4Rynjif2zHtTPNlZkdAnf04avN35QFt7Et_LoXoVh-RPmmn8qoYeUHLJSDbPpe6K4">
                    <img src="./wml.png"
                    width="198px" height="198px">
                    <div class="pro-introduce"><span>可盐可甜文艺小清新范式男友</span></div>
                    <div class="pro-price"><span>￥9.9</span></div>
                    <div class="pro-boss"><span>WML旗舰店</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://detail.tmall.com/item.htm?id=788629309537&ali_refid=a3_430673_1006:1109650549:N:psxaCYNgTp2i9q7rbenh8w%3D%3D:194c7a5b38c687e07ed197b554dda47f&ali_trackid=162_194c7a5b38c687e07ed197b554dda47f&spm=a2e0b.20350158.31919782.1&bxsign=tanZKWnaUoHqx6Ku6qZAES5tQK0rBycpyKlj1WwUtusGq4Rynjif2zHtTPNlZkdAnf04avN35QFt7Et_LoXoVh-RPmmn8qoYeUHLJSDbPpe6K4">
                    <img src="./ptt.png"
                    width="198px" height="198px">
                    <div class="pro-introduce"><span>成熟稳重型幽默理工男</span></div>
                    <div class="pro-price"><span>￥689</span></div>
                    <div class="pro-boss"><span>PTT旗舰店</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 12w+</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://detail.tmall.com/item.htm?id=788629309537&ali_refid=a3_430673_1006:1109650549:N:psxaCYNgTp2i9q7rbenh8w%3D%3D:194c7a5b38c687e07ed197b554dda47f&ali_trackid=162_194c7a5b38c687e07ed197b554dda47f&spm=a2e0b.20350158.31919782.1&bxsign=tanZKWnaUoHqx6Ku6qZAES5tQK0rBycpyKlj1WwUtusGq4Rynjif2zHtTPNlZkdAnf04avN35QFt7Et_LoXoVh-RPmmn8qoYeUHLJSDbPpe6K4">
                    <img src="hsh.png"
                    width="198px" height="198px">
                    <div class="pro-introduce"><span>一位低调的美女</span></div>
                    <div class="pro-price"><span>￥999</span></div>
                    <div class="pro-boss"><span>HSH旗舰店</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 99w+</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://detail.tmall.com/item.htm?id=788629309537&ali_refid=a3_430673_1006:1109650549:N:psxaCYNgTp2i9q7rbenh8w%3D%3D:194c7a5b38c687e07ed197b554dda47f&ali_trackid=162_194c7a5b38c687e07ed197b554dda47f&spm=a2e0b.20350158.31919782.1&bxsign=tanZKWnaUoHqx6Ku6qZAES5tQK0rBycpyKlj1WwUtusGq4Rynjif2zHtTPNlZkdAnf04avN35QFt7Et_LoXoVh-RPmmn8qoYeUHLJSDbPpe6K4">
                    <img src="lgj.png"
                    width="198px" height="198px">
                    <div class="pro-introduce"><span>超高IQ理工男(谦友一枚)</span></div>
                    <div class="pro-price"><span>￥799</span></div>
                    <div class="pro-boss"><span>LGJ旗舰店</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 10w+</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://detail.tmall.com/item.htm?id=788629309537&ali_refid=a3_430673_1006:1109650549:N:psxaCYNgTp2i9q7rbenh8w%3D%3D:194c7a5b38c687e07ed197b554dda47f&ali_trackid=162_194c7a5b38c687e07ed197b554dda47f&spm=a2e0b.20350158.31919782.1&bxsign=tanZKWnaUoHqx6Ku6qZAES5tQK0rBycpyKlj1WwUtusGq4Rynjif2zHtTPNlZkdAnf04avN35QFt7Et_LoXoVh-RPmmn8qoYeUHLJSDbPpe6K4">
                    <img src="djy.png"
                    width="198px" height="198px">
                    <div class="pro-introduce"><span>'情绪稳定'女学霸{女谦友!!!}</span></div>
                    <div class="pro-price"><span>￥689</span></div>
                    <div class="pro-boss"><span>DJY旗舰店</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 15w+</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://detail.tmall.com/item.htm?id=788629309537&ali_refid=a3_430673_1006:1109650549:N:psxaCYNgTp2i9q7rbenh8w%3D%3D:194c7a5b38c687e07ed197b554dda47f&ali_trackid=162_194c7a5b38c687e07ed197b554dda47f&spm=a2e0b.20350158.31919782.1&bxsign=tanZKWnaUoHqx6Ku6qZAES5tQK0rBycpyKlj1WwUtusGq4Rynjif2zHtTPNlZkdAnf04avN35QFt7Et_LoXoVh-RPmmn8qoYeUHLJSDbPpe6K4">
                    <img src="dsz.png"
                    width="198px" height="198px">
                    <div class="pro-introduce"><span>盲盒女大学生</span></div>
                    <div class="pro-price"><span>￥689</span></div>
                    <div class="pro-boss"><span>DSZ旗舰店</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 12w+</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://detail.tmall.com/item.htm?id=788629309537&ali_refid=a3_430673_1006:1109650549:N:psxaCYNgTp2i9q7rbenh8w%3D%3D:194c7a5b38c687e07ed197b554dda47f&ali_trackid=162_194c7a5b38c687e07ed197b554dda47f&spm=a2e0b.20350158.31919782.1&bxsign=tanZKWnaUoHqx6Ku6qZAES5tQK0rBycpyKlj1WwUtusGq4Rynjif2zHtTPNlZkdAnf04avN35QFt7Et_LoXoVh-RPmmn8qoYeUHLJSDbPpe6K4">
                    <img src="wh.png"
                    width="198px" height="198px">
                    <div class="pro-introduce"><span>纯纯搞笑女一枚</span></div>
                    <div class="pro-price"><span>￥8.8</span></div>
                    <div class="pro-boss"><span>WH旗舰店</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 12</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://detail.tmall.com/item.htm?id=788629309537&ali_refid=a3_430673_1006:1109650549:N:psxaCYNgTp2i9q7rbenh8w%3D%3D:194c7a5b38c687e07ed197b554dda47f&ali_trackid=162_194c7a5b38c687e07ed197b554dda47f&spm=a2e0b.20350158.31919782.1&bxsign=tanZKWnaUoHqx6Ku6qZAES5tQK0rBycpyKlj1WwUtusGq4Rynjif2zHtTPNlZkdAnf04avN35QFt7Et_LoXoVh-RPmmn8qoYeUHLJSDbPpe6K4">
                    <img src="wkw.png"
                    width="198px" height="198px">
                    <div class="pro-introduce"><span>牛马牢底(越长越歪)</span></div>
                    <div class="pro-price"><span>￥0.01</span></div>
                    <div class="pro-boss"><span>WKW旗舰店</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 0</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://detail.tmall.com/item.htm?id=788629309537&ali_refid=a3_430673_1006:1109650549:N:psxaCYNgTp2i9q7rbenh8w%3D%3D:194c7a5b38c687e07ed197b554dda47f&ali_trackid=162_194c7a5b38c687e07ed197b554dda47f&spm=a2e0b.20350158.31919782.1&bxsign=tanZKWnaUoHqx6Ku6qZAES5tQK0rBycpyKlj1WwUtusGq4Rynjif2zHtTPNlZkdAnf04avN35QFt7Et_LoXoVh-RPmmn8qoYeUHLJSDbPpe6K4">
                    <img src="xps.png"
                    width="198px" height="198px">
                    <div class="pro-introduce"><span>高冷面瘫男大(认识后有反差!!!)</span></div>
                    <div class="pro-price"><span>￥798</span></div>
                    <div class="pro-boss"><span>XPS旗舰店</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 9w+</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://detail.tmall.com/item.htm?id=788629309537&ali_refid=a3_430673_1006:1109650549:N:psxaCYNgTp2i9q7rbenh8w%3D%3D:194c7a5b38c687e07ed197b554dda47f&ali_trackid=162_194c7a5b38c687e07ed197b554dda47f&spm=a2e0b.20350158.31919782.1&bxsign=tanZKWnaUoHqx6Ku6qZAES5tQK0rBycpyKlj1WwUtusGq4Rynjif2zHtTPNlZkdAnf04avN35QFt7Et_LoXoVh-RPmmn8qoYeUHLJSDbPpe6K4">
                    <img src="ls.png"
                    width="198px" height="198px">
                    <div class="pro-introduce"><span>高级幽默感男大(双峰第一深情,CF十年老兵)</span></div>
                    <div class="pro-price"><span>￥799</span></div>
                    <div class="pro-boss"><span>LS旗舰店</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 10w+</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://detail.tmall.com/item.htm?id=788629309537&ali_refid=a3_430673_1006:1109650549:N:psxaCYNgTp2i9q7rbenh8w%3D%3D:194c7a5b38c687e07ed197b554dda47f&ali_trackid=162_194c7a5b38c687e07ed197b554dda47f&spm=a2e0b.20350158.31919782.1&bxsign=tanZKWnaUoHqx6Ku6qZAES5tQK0rBycpyKlj1WwUtusGq4Rynjif2zHtTPNlZkdAnf04avN35QFt7Et_LoXoVh-RPmmn8qoYeUHLJSDbPpe6K4">
                    <img src="spj.png"
                    width="198px" height="198px">
                    <div class="pro-introduce"><span>二次元天然呆死宅</span></div>
                    <div class="pro-price"><span>￥648</span></div>
                    <div class="pro-boss"><span>SPJ旗舰店</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 328</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://detail.tmall.com/item.htm?id=788629309537&ali_refid=a3_430673_1006:1109650549:N:psxaCYNgTp2i9q7rbenh8w%3D%3D:194c7a5b38c687e07ed197b554dda47f&ali_trackid=162_194c7a5b38c687e07ed197b554dda47f&spm=a2e0b.20350158.31919782.1&bxsign=tanZKWnaUoHqx6Ku6qZAES5tQK0rBycpyKlj1WwUtusGq4Rynjif2zHtTPNlZkdAnf04avN35QFt7Et_LoXoVh-RPmmn8qoYeUHLJSDbPpe6K4">
                    <img src="wjx.png"
                    width="198px" height="198px">
                    <div class="pro-introduce"><span>超绝氛围感男大</span></div>
                    <div class="pro-price"><span>￥999</span></div>
                    <div class="pro-boss"><span>WJX旗舰店</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 20w+</span></div></div>
                </a>
            </li>
        </ul>
    </div>


    <!-- 页脚自己完成 -->
    <div></div>
</body>
</html>