CSS学习之新闻列表综合案例

最新推荐文章于 2023-03-10 18:27:01 发布

一只追求学习的学渣

最新推荐文章于 2023-03-10 18:27:01 发布

阅读量539

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/weixin_44079801/article/details/106967336

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新闻列表综合案例</title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			.box{
				width:298px;
				height:228px;
				border:1px solid #ccc;
				margin:100px auto;
				padding:15px;
				
			}
			.box h2{
				font-size:18px;
				padding:5px 0;
				border-bottm:1px solid #ccc;
				margin-bottom:10px;
			}
				
			li{
				list-style:none;
			}
				
			.box ul li {
				height:30px;
				line-height:30px;
				border-bottom:1px dashed #ccc;
				background:url(插入图片的路径) no-repeat 5px center;
				/**background-position: 5px center; padding-left:20px为消除文字压住图片的效果，因为该li没有宽度，所以不会让盒子塌陷*/
				
			}
			.box ul li a {
				color:#333;
				font-size:12px;
				text-decoration:none;
				margin-left: 20px;/**mardin padding-left: 20px;为消除文字压住图片的效果*/
				
				
			}
			.box ul li a:hover {
				text-decoration: underline;
			}
		</style>
			
	</head>
	<body>
		<div class="box">
			<h2>最新文章 New Articles</h2>
			<ul>
				<li><a href="#">1123456489</a></li>
				<li><a href="#">2131469872</a></li>
				<li><a href="#">31649+3158</a></li>
				<li><a href="#">41649+3158</a></li>
				<li><a href="#">51649+3158</a></li>
			</ul>
		</div>
	</body>
</html>

一只追求学习的学渣

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习之新闻列表综合案例

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>新闻列表综合案例</title> <style> *{ margin:0; padding:0; } .box{ width:298px; height:228px; border:1px solid #ccc; margin:
复制链接

扫一扫