案例---新闻列表

最新推荐文章于 2022-02-22 12:46:58 发布

syyy9090

最新推荐文章于 2022-02-22 12:46:58 发布

阅读量413

点赞数

分类专栏： # CSS

本文链接：https://blog.csdn.net/syyy9090/article/details/105130151

版权

CSS 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

本文将探讨如何设计和实现一个高效、用户友好的新闻列表系统。内容涵盖数据结构选择、加载策略、搜索过滤功能以及用户体验优化等方面，帮助读者理解新闻列表背后的工程实践。

摘要由CSDN通过智能技术生成

<!-- <!DOCTYPE html>  自己写的
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新闻列表</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	.box {
		width: 265px;
		height: 332px;
		background-image: url(images/bg.gif);
		margin: 0 auto;
		overflow: hidden;
	}

	.info {
		width: 241px;
		height: 278px;
		margin: 0 auto;
		margin-top: 12px;
		background-color: #fff;

	}
	.em {
		display: inline-block;
		color: #c9e143;
	}
	.title {
		display: inline-block;
		color: #fff;
		line-height: 26px;
	}
	a {
		height: 30px;
		border-bottom: 1px dashed #666666;
		color: #0066d4;
		text-decoration: none;
		font-size: 12px;
		display: block;	
		line-height: 30px; /*文字居中*/
	}

</style>
</head>
<body>
	<div class="box">
		<em>|</em> <h3 class="title">爱宠知识</h3>
		<div class="info">
			<a href="#"><img src="images/tb.gif">&nbsp养狗比养猫对健康更有利</a>
			<a href="#"><img src="images/tb.gif">&nbsp日本正宗柴犬亮相，你怎么看柴犬</a>
			<a href="#"><img src="images/tb.gif">&nbsp狗狗歌曲《新年旺旺》</a>
			<a href="#"><img src="images/tb.gif">&nbsp带宠兜风，开车带宠需要注意什么？</a>
			<a href="#"><img src="images/tb.gif">&nbsp【爆笑】这狗狗太不给力了</a>
			<a href="#"><img src="images/tb.gif">&nbsp狗狗与男童相同着装拍有爱造型照</a>
			<a href="#"><img src="images/tb.gif">&nbsp狗狗各个阶段健康大事件</a>
			<a href="#"><img src="images/tb.gif">&nbsp调皮宠物狗陷在沙发里的搞笑瞬间</a>
			<a href="#"><img src="images/tb.gif">&nbsp为什么每次大小便后，会用脚踢土？</a>
		</div>


	</div>
</body>
</html>

-->

/*老师写的*/
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新闻列表</title>
	<style>
	* {margin: 0; padding: 0;}  /*开头必写*/
	.news {
		height: 307px;
		width: 240px;
		padding: 10px;
		border: 1px solid #009900;
		margin: 0 auto;
		background-image: url(images/bg.gif);
		margin-top: 20px;  /*居中*/
	}
	.news h1 {
		height: 23px;
		border-left: 4px solid #c9e143;
		padding-left: 5px;
		color: #fff;
		font-family: 黑体;
		font-size: 20px;
		line-height: 20px;
	}
	.news ul {
		list-style:none;
		background-color: #fff;
		margin-top: 5px;
		padding:0 10px;
	}
	.news li {
		background: url(images/tb.gif) no-repeat left ;
		height: 30px;
		border-bottom: 1px dashed #666666;
		color: #0066d4;
		text-decoration: none;
		font-size: 12px;
		display: block;	
		line-height: 30px; /*文字居中*/
	}
	.news a {
		color: #0066cc;
		text-decoration: none;
		padding-left: 15px;
	}
	a:hover {
		color: red;
		text-decoration: underline;
	}
</style>
</head>
<body>
	<div class="news">
		<h1>爱宠知识</h1>
		<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>

syyy9090

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
案例---新闻列表

<!-- <!DOCTYPE html> 自己写的<html lang="en"><head> <meta charset="UTF-8"> <title>新闻列表</title> <style> * { margin: 0; padding: 0; } .box { widt...
复制链接

扫一扫

专栏目录