CSS学习12之盒子模型

最新推荐文章于 2024-05-18 15:14:09 发布

小黑神zxs

最新推荐文章于 2024-05-18 15:14:09 发布

阅读量383

点赞数 1

分类专栏： CSS3详解文章标签： css3 前端 html css盒子模型仿京东前端页面

本文链接：https://blog.csdn.net/zxs1002/article/details/122931200

版权

CSS3详解专栏收录该内容

18 篇文章 0 订阅

订阅专栏

盒子模型

盒子模型它的学名为框模型！但是我觉得叫它盒子模型更加贴切，方便理解！
CSS 框模型
所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。
CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。

在这里插入图片描述

示例

仿京东前端登录页面（仅模仿练习，无意冒犯）

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型+内外边距</title>
    <style>
        body,a{
            /*有一个默认的外边距*/
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        #head {
            width: 500px;
            height: auto;
            color: gray;
        }
        h2{
            font-size: 30px;
            background: pink;
            text-align: center;
            line-height: 40px;
            margin: 0;
            padding: 20px 0 20px;
        }
        h2:hover{
            color: red;
        }
        #app{
            background: white;
            padding: 0;
            width: auto;
            height: auto;
        }
        form{
            padding: 20px 20px 20px;
            background: pink;
        }
        div:nth-of-type(1) input{
            border: 2px solid black;
        }
        div:nth-of-type(2) input{
            border: 3px solid red;
        }
        div:nth-of-type(3) input{
            border: 2px dashed gray;
        }
        div:nth-of-type(4){
            padding: 20px 0 10px;
        }
        #f1d4 a:nth-of-type(3){
            float: right;
            color: orangered;
        }
        #f1d4 a:nth-of-type(3):hover{
            text-decoration: underline;
        }


        form>div{
            text-indent: 2em;
            padding: 5px 0 10px;
        }
        button{
            width: 360px;
            border: none;
            background: red;
            text-align: center;
            font: 25px bold;
            margin-top: 20px;
        }
        #d2{
            margin-left: 900px;
            margin-top: 100px;
            border: 2px black solid;
            width: 400px;
            height: auto;
        }
        #d1{
            float: left;
            width: 800px;
            height: 496px;
            background: url("images/bg.png") no-repeat;
        }
        #d3{
            margin-top: 50px;
            font-size: 14px;
            text-align: center;
        }
        #d3 a{
            color: black;
        }
        #d3 a:hover{
            text-decoration: underline;
            color: orangered;
        }
        p{
            text-align: center;
        }

    </style>
</head>
<body>

<div id="app">

    <div id="head">
        <h1><img src="images/logo.png" alt="logo">欢迎登录</h1>
    </div>


    <div id="d1">

    </div>

    <div id="d2">
        <h2>会员登录</h2>
        <form action="#">
            <div id="f1d1">
                <span>用户名:</span>
                <input type="text">
            </div>
            <div id="f1d2">
                <span>密&emsp;码:</span>
                <input type="password">
            </div>
            <div id="f1d3">
                <span>验证码:</span>
                <input type="text">
            </div>
            <button><a href="#">登&emsp;&emsp;录</a></button>
            <div id="f1d4">
                <a href="#">qq&emsp;</a>|
                <a href="#">vx</a>
                <a href="#">立即注册</a>
            </div>
        </form>
    </div>

    <div id="d3">
        <p id="p1">
            <a href="#">关于我们&emsp;|</a>
            <a href="#">&emsp;联系我们&emsp;|</a>
            <a href="#">&emsp;人才招聘&emsp;|</a>
            <a href="#">&emsp;商家入驻&emsp;|</a>
            <a href="#">&emsp;广告服务&emsp;|</a>
            <a href="#">&emsp;手机京东&emsp;|</a>
            <a href="#">&emsp;友情链接&emsp;|</a>
            <a href="#">&emsp;销售联盟&emsp;|</a>
            <a href="#">&emsp;京东社区&emsp;|</a>
            <a href="#">&emsp;京东公益&emsp;|</a>
            <a href="#">&emsp;English&emsp;|</a>
        </p>
    </div>

</div>

</body>
</html>

效果

我的：
在这里插入图片描述
原京东前端图：

小结

多看看页面，好好理解盒子模型，孰能生巧！

作者有话说

博客创作不易，希望看到这里的读者动动你的小手点个赞，如果喜欢的小伙伴可以一键三连，作者大大在这里给大家谢谢了。

小黑神zxs

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习12之盒子模型

盒子模型盒子模型它的学名为框模型！但是我觉得叫它盒子模型更加贴切，方便理解！CSS 框模型所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。示例仿京东前端登录页面（仅模仿练习，无意冒犯）代码<!DOCTYPE html><html lang="en"><head> <meta ch
复制链接

扫一扫