css小练

L081773

于 2022-03-29 20:37:50 发布

阅读量38

点赞数

文章标签： web

本文链接：https://blog.csdn.net/L081773/article/details/123831333

版权

1.html结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/热点专题.css"/>
	</head>
	<body>
		<div class="box">
			<div class="box1">
				<h1><span class="s1"></span>热点专题</h1>
			</div>
			<div class="box2">
				<div class="box3">
					<div class="box5">
						<img src="../img/5QY_6G%7DG5A%5BN%25%60(0%7B@7%7BXN2.png" >
					</div>
					<div class="box6">
						庆祝中国共产党成立100周年庆祝中国共产党成立100周年庆祝中国共产党成立100周年
					</div>
				</div>
			<div class="box7">
				<ul>
					<li><span class="span"></span>庆祝中国共产党成立100周年</li>
					<li><span class="span"></span>
					<span style="display: inline-block;width: 450px;">庆祝中国共产党成立100周年庆祝中国共产党成立100周年庆祝中国共产党成立100周年</span>
					</li>
					<li><span class="span"></span>
					<span style="display: inline-block;width: 450px;">庆祝中国共产党成立100周年庆祝中国共产党成立100周年</span>
					</li>
				</ul>
			</div>
			</div>
		</div>
	</body>
</html>

2.css样式

*{
	margin: 0px;
	padding: 0px;
}
.box{
	width: 500px;
	height: 400px;
	margin: auto;
}
.box1{
	width: 500px;
	height: 80px;
	background-color: #D0D0D4;
	margin-left: 10px;
}
.box3{
	margin-top: 20px;
	height: 100px;
}
.box5{
	margin-left: 10px;
	float: left;
}
.box6{
	width: 320px;
	text-align: left;
	float: right;
	font-size: 18px;
	line-height: 27px;
}
.box7{
	text-align: left;
	width: 500px;
	margin-left: 10px;

	
}
.s1{
	border-left: red 8px solid;
	margin-right: 10px;
	
}
h1{
	
	margin-left: 5px;
	padding-left: 10px;
	line-height: 80px;
	
}
.box .box2 .box7 ul li{
	display: block;
	font-size: 18px;
	line-height: 40px;
}
img{
	width: 150px;
	height: 85px;
	
}
.span{
	display: inline-block;
	width:10px;
	height: 10px;
	background-color: #CCCCCC;
	margin-right: 5px;
	float: left;
	margin-top: 16px;
	
}

3.效果图

L081773

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css小练

1.html结构<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="../css/热点专题.css"/> </head> <body> <div class="box"> <d
复制链接

扫一扫