制作一个简单的文章列表页面样式

最新推荐文章于 2023-09-27 15:32:20 发布

请叫我二狗哥

最新推荐文章于 2023-09-27 15:32:20 发布

阅读量6.6k

点赞数 3

分类专栏： CSS与html 文章标签：文章列表 css 响应式设计

cnblog博客：https://www.cnblogs.com/f6056/

本文链接：https://blog.csdn.net/weimob258616/article/details/80021959

版权

本文介绍如何制作一个简单的文章列表页面，并重点解决缩放后排版破坏的问题，探讨响应式设计和CSS中background的定位规则。

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

仿制了一个简单的文章列表页面样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
*{
	margin:0;
	padding:0;
	font-family:宋体;
	
	}
div{
	width:50%;
	height:250px;
	border:1px solid rgb(202,205,158);
	margin:50px auto;
	}
p{
	font-size:1em;
	font-weight:bold;
	background:rgb(202,205,158);

	padding:0.2em;
	}
ul{
	
list-style-type:none;
font-size:0.8em;

}
li{
	padding:0.7em;
	padding-left:1.75em;
	border-bottom:1px dashed black;
	background:url(download.jpg) no-repeat;
	background-size:2em 2em;
	background-position:0 0.1em;
	}
li>span{
	diaplay:inlie-block;
	float:right;
	width:12em;
	}
</style>
</head>
<body>
<div>
<p>>>日志</p>
<ul>
<li>简报IMAX加长版《变形金刚》（Transformers）亲历<span>2017-09-25</span></li>
<li>《变形金刚》发烧友的看图说