第三次作业

2302_81483272

已于 2024-06-22 15:08:07 修改

阅读量401

点赞数 3

文章标签： html css

于 2024-06-22 15:05:24 首次发布

本文链接：https://blog.csdn.net/2302_81483272/article/details/139880627

版权

一、CSS盒子模型知识点总结

CSS盒子模型是一个抽象的概念，用于描述网页中元素的布局和外观。它决定了元素如何在页面上渲染和布局。每个HTML元素都可以看作是一个矩形的盒子，这个盒子由四个部分组成：内容（content）、内边距（padding）、边框（border）和外边距（margin）。

CSS盒子模型的组成部分

1.内容（content）：元素的主体部分，包含了元素的文本、图片或其他媒体内容。可以通过width和height属性来设置其大小。

2.内边距（padding）：位于内容和边框之间，用于增加元素内部的空间。可以通过padding-top、padding-right、padding-bottom和padding-left属性来设置。

3.边框（border）：围绕内容和内边距的线条，用于区分不同的元素。可以通过border-width、border-style和border-color属性来设置。

4.外边距（margin）：元素与其他元素之间的空间，可以通过margin-top、margin-right、margin-bottom和margin-left属性来设置。

如图：

CSS盒子模型的类型

1.标准盒子模型：内容的宽度和高度不包括内边距和边框。如图：

标准盒子模型盒子宽度计算方式：

元素的总宽度 = 内容的宽度 + 左侧内边距 + 右侧内边距 + 左侧边框 + 右侧边框 + 左侧外边距 + 右侧外边距。

2.怪异盒子模型：内容的宽度和高度包括内边距和边框。如图：

怪异盒子模型盒子宽度计算方式

元素的总宽度 = 内容的宽度 + 左侧内边距 + 右侧内边距 + 左侧边框 + 右侧边框。

内外边距的区别

内边距（Padding）

影响：设置内边距会使元素的总宽度或高度增加，因为内边距是计算在元素尺寸内的。

外边距（Margin）

影响：设置外边距不会影响元素本身的宽度或高度，但会影响元素在页面中的位置。

区别
1.位置：内边距位于元素的内部，即内容和边框之间；而外边距位于元素的外部，即元素边框和其他元素之间。
2.作用：内边距用于调整元素内部的空间，而外边距用于调整元素之间的空间。
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: 0px;
        }
        .head{
            height: 100px;
            background-color: rgb(241, 240, 240);
        }
        .body{
            height: 390px;
            background-color: rgb(241, 240, 240);
        }
        .foot{
            height: 300px;
            background-color: rgb(241, 240, 240);
        }
        .left{
            width: 20%;
            height: 390px;
            background-color: rgb(241, 240, 240);
            float: left;
        }
        .middle{
            width: 58%;
            height: 390px;
            background-color: white;
            float: left;
            border: 1px solid white;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        .right{
            width: 20%;
            height: 390px;
            background-color: rgb(241, 240, 240);
            float: left;
        }
        .a{
            width: 60%;
            height: 100%;
            float: left;
        }
        .content{
            width: 100%;
            height: 50%;
        }
        .zhanghao,.mima{
            height: 20%;
            padding: 8px;
            border: 1px solid black;
        }
        .content > div{
            width: 100%;
            height: 30%;
        }
        .a > .content{
            margin-top: 10px;
        }
        .button{
            width: 515px;
            padding: 4px 4px;
            background-color: rgba(232, 84, 16, 0.973);
            color: white;
            border: none;
        }
        .title{
            width: 100%;
            height: 15%;
        }
        .title > div{
            width: 50%;
            height: 30%;
            float: left;
            text-align: center;
        }
        .otherway{
            width: 100%;
            height: 20%;
        }
        .a > .otherway{
            margin-top: 10px;
        }
        .way{
            width: 100%;
            height: 50%;
            text-align: center;
        }
        .forget{
            width: 100%;
            height: 40%;
            text-align: center;
        }
        .b{
            width: 35%;
            height: 100%;
            float: left;
        }
    </style>
</head>
<body>
    <div class="head">
        <img src="./31235d3376331baa5815abc972c673c.png" alt="">
    </div>
    <div class="body">
        <div class="left"></div>
        <div class="middle">
            <div class="a">
                <div class="title">
                    <div><h1>密码登录</h1></div>
                    <div><h1>短信登录</h1></div>
                </div>
                <div class="content">
                    <div class="count">
                        <input type="zhanghao" id="zhanghao" name="zhanghao" placeholder="帐号名/邮箱/手机号" size="70" class="zhanghao" required >
                    </div>
                    <div class="password">
                        <input type="mima" id="mima" name="mima" placeholder="请输入登录密码" size="70" class="mima" required>
                    </div>
                    <div class="denglu">
                        <button type="button" class="button"><h1>登录</h1></button>
                    </div>
                </div>
                <div class="otherway">
                    <div class="way">支付宝登录 | 钉钉登录</div>
                    <div class="forget">免费注册 | 忘记账号名 | 忘记密码</div>
                </div>
                <div class=""></div>
            </div>
            <div class="b">
                <img src="./二维码.png" alt="" width="100%" height="100%">
            </div>
        </div>
        <div class="right"></div>
    </div>
    <div class="foot"></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>
        .top{
            width: 100%;
            height: 50px;
        }
        .top > div{
            width: 50%;
            height: 30px;
            float: left;
            text-align: center;
        }
        .title{
            width: 1520px;
            height: 80px;
        }
        .picture{
            width: 20%;
            position: absolute;
            float: left;
        }
        .search{
            float: right;
            margin-right: 100px;
            margin-top: 20px;
        }
        .sousuo{
            background-color: orangered;
            color: white;
            border: none;
        }
        .goods > div{
            display: inline-block;
        }
        .foot{
            width: 1520px;
            height: 100px;
            text-align: center;
        }
        .a{
            width: 280px;
            height: 330px;
        }
        .pro-introduce,.pro-price,.pro-boss,.pro-sale{
            color: rgb(167, 164, 164);
            padding-right: 20px;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="user">
            <p><b>中国大陆</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;亲，请登录&nbsp;&nbsp;&nbsp;免费注册&nbsp;&nbsp;&nbsp;手机版淘宝&nbsp;&nbsp;&nbsp;网页无障碍</p>
        </div>
        <div class="home">
            <p>淘宝网首页&nbsp;&nbsp;&nbsp;我的淘宝&nbsp;&nbsp;&nbsp;购物车&nbsp;&nbsp;&nbsp;收藏夹&nbsp;&nbsp;&nbsp;商品分类&nbsp;&nbsp;&nbsp;免费开店&nbsp;&nbsp;&nbsp;千牛卖家中心&nbsp;&nbsp;&nbsp;帮助中心</p>
        </div>
    </div>
    <div class="title">
        <div class="picture">
            <img src="./淘宝热卖.png" width="200px" height="80px">
        </div>
        <div class="search">
            <input type="searchbox" name="searchbox" class="searchbox" size="50">
            <button type="sousuo" name="sousuo" class="sousuo">搜索</button>
        </div>
    </div>
    <div class="goods">
            <div class="a">
                <dl>
                    <dd>
                        <img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
                            <div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
                            <div class="pro-price"><span>￥1398</span></div>
                            <div class="pro-boss"><span>妙采旗舰店</span></div>
                            <div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
                    </dd>
                </dl>
            </div>
            <div class="a">
                <dl>
                    <dd>
                        <img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
                            <div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
                            <div class="pro-price"><span>￥1398</span></div>
                            <div class="pro-boss"><span>妙采旗舰店</span></div>
                            <div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
                    </dd>
                </dl>
            </div>
            <div class="a">
                <dl>
                    <dd>
                        <img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
                            <div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
                            <div class="pro-price"><span>￥1398</span></div>
                            <div class="pro-boss"><span>妙采旗舰店</span></div>
                            <div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
                    </dd>
                </dl>
            </div>
            <div class="a">
                <dl>
                    <dd>
                        <img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
                            <div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
                            <div class="pro-price"><span>￥1398</span></div>
                            <div class="pro-boss"><span>妙采旗舰店</span></div>
                            <div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
                    </dd>
                </dl>
            </div>
            <div class="a">
                <dl>
                    <dd>
                        <img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
                            <div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
                            <div class="pro-price"><span>￥1398</span></div>
                            <div class="pro-boss"><span>妙采旗舰店</span></div>
                            <div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
                    </dd>
                </dl>
            </div>
            <div class="a">
                <dl>
                    <dd>
                        <img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
                            <div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
                            <div class="pro-price"><span>￥1398</span></div>
                            <div class="pro-boss"><span>妙采旗舰店</span></div>
                            <div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
                    </dd>
                </dl>
            </div>
            <div class="a">
                <dl>
                    <dd>
                        <img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
                            <div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
                            <div class="pro-price"><span>￥1398</span></div>
                            <div class="pro-boss"><span>妙采旗舰店</span></div>
                            <div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
                    </dd>
                </dl>
            </div>
            <div class="a">
                <dl>
                    <dd>
                        <img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
                            <div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
                            <div class="pro-price"><span>￥1398</span></div>
                            <div class="pro-boss"><span>妙采旗舰店</span></div>
                            <div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
                    </dd>
                </dl>
            </div>
            <div class="a">
                <dl>
                    <dd>
                        <img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
                            <div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
                            <div class="pro-price"><span>￥1398</span></div>
                            <div class="pro-boss"><span>妙采旗舰店</span></div>
                            <div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
                    </dd>
                </dl>
            </div>
            <div class="a">
                <dl>
                    <dd>
                        <img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
                            <div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
                            <div class="pro-price"><span>￥1398</span></div>
                            <div class="pro-boss"><span>妙采旗舰店</span></div>
                            <div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
                    </dd>
                </dl>
            </div>
            <div class="a">
                <dl>
                    <dd>
                        <img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
                            <div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
                            <div class="pro-price"><span>￥1398</span></div>
                            <div class="pro-boss"><span>妙采旗舰店</span></div>
                            <div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
                    </dd>
                </dl>
            </div>
            <div class="a">
                <dl>
                    <dd>
                        <img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
                            <div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
                            <div class="pro-price"><span>￥1398</span></div>
                            <div class="pro-boss"><span>妙采旗舰店</span></div>
                            <div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
                    </dd>
                </dl>
            </div>
            <div class="a">
                <dl>
                    <dd>
                        <img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
                            <div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
                            <div class="pro-price"><span>￥1398</span></div>
                            <div class="pro-boss"><span>妙采旗舰店</span></div>
                            <div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
                    </dd>
                </dl>
            </div>
            <div class="a">
                <dl>
                    <dd>
                        <img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
                            <div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
                            <div class="pro-price"><span>￥1398</span></div>
                            <div class="pro-boss"><span>妙采旗舰店</span></div>
                            <div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
                    </dd>
                </dl>
            </div>
            <div class="a">
                <dl>
                    <dd>
                        <img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
                            <div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
                            <div class="pro-price"><span>￥1398</span></div>
                            <div class="pro-boss"><span>妙采旗舰店</span></div>
                            <div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
                    </dd>
                </dl>
            </div>
            <div class="a">
                <dl>
                    <dd>
                        <img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
                            <div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
                            <div class="pro-price"><span>￥1398</span></div>
                            <div class="pro-boss"><span>妙采旗舰店</span></div>
                            <div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
                    </dd>
                </dl>
            </div>
            <div class="a">
                <dl>
                    <dd>
                        <img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
                            <div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
                            <div class="pro-price"><span>￥1398</span></div>
                            <div class="pro-boss"><span>妙采旗舰店</span></div>
                            <div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
                    </dd>
                </dl>
            </div>
            <div class="a">
                <dl>
                    <dd>
                        <img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
                            <div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
                            <div class="pro-price"><span>￥1398</span></div>
                            <div class="pro-boss"><span>妙采旗舰店</span></div>
                            <div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
                    </dd>
                </dl>
            </div>
            <div class="a">
                <dl>
                    <dd>
                        <img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
                            <div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
                            <div class="pro-price"><span>￥1398</span></div>
                            <div class="pro-boss"><span>妙采旗舰店</span></div>
                            <div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
                    </dd>
                </dl>
            </div>
            <div class="a">
                <dl>
                    <dd>
                        <img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
                            <div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
                            <div class="pro-price"><span>￥1398</span></div>
                            <div class="pro-boss"><span>妙采旗舰店</span></div>
                            <div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
                    </dd>
                </dl>
            </div>
            
    </div>
    <div class="foot">
        <a id="previouspage" href="#previouspage">
            <button type="previouspage" name="previouspage" class="previouspage">上一页</button>
        </a>
        <a href="#nextpage" id="nextpage">
            <button type="nextpage" name="nextpage" class="nextpage">下一页</button>
        </a>
        <a href="#home" id="home">
            <button type="home" name="home" class="home">首页</button>
        </a>
    </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>
    .head{
        width: 100%;
        height: 100px;
    }
    .title{
        color: orangered;
    }
    .head > div{
        width: 50%;
        height: 100%;
        float: left;
    }
    .search{
        padding-top: 35px;
        text-align: right;
    }
    .sousuo{
        background-color: orangered;
        color: white;
        border: none;
    }
    .body{
        width: 100%;
        height: 400px;
        text-align: center;
    }
    .foot{
        width: 100%;
        height: 300px;
        text-align: center;
    }
   </style>
</head>
<body>
    <div class="head">
        <div class="title">
            <h1>&nbsp;&nbsp;<big>淘宝</big>&nbsp;购物车</h1>
        </div>
        <div class="search">
            <input type="searchbox"name="searchbox" class="searchbox">
            <button type="sousuo" name="sousuo" class="sousuo">搜索</button>
        </div>
    </div>
    <div class="body">
        <img src="./购物车.png" width="800px" height="400px">
    </div>
    <div class="foot">
        <img src="./链接.png" width="1500px" height="400px">
    </div>
</body>
</html>

运行结果：下面的链接什么的都是抠图

2302_81483272

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
第三次作业

CSS盒子模型是一个抽象的概念，用于描述网页中元素的布局和外观。它决定了元素如何在页面上渲染和布局。每个HTML元素都可以看作是一个矩形的盒子，这个盒子由四个部分组成：内容（content）、内边距（padding）、边框（border）和外边距（margin）。
复制链接

扫一扫