CSS练习一之内部样式表、外部样式表、边框

最新推荐文章于 2023-04-29 21:49:11 发布

Andone_hsx

最新推荐文章于 2023-04-29 21:49:11 发布

阅读量784

点赞数

分类专栏： CSS基础文章标签： html web css

本文链接：https://blog.csdn.net/Andone_hsx/article/details/54025589

版权

CSS基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、利用内部样式表实现

<!doctype html>
<html>
		<head>
			<title>Dome</title>
			<meta charset="utf-8">
			<style>
				#container{
					width:360px;
					height:120px;
					overflow:auto;
				}
				#container p{
					width:600px;
					height:70px;
				}
				img{
					border:2px solid transparent;
				} 
				img:hover{
					border:2px solid red;
				}
			</style>
		</head>
		<body>
			<div id="container">
				<p>
					<img src="images/p_small_001.jpg">
					<img src="images/p_small_002.jpg">
					<img src="images/p_small_003.jpg">
					<img src="images/p_small_004.jpg">
					<img src="images/p_small_005.jpg">
					<img src="images/p_small_006.jpg">
					<img src="images/p_small_007.jpg">
				</p>
			</div>
		</body>
</html>

注：如果注释掉上面的

img{
					border:2px solid transparent;
				}

当鼠标悬停和未悬停时，商品图片会出现，放大和缩小的效果；

原因是：当鼠标悬停在图片上，出现边框，增加2px，未悬停时，边框消失。反复如此，就会出现2px的增加和减少的情况，从而造成图像的放大和缩小效果

2、利用外部样式表实现

index.html

<!doctype html>
<html>
		<head>
			<title>Demo</title>
			<meta charset="utf-8">
			<link rel="stylesheet" href="css/container.css">
		</head>
		<body>
			<div id="container">
				<p>
					<img src="images/p_small_001.jpg">
					<img src="images/p_small_002.jpg">
					<img src="images/p_small_003.jpg">
					<img src="images/p_small_004.jpg">
					<img src="images/p_small_005.jpg">
					<img src="images/p_small_006.jpg">
					<img src="images/p_small_007.jpg">
				</p>
			</div>
		</body>
</html>

container.css

#container{
	width:360px;
	height:120px;
	overflow:auto;
}

#container p{
	width:600px;
	height:70px;
}

img{
	border:2px solid  transparent;
}

img:hover{
	border:2px solid red;
}