css学习3

最新推荐文章于 2024-10-13 17:00:37 发布

你若信

最新推荐文章于 2024-10-13 17:00:37 发布

阅读量61

点赞数

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_44152890/article/details/121143442

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、第三种方式

a {
	text-decoration : none;
}

/*
	cursor : 鼠标样式，pointer是小手，hand也是，但是hand有浏览器兼容问题。建议使用pointer
*/
#baiduSpan {
	text-decoration: underline;
	cursor: pointer;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在HTML中使用CSS样式的第三种方式：引入外部独立的css文件</title>
		
		<!--引入css-->
		<link rel="stylesheet" type="text/css" href="css/1.css" />
		
	</head>
	<body>
		
		<a href="http://www.baidu.com">百度</a>
		
		<span id="baiduSpan">点击我链接到百度哦！</span>
	</body>
</html>

2、列表样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表样式</title>
		
		<style type="text/css">
			ul{
				/*list-style-type: none;*/
				/*list-style-type: circle ;*/
				list-style-type: square ;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>中国
				<ul>
					<li>北京</li>
					<li>上海</li>
					<li>重庆</li>
				</ul>
			</li>
			<li>美国</li>
			<li>俄国</li>
		</ul>
	</body>
</html>

3、绝对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS样式的绝对定位</title>
		<style type="text/css">
			#div1{
				background-color: red;
				border: 1px black solid;
				width: 300px;
				height: 300px;
				position : absolute; /*绝对定位*/
				left: 100px;
				top: 100px;
			}
		</style>
	</head>
	<body>
		
		<div id="div1"></div>
		
	</body>
</html>