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

来源：互联网发布：知乎汽车金融风控编辑：程序博客网时间：2024/05/19 00:42

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;}

0 0