第三次作业

cyx_050911

已于 2024-06-29 09:54:52 修改

阅读量180

点赞数 3

文章标签： javascript 前端 html

于 2024-06-29 09:54:22 首次发布

本文链接：https://blog.csdn.net/cyx_zjx050911/article/details/140059201

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页</title>
    <style>
        .b>div{
            display: inline-block;
            font-size: 20px;
        }
        .c{
            background-color: whitesmoke;
            width: 700px;
            height: 300px;
            border-radius: 3%;
            position: relative;
            top: 50px;
            left: 50px;
        }
        .d>div{
            display: inline-block;
            font-size: 10px;
        }
        .c>div{
            display: inline-block;
        }
        .g div{
            display: inline-block;
            font-size: 10px;
        }
        .h{
            height: 200px;
            border-left: 1px solid gray;
        }
        .f{
            position: absolute;
            top: 90px;
            left: 100px;
        }
        .e{
            position: absolute;
            top: 50px;
            right:100px;
        }
        .h{
            position: absolute;
            top: 50px;
            right:350px;
        }
        button{
            width:170px ;
            background-color: orange;
        }
        button:hover{
            background-color: orangered;
        }
        .e1.e2{
            margin: auto;
        }
    </style>
</head>
<body>
    <div>
        <a href="file:///D:/%E6%9C%88%E8%96%AA%E4%B8
        %A4%E4%B8%87/%E4%BD%9C%E4%B8%9A/%E4%BD%9C%E4
        %B8%9A3/%E5%95%86%E5%93%81%E9%A1%B5.html"><img src="./淘宝.png" alt=""></a>
    </div>
    <div class="c">
        <div class="f">
            <div class="b">
                <div>密码登录</div>|
                <div>短信登陆</div>
            </div>
            <div>
                <input type="text" placeholder="请输入账号">
            </div>
            <div>
                <input type="password" placeholder="请输入登录密码">
            </div>
            <div class="a">
                <button type="submit">登录</button>
            </div>
            <div class="d">
                <div>免费注册</div>&nbsp;|
                <div>忘记账号名</div>&nbsp;|
                <div>忘记密码</div>
            </div>
        </div>
        <div class="h"></div>
        <div class="e">
            <div class="e1">手机扫码安全登录</div>
            <div>
                <img src="./二维码.png" alt="" width="150px" height="150px">
            </div>
            <div class="e2">
                打开淘宝天猫APP扫码
            </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>
        .a1>div{
            display: inline-block;
        }
        .a2>div{
            display: inline-block;
        }
        .a2{
            border: 1px solid red;
            width: 600px;
            height: 50px;
            position: absolute;
            top: 50px;
            left: 450px;
            border-radius: 8px;
        }
        button{
            border: 0px;
            background-color: orangered;
            height: 48px;
            width: 99px;
            border-radius: 8px;
            color: white;
            position: absolute;
            top: 1px;
            right: 1px;
            bottom: 1px;
        }
        ul{
            font-size: 20px;
            width: 5px;
            margin: 0px;
            padding: 0px;
            position: absolute;
            top: 10px;
            left: 95px;
        }
        .a21{
            position: absolute;
            left: 100px;
        }
        .a22{
            position: absolute;
            left: 440px;
        }
        input{
            color: black;
            font-size: 20px;
            background-color: white;
            border: 0px solid white;
            width: 330px;
            height: 47px;
        }
        select{
            background-color: white;
            text-align: center;
            height: 42px;
            width: 90px;
            border: 0px;
            font-size: 20px;
            position: absolute;
            top: 4px;
        }
        .b1{
            width: 1000px;
            height: 2000px;
            box-shadow: 10px 10px 10px gray;
            background-color: whitesmoke;
            border-radius: 8px;
            position: absolute;
            left: 100px;
        }
        .b13>div{
            display: inline-block;
            font-size: 20px;
            margin: 10px 28px;
        }
        .b2>div{
            display: inline-block;
            margin: 10px 28px;
        }
        hr{
            margin: 0px 25px;
            width: 950px;
        }
        .b231{
            position: absolute;
            top: 48px;
        }
        .b23{
            position: absolute;
            top: 36px;
            right: 100px;
        }
        .b21{
            font-size: 20px;
        }
        .b21{
            font-size: 20px;
        }
        #b231{
            border-radius: 8px;
            background-color: gainsboro;
            font-size: 15px;
        }
        #b231:hover{
            color: red;
        }
        #b232:hover{
            color: red;
        }
        .c1>div{
            border: 1px solid white;
            border-radius: 8px;
            width: 185px;
            height: 300px;
            display: inline-block;
        }
        .c11~div:hover{
            border-color: red;
        }
        .c11:hover{
            border-color: red;
        }
        .c11{
            margin-left: 25px;
        }
        img{
            margin: 1px 1px;
        }
    </style>
</head>
<body>
    <div class="a1">
        <div>
            <img src="./淘宝.png" alt="">
        </div>
        <div class="a2">
            <div class="a24">
                <select name="a23" >
                    <option value="a231" id="a231">宝贝</option>
                    <option value="a232" id="a232">店铺</option>
                </select>
            </div>
            <ul>|</ul>
            <div class="a21"><input type="text" placeholder="&nbsp;&nbsp;&nbsp;手机"></div>
            <div class="a22"><img src="./相机.png" width="48px" height="48px" alt="按图片搜索"></div>
            <button>搜索</button>
        </div>
    </div>
    <div class="b1">
        <div class="b13">
            <div class="b11">所有版本</div>
            <div class="b12">天猫</div><hr>
        </div>
        <div class="b2">
            <div class="b21">存储:</div>
            <div class="b22">512GB</div>
            <div class="b23">
                <select id="b231"><option value="" id="b232">展示筛选</option></select>
            </div><hr>
        </div>
        <div class="c1">
            <div class="c11"><img src="./sp.png" alt="" width="183px" height="298px"></div>
            <div class=""><img src="./sp.png" alt="" width="183px" height="298px"></div>
            <div class=""><img src="./sp.png" alt="" width="183px" height="298px"></div>
            <div class=""><img src="./sp.png" alt="" width="183px" height="298px"></div>
            <div class=""><img src="./sp.png" alt="" width="183px" height="298px"></div>
            <div class="c11"><img src="./sp.png" alt="" width="183px" height="298px"></div>
            <div class=""><img src="./sp.png" alt="" width="183px" height="298px"></div>
            <div class=""><img src="./sp.png" alt="" width="183px" height="298px"></div>
            <div class=""><img src="./sp.png" alt="" width="183px" height="298px"></div>
            <div class=""><img src="./sp.png" alt="" width="183px" height="298px"></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>
        .a11>div{
            display: inline-block;
        }
        .a1{
            background-color: whitesmoke;
            padding: 50px 200px;
            border-radius: 8px;
        }
        #put1{
            width: 200px;
            height:28px ;
            position: absolute;
            right: 200px;
            top: 70px;
            border: 1px solid rgb(160, 157, 157);
            border-radius: 8px;
        }
        #but1{
            width: 50px;
            height:30px ;
            position: absolute;
            right: 200px;
            top: 70px;
            border: 1px solid rgb(180, 175, 175);
            border-radius: 8px;
            margin-top: 1px;
        }
        .b1{
            border: 1px solid rgb(112, 108, 108);
            background-color: white;
            border-radius: 8px;
        }
        .b11{
            height: 2000px;
            margin-top: 10px;
        }
        .b12>div{
            display: inline-block;
        }
        .b13>div{
            display: inline-block;
        }
        .b13{
            margin-top: 20px;
        }
        #but2{
            background-color: white;
            border-radius: 8px;
            border: 1px solid rgb(183, 179, 179);
        }
        #but3{
            background-color: white;
            border-radius: 8px;
            border: 1px solid rgb(181, 177, 177);
        }
        .b14{
            border-color: rgb(175, 170, 170);
        }
    </style>
</head>
<body>
    <div class="a1">
        <div class="a11">
            <div><img src="./淘宝购物车.png" alt="" width="200px" height="50px"></div>
            <div class="a12"><input type="text" placeholder="小白鞋" id="put1"><button id="but1">搜索</button></div>
        </div>
        <div class="b1">
            <div>全部商品（11）</div>
            <div class="b11">
                <div class="b12">
                    <div ><input type="checkbox" id="put2">全选</div>
                    <div><button id="but2">删除</button></div>
                    <div><button id="but3">移入收藏夹</button></div>
                </div>
                <div class="b13">
                    <div><input type="checkbox" id="put3"></div>
                    <div class="b14">店铺：依美娅箱包</div>
                </div>
                    <div><img src="./购物车照片.png" alt="" width="700px"></div>
               
                <div class="b13">
                    <div><input type="checkbox" id="put3"></div>
                    <div class="b14">店铺：依美娅箱包</div>
                </div>
                    <div><img src="./购物车照片.png" alt="" width="700px"></div>
                <div class="b13">
                    <div><input type="checkbox" id="put3"></div>
                    <div class="b14">店铺：依美娅箱包</div>
                </div>
                    <div><img src="./购物车照片.png" alt="" width="700px"></div>
                <div class="b13">
                    <div><input type="checkbox" id="put3"></div>
                    <div class="b14">店铺：依美娅箱包</div>
                </div>
                    <div><img src="./购物车照片.png" alt="" width="700px"></div>
               
                
            </div>
        </div>
    </div>
</body>
</html>

<html>
<head>
    <style>
        .divider {
            height: 200px;
            border-right: 1px solid #b93737;
        }
    </style>
</head>
<body>
   <div>
        1. **理解盒子模型的层次结构**：盒子模型由内容、内边距、边框和外边距四个部分组成，这四个部分共同决定了元素在页面上的最终呈现。理解这四个部分的层次关系和相互作用是掌握盒子模型的关键。<br>

        2. **重视内边距和边框对元素尺寸的影响**：在学习初期，我常常会忽略内边距和边框对元素实际尺寸的影响。实际上，元素的宽度和高度不仅包括内容区域，还包括内边距和边框。这意味着，当我们设置元素的宽度和高度时，需要考虑到这些额外的空间。<br>

        3. **灵活应用外边距控制元素间距**：外边距是控制元素之间间距的关键属性。通过调整外边距的大小，我们可以实现元素之间的紧密排列或者保持适当的间距。此外，外边距的折叠现象也是一个需要特别注意的点，它可以帮助我们理解为什么在某些情况下元素之间的间距并不像预期的那样。<br>

        4. **实践是掌握盒子模型的关键**：理论学习只是第一步，真正掌握盒子模型还需要大量的实践。通过编写实际的CSS代码，不断调整元素的尺寸、内边距、边框和外边距，我逐渐掌握了如何精确地控制元素的布局和定位。
    </div>
</body>
</html>