新闻列表综合案列-CSDN博客

本文链接：https://blog.csdn.net/Valentine_T/article/details/107523730

在这里插入图片描述

要点：

盒子box有宽度，padding值会撑开盒子,为保证盒子实际大小不变，宽就要改变宽高，即减去padding值
去掉列表的默认样式：list-style: none;
去掉a的默认下划线：text-decoration: none;
一般情况下li 没有宽度所有padding不会撑开盒子
块级盒子水平居中：margin：0 auto；
单行文本垂直居中：行高等于高；
背景图片移动位置：background-position： 5px center;(水平：5px 垂直：居中)；
鼠标移动到 li 上时显示下划线：text-decoration: underline;
代码如下：

<title>新闻列表综合案列</title>
	<style>
		* {
			margin: 0;
			padding:0;
		}
		li {
			/* 取消列表样式 */
			list-style: none;
		}
		.box {
			/* width: 328px;
			height: 227px; */
			/* 为保证盒子再加了padding值后大小不变，改变 宽高*/
			width: 298px;
			height: 198px;
			border: 1px solid #ccc;
			margin: 100px auto;
			/* 如果给了padding值 会撑大盒子 */
			padding: 15px;
			background: url(images/line.jpg);
		}
		.box h2 {
			font-size: 18px;			
			padding: 5px 0px;
			border-bottom: 1px solid #ccc;
		}
		.box ul li {
			height: 30px;
			line-height: 30px;
			border-bottom: 1px dashed #ccc;
			background: url(images/arr.jpg) no-repeat 5px center;
		}
		.box ul li a {
			color: #333;
			font-size: 12px;
			text-decoration: none;
			margin-left:20px;
		}
		.box ul li a:hover{
			text-decoration: underline;
		}
	</style>
</head>
<body>
	<div class="box">
		<!-- 标题 -->
		<h2>实时新闻</h2>
		<!-- 列表 -->
		<ul>
			<li><a href="#">对不起，这是一条让人心碎的新闻!</a>
			<li><a href="#">震惊！阿猫和阿狗居然公开斗殴</a></li>
			<li><a href="#">哇！星光，荡开宇宙，七儿，闪耀其中</a></li>
			<li><a href="#">呼啦，八岐大兔跳舞啦</a></li>
			<li><a href="#">歌姬小姐姐太漂亮了吧</a></li>
		</ul>
	</div>
</body>