Web前端开发-关注热榜

最新推荐文章于 2022-08-24 20:29:55 发布

Zero-To-One

最新推荐文章于 2022-08-24 20:29:55 发布

阅读量377

点赞数

分类专栏： # HTML+CSS 文章标签： html css html5 列表

本文链接：https://blog.csdn.net/weixin_37580383/article/details/106168734

版权

HTML+CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

HTML部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>关注热榜</title>
		<link rel="stylesheet" type="text/css" href="../css/关注热榜.css" />
	</head>
	<body>
		<div id="div-newList">
			<p id="p-listTitle">关注热榜</p>
			<ul>
				<li><a href=""><span>1</span>武汉无症状感染者传染性很低</a></li>
				<li><a href=""><span>2</span>忘记28年房子现住户回应</a></li>
				<li><a href=""><span>3</span>新增本土确诊多来自聚集性疫情</a></li>
				<li><a href=""><span>4</span>孙春兰赴吉林市指导防疫工作</a></li>
				<li><a href=""><span>5</span>澳航空公司破产空姐转行当矿工</a></li>
				<li><a href=""><span>6</span>吉林市关停所有个体诊所和门诊部</a></li>
				<li><a href=""><span>7</span>周扬青雪梨直播</a></li>
				<li><a href=""><span>8</span>弟弟捐造血干细胞救姐姐</a></li>
				<li><a href=""><span>9</span>高校开学首日食堂免费吃</a></li>
			</ul>
		</div>
	</body>
</html>

CSS部分

/* 窗体背景颜色 */
body {
	background-color: #EEE7DF;
}

/* 设置列表整体样式 */
#div-newList {
	width: 260px;
	height: 313px;
	background-color: white;
}

/* 设置列表标题 有默认上下外边距16px */
#p-listTitle {
	width: 260px;
	height: 35px;
	/* 设置垂直居中 */
	line-height: 35px;
	/* 标题向右缩进 */
	text-indent: 10px;
	font-weight: bold;
	color: white;
	background-color: #E91859;
	margin: 0;
}

/* 设置ul */
#div-newList ul {
	margin: 0;
	padding: 0;
	/* background-color: #0066CA; */
}

/* 设置li */
#div-newList li {
	width: 250px;
	height: 30px;
	line-height: 30px;
	border-bottom: dashed 1px #666;
	padding-left: 5px;
}

/* 设置 a */
#div-newList a {
	font-size: 13px;
	color: #616161;
	/* 去除下划线 */
	text-decoration: none; 
}

#div-newList a:hover {
	color: #E91556;
}

/* 设置 span */
#div-newList span {
	width: 20px;
	height: 20px;
	text-align: center;
	line-height: 20px;
	color: white;
	background-color: #777777;
	font-weight: bold; 
	/* 变成圆 */
	border-radius: 50%;
	/* 块元素:宽高生效 副作用span将占据一行 所以需要再设置float */
	display: block;
	float: left;
	margin-top: 5px;
	margin-right: 10px;
}

#div-newList a:hover span {
	background: #E91556;
}

Zero-To-One

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web前端开发-关注热榜

HTML部分<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>关注热榜</title> <link rel="stylesheet" type="text/css" href="../css/关注热榜.css" /> </head> <body> <div id="div-newList"&..
复制链接

扫一扫