ul 标签样式如::
width 宽度设置为
300px 像素、
height 高度为
150px 像素、
border 边框为(
1px 像素、显示是实线、边框颜色为蓝色)、样式。
ul 标签中的
li 标签设置样式如:
width 宽度设置为
280px 像素、
height 高度为
30px 像素
line-height 行高为
30px 像素、
border 边框为(
1px 像素、显示是实线、边框颜色为红色)、样式。如果园友没有掌握
border 边框的知识,爱学习的园友不用担心以后会写
border 边框的文章,若有想了解
border 边框知识的园友可以去W3school官网 进行学习。代码块
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>属性值为outside使用方式</title>
<style>
ul {
width: 300px;
height: 150px;
border: 1px solid #00F;
}
ul li {
width: 280px;
height: 30px;
line-height: 30px;
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li>成功不是打败别人,而是改变自己。</li>
<li>成功不是打败别人,而是改变自己。</li>
<li>成功不是打败别人,而是改变自己。</li>
</ul>
</body>
</html>
结果图

现在大家应该很清楚的看到了列表前面项目的符号默认在
ul 标签和
li 标签之间的位置,现在我们知道了列表前面的项目符号的默认位置,那我们进行
list-style-position










