web页面中盒子的运用

最新推荐文章于 2023-03-01 17:12:17 发布

liulangmao8918

最新推荐文章于 2023-03-01 17:12:17 发布

阅读量930

点赞数 2

本文链接：https://blog.csdn.net/liulangmao8918/article/details/52237237

版权

页面效果图

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新闻</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		a{
			color:#06c;
			font-size:12px;
			text-decoration:none;
			line-height:30px;
		}
		a:hover{
			color:red;
			text-decoration: underline;
		}
		li{
			border-bottom:1px dashed #666;
			background:url(tb.gif) no-repeat left ;
			text-indent:1em;
			height:30px;
		}
		ul{
			list-style: none;
			margin-top: 5px;
			background-color:#fff;
			padding:0 10px;
		}
		h2{
			font-size: 20px;
			color:#fff;
			font-family:"黑体";
			border-left:4px solid #c9e143;
			padding-left:5px;
		}
		div{
			width:240px; 
			margin:20px auto;
			background-image:url(bg.gif);
			padding:10px;
			border:1px solid #090 ;
		}
	</style>
</head>
<body>
	<div>
		<h2> 爱宠知识</h2>
		<ul>
			<li><a href="#">养狗比养猫对健康更有利</a></li>
			<li><a href="#">日本正宗柴犬亮相，你怎么看柴犬</a></li>
			<li><a href="#">狗狗歌曲《新年旺旺》</a></li>
			<li><a href="#">带宠兜风，开车带宠需要注意什么？</a></li>
			<li><a href="#">【爆笑】这狗狗太不给力了</a></li>
			<li><a href="#">狗狗与男童相同着装拍有爱造型照</a></li>
			<li><a href="#">狗狗各个阶段健康大事件</a></li>
			<li><a href="#">调皮宠物狗陷在沙发里的搞笑瞬间</a></li>
			<li><a href="#">为什么每次大小便后，会用脚踢土？</a></li>
		</ul>
	</div>
</body>
</html>