2021-05-04

最新推荐文章于 2021-11-04 09:08:34 发布

原创最新推荐文章于 2021-11-04 09:08:34 发布 · 74 阅读

CC 4.0 BY-SA版权

边框样式

边框样式属性
属性	说明
border-width	边框的宽度
border-style	边框的外观
border-color	边框的颜色

想要为一个元素定义边框样式，必须同时设置以上三个属性才会有效果。

border-width

border-width属性取值是一个像素值。

border-style

border-style属性取值
属性值	说明
none	无样式
dashed	虚线
solid	实线

border-color

border-color取值可以是“关键字”或“16进制RGB值”

<!DOCTYPE html>
<html>
<head>
	<title>白鹿为霜</title>
	<style type="text/css">
		div{
			width: 100px;
			height: 30px;
			border: 1px dashed red;
		}
		img{
			width: 200px;
			height: 200px;
			border-width: 2px;
			border-style: solid;
			border-color: blue;

		}
	</style>
</head>
<body>
	<div></div>
	<img src="img/chifan.jpg">

</body>
</html>

局部样式

<!DOCTYPE html>
<html>
<head>
	<title>白鹿为霜</title>
	<style type="text/css">
		div{
			width: 100px;
			height: 60px;
			border-top: 2px solid red;/*上边框*/
			border-right: 2px solid yellow;/*右边框*/
			border-left: 2px solid blue;/*左边框*/
			border-bottom: 2px solid green;/*下边框*/

		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

列表样式

在CSS中，不管是有序列表还是无序列表，都使用list-style-type属性来定义列表项符号。

list-style-type属性取值（有序列表）
属性值	说明
decimal	阿拉伯数字：1、2、3...（默认值）
lower-roman	小写罗马数字：i、ii、iii...
upper-roman	大写罗马数字：I、II、III...
lower-alpha	小写英文字母：a、b、c..
upper-alpha	大写英文字母：A、B、C...

list-style-type属性取值（无序列表）
属性值	说明
disc	实心圆（默认）
circle	空心圆
square	正方形

<!DOCTYPE html>
<html>
<head>
	<title>白鹿为霜</title>
	<style type="text/css">
		ol{list-style-type: lower-alpha;}
		ul{list-style-type: circle;}
		
	</style>
</head>
<body>
	<ol>
		<li>HTML</li>
		<li>CSS</li>
		<li>JavaSCript</li>
	</ol>
	<ul>
		<li>HTML</li>
		<li>CSS</li>
		<li>JavaSCript</li>
	</ul>
</body>
</html>

列表项图片

<!DOCTYPE html>
<html>
<head>
	<title>白鹿为霜</title>
	<style type="text/css">
		ul{list-style-image: url(img/花.png);}
	</style>
</head>
<body>
		<ul>
		<li>HTML</li>
		<li>CSS</li>
		<li>JavaSCript</li>
	    </ul>
	
</body>
</html>

课后习题练习

<!DOCTYPE html>
<html>
<head>
	<title>白鹿为霜</title>
	<style type="text/css">
		ul{
			list-style-type: none;
		}
		a{
			text-decoration: none;
			color: pink;
		}

		
	</style>
</head>
<body>
	<ul>
		<li><a href="https://www.baidu.com" target="_blank">Top1:百度</a></li>
		<li><a href="https://www.taobao.com/" target="_blank">Top2:淘宝</a></li>
		<li><a href="https://www.signa.com/" target="_blank">Top3:新浪</a></li>
		<li><a href="https://www.wangyi.com/" target="_blank">Top4:网易</a></li>
		<li><a href="https://www.souhu.com/" target="_blank">Top5:搜狐</a></li>
	</ul>
</body>
</html>