腾讯课堂新手前端训练营day2-盒子模型训练

本文通过具体的HTML代码展示了如何使用CSS来设置文本颜色、背景颜色、内外边距及边框样式等属性，以此来控制页面元素的布局与显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>盒子模型</title>
<style type="text/css">
body{
margin:0 0 0 0;
font-family:微软雅黑;
font-size:20px;

}
ul {
background: #ddd;
margin: 15px 15px 15px 15px;
padding: 5px 5px 5px 5px;
/* 没有设置边框 */
}
li {
color: white; /* 蓝色文本 */
background: #000; /* 浅灰色背景 */
margin: 20px 20px 20px 20px; /* 左侧外边距为0，其余为20像素*/
padding: 10px 0px 10px 10px; /* 右侧内边距为0，其余10像素 */
list-style: none /* 取消项目符号 */
/* 未设置边框 */
}
li.withborder {
border-style: dashed;
border-width: 5px; /* 设置边框为2像素 */
border-color: black;
margin-top:20px；
}
</style>
</head>
<body>
<ul>
<li>今天是2017年4月19日</li>
<li class="withborder">今天下雨不能去打球了伤心</li>
</ul>
<ul>
<li>今天是2017年4月19日</li>
<li class="withborder">冷咖啡离开了杯垫，我忍住的情绪在很后面</li>
</ul>
<ul>
<li>今天是2017年4月19日</li>
<li class="withborder">拼命想挽回的从前，在我脸上依旧清晰可见</li>
</ul>

</body>
</html>