作业1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业1</title>
</head>
<body>
<style>
span{
width: 300px;
height: 30px;
background-color:rgba(33, 44, 83, 0.926);
border-radius:5%;
box-shadow:3px 3px 3px gray;
}
li{
list-style:none;
display:inline-block;
border: 1px soldred;
color:aliceblue;
text-shadow:3px 3px 3px gray;
}
</style>
<span>
<li>游戏1</li>
<li style="background-color: brown;">游戏2</li>
<li>游戏3</li>
<li>游戏4</li>
<li>游戏5</li>
<li>游戏6</li>
<li>游戏7</li>
<li>游戏8</li>
<li>游戏9</li>
</span>
</body>
</html>
作业2
盒子模型的类型
标准盒子模型：元素的宽度和高度只包括内容的尺寸，不包括内边距、边框和外边距。
IE盒子模型：元素的宽度和高度包括了内容、内边距和边框的尺寸。
盒子模型的布局方式
块级盒子：从上到下排列，可以设置宽度、高度、内边距、边框和外边距。
行内盒子：从左到右排列，不能设置宽度、高度，但可以设置内边距、边框和外边距。
CSS属性对盒子模型的影响
width 和 height：定义元素的内容区域的宽度和高度。
padding：定义内边距。
border：定义边框。
margin：定义外边距。
box-sizing：定义元素的盒子模型类型，可以是 content-box 或 border-box。
盒子模型的应用
盒子模型广泛应用于网页布局中，通过控制元素的宽度、高度、内边距和外边距，可以实现各种复杂的页面布局，如创建网页布局、按钮和表单元素等。
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/2301_81590938/article/details/140340292
3429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
