Blogger Information
Blog 42
fans 0
comment 1
visits 26133
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
3月21日作业-CSS样式
日薪月e的博客
Original
493 people have browsed it

3月21日作业-CSS样式

代码:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3月22日-css样式</title>
	<style type="text/css">
		div{
			width:240px;
			background-color: lightblue;
			padding: 5px;
		}
		ul{
			list-style: none;
		}
		.hot{
			color:red;
		}
		.top1{
			
			font-size: 20px;
		}
		.top2{
			
			font-size: 18px;
		}
		.top3{
			
			font-size: 16px;
		}
		li[class *="top"]{
			color:red;
			font-style: italic;
		}
		#li-01{
			color: green;
		}
		#li-01 + li{
			font-weight: bold;
			color:blue;
		}
		#li-tb{
			color: brown;
		}

		#li-tb ~ li{
			color: orange;
		}
		*[id]{
			font-family: "楷体";
			font-size: 30px;
		}
	</style>
</head>
<body>
	<div>
		<h3 class="hot">热点新闻</h3>
		<ul>
			<li class="top1">热点新闻1</li>
			<li class="top2">热点新闻2</li>
			<li class="top3">热点新闻3</li>
			<li>热点新闻4</li>
			<li>热点新闻5</li>
		</ul>
		<h3>综合新闻</h3>
		<ul>
			<li>综合新闻1</li>
			<li>综合新闻2</li>
			<li id="li-01">综合新闻3</li>
			<li>综合新闻4</li>
			<li>综合新闻5</li>
		</ul>
		<h3>一线动态</h3>
		<ul>
			<li>一线动态1</li>
			<li>一线动态2</li>
			<li>一线动态3</li>
			<li>一线动态4</li>
			<li>一线动态5</li>
		</ul>
		<h3>安全形势</h3>
		<ul>
			<li id="li-tb">安全形势1</li>
			<li>安全形势2</li>
			<li>安全形势3</li>
			<li>安全形势4</li>
			<li>安全形势5</li>
		</ul>
	</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

手写代码:

01.jpg

02.jpg


Correction status:qualified

Teacher's comments:作业已检查! 完成的不错!大赞!!
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post