web前端作业（二）

最新推荐文章于 2024-08-22 17:38:39 发布

再卷还是菜

最新推荐文章于 2024-08-22 17:38:39 发布

阅读量277

点赞数 10

文章标签：前端

本文链接：https://blog.csdn.net/xiaolin_ss/article/details/140279706

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业二.1</title>
    <style>
        div{
            width: 100%;
            height: 35px;
            border: 1px solid black;
            background-color: white;
            box-shadow: 10px 10px 10px grey;
            border-radius: 5%;
            text-align: center;
        }
        li{
          list-style: none; 
          display: inline-block; 
          border: 0px solid black;
        }
       a{
        text-decoration: none;
       
       }
       form{
        display: inline-block;
       }
       [type="text"]{
        width: 350px;
       }
       #li{
        border: 1px solid black;
        border-radius: 5%;
        background-color: chocolate;
        width: 50px;
        text-align: center;
       }
       #li1{
        border: 1px solid black;
        border-radius: 30%;
        background-color:chocolate;
        text-align:center;
        width: 50px;
        
       }
    input{
        border-radius: 10%;
    }
    img{
        border-radius: 50%;
       height: 25px;
    }
    </style>
</head>
<body>
    <div>
        <li><b><a href="https://www.baidu.com" target="_blank" >CSDN</a></b></li>&nbsp;&nbsp;
        <li><a href="https://baidu.com" target="_blank" >博客</a></li>&nbsp;&nbsp;
        <li><a href="https://baidu.com" target="_blank" >下载</a></li>&nbsp;&nbsp;
        <li><a href="https://baidu.com" target="_blank" >学习</a></li>&nbsp;&nbsp;
        <li><a href="https://baidu.com" target="_blank" >社区</a></li>&nbsp;&nbsp;
        <li><a href="https://baidu.com" target="_blank" >C知道</a></li>&nbsp;&nbsp;
        <li><a href="https://baidu.com" target="_blank" >GitCode</a></li>&nbsp;&nbsp;
        <li><a href="https://baidu.com" target="_blank" >InsCode</a></li>&nbsp;&nbsp;
        <li><a href="https://baidu.com" target="_blank" >会议</a></li>&nbsp;&nbsp;
        <form action="https://www.baidu.com">
            <li><input type="text"></li>
        </form>
        <li id="li"><a href="https://www.baidu.com" target="_blank" >搜索</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="https://www.baidu.com">
            <img src="./屏幕截图 2024-07-08 213607.png" alt="">
        </a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <li><a href="https://www.baidu.com" target="_blank" >会员中心</a></li>&nbsp;&nbsp;
        <li><a href="https://www.baidu.com" target="_blank" >消息</a></li>&nbsp;&nbsp;
        <li><a href="https://www.baidu.com" target="_blank" >历史</a></li>&nbsp;&nbsp;
        <li><a href="https://www.baidu.com" target="_blank" >创作中心</a></li>&nbsp;&nbsp;
        <li id="li1"><a href="https://www.baidu.com" target="_blank"  >发布</a></li>
    </div>
</body>
</html>

什么是盒子模型？
盒子模型是一个用于描述HTML和CSS中元素布局的概念。

在Web开发中，每个HTML元素都可以看作是一个矩形的盒子，这个盒子由内容区域、内边距、边框和外边距组成。

组成：
内容区域（content）：盒子中呈现实际内容的部分，例如文本、图片等。
内边距（padding）：内容区域与边框之间的空白区域，用于控制内容与边框之间的距离。
边框（border ）：包围内容区域和内边距的线条，可以设定边框的样式、宽度和颜色等。
外边距（margin）：盒子与周围元素之间的空白区域，用于控制盒子与其他元素之间的距离。

1.上面图中蓝色方框指的是html元素，也是内容部分context，可以是一张图片、一个h1标题、一个表格、一个表单等。但是他的大小并不一定是100×100，而是可以修改的。属性width和height用于修改内容部分的大小。

2.绿色部分，也就是padding部分，指的是内边距，是元素内容与其最近一层束缚框的距离，类似于在一个方格里写字我们写在方格的中间，而与边框保持一定距离一样。

3.浅橘色部分，也就是border部分，指的是这个边框的宽度，我们常见的就是宽度为1，也就是一条线。

4.深橘色部分，也就是margin部分，也叫边缘部分，类似于人与人之间保持一定的距离一样，他的作用是保证html元素之间的距离，比如网页上的两种图片需要保持一定的间距才显得好看。

5.padding，border，margin实际上是每个html元素都存在的css属性。他们可以对元素的上下左右四个方向进行限制。

6.当存在盒子里嵌套盒子时，也就是html的标签嵌套时，里面的元素默认以左上角作为停靠点。

再卷还是菜

关注

10
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
web前端作业（二）

但是他的大小并不一定是100×100，而是可以修改的。4.深橘色部分，也就是margin部分，也叫边缘部分，类似于人与人之间保持一定的距离一样，他的作用是保证html元素之间的距离，比如网页上的两种图片需要保持一定的间距才显得好看。2.绿色部分，也就是padding部分，指的是内边距，是元素内容与其最近一层束缚框的距离，类似于在一个方格里写字我们写在方格的中间，而与边框保持一定距离一样。3.浅橘色部分，也就是border部分，指的是这个边框的宽度，我们常见的就是宽度为1，也就是一条线。
复制链接

扫一扫