Blogger Information
Blog 87
fans 0
comment 0
visits 59318
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
第七节课作业:列表与链接设置
黄忠倚的博客
Original
640 people have browsed it

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS控制列表</title>
	<style type="text/css">
		.list {
			width: 400px;
			height: 500px;
			background-color: lightskyblue;
			border: 1px solid lightgray;
			border-radius: 2%;
			box-shadow: 5px 5px 10px 0;

		}
		.list h2 {
			padding: 0 15px 0 15px;
			text-indent:2em;
		}
		p {
			padding: 0 30px 0 15px;
			font-size: 14px;
			text-align: right;
			/*color: gray;*/
		}
		.item  {
			/*1. list-style-type: ;
				list-style-type:disc;
				list-style-type: circle;
				list-style-type: square;
				list-style-type: decimal;
				list-style-type: decimal-leading-zero;*/
				padding:15px;
				line-height:2em;
				background-color: lightyellow;
				/*background-color: #f4ff0a;*/
				

		    /*2.list-style-image: url();*/
				list-style-image: url(http://www.mi-888.com/php/zuoye/20180323/play.jpg);
				
			  /*3.list-style-position: ;*/
			    list-style-position: inside;
			    /*list-style-position: outside;*/
		}
		.item li {
			
			background-color: lightyellow;
		}
		.item li a {
			text-decoration: none;
		}
		.item li a:hover {
			text-decoration: underline;
			color: red;
			font-size: 1.05em;
		}
	</style>
</head>
<body>
	<div class="list">
		<h2>第二期全栈开发培训班直播课堂实录更新中...</h2>
		<ul class="item">
		<li><a href="">第二期全栈开发培训班直播课堂实录更新中1</a></li>
		<li><a href="">第二期全栈开发培训班直播课堂实录更新中2</a></li>
		<li><a href="">第二期全栈开发培训班直播课堂实录更新中3</a></li>
		<li><a href="">第二期全栈开发培训班直播课堂实录更新中4</a></li>
		<li><a href="">第二期全栈开发培训班直播课堂实录更新中5</a></li>
		<li><a href="">第二期全栈开发培训班直播课堂实录更新中6</a></li>
		<li><a href="">第二期全栈开发培训班直播课堂实录更新中7</a></li>
		<li><a href="">第二期全栈开发培训班直播课堂实录更新中8</a></li>
		<li><a href="">第二期全栈开发培训班直播课堂实录更新中9</a></li>
		<li><a href="">第二期全栈开发培训班直播课堂实录更新中10</a></li>
		</ul>
		<p>在线观看人数:2018</p>
	</div>
</body>
</html>

运行实例 »

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


Correction status:Uncorrected

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