Blogger Information
Blog 26
fans 0
comment 0
visits 16594
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
第五次作业
瘦不下来的博客
Original
557 people have browsed it

第五次作业代码:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>作业</title>
	
	<style type="text/css">


	ul {   
			padding: 0;
			margin: 0;
			width: 450px;
			border: 1px dashed #666;
			padding: 10px 5px;
		}

		ul:after {  /*子块撑开父块*/
			content:'';  /*在子元素尾部添加空内容元素*/
			display: block;  /*并设置为块级显示*/
			clear:both;   /*清除二边的浮动*/
		}
		
		li { 
			list-style: none; /*去掉默认列表项样式*/
			float: left;  /*左浮动*/
			width: 40px;  /*设置宽度*/
			height: 40px; /*设置高度*/
			line-height: 40px; /*文本垂直居中*/
			text-align: center; /*文本水平居中*/
			border-radius: 50%; /*设置边框圆角*/				
			background: skyblue; /*背景色天蓝*/
			margin-right: 5px; /*每个球之间的右外边距*/
		}
		

       #no1
       {
       	background-color: red;
       }


       .black {
       	background-color: yellow;
       }



      li[class="yellow"] {

      	background-color: gold;
      }

     

 
     li[class ^="fa"]  {

    	background-color:  yellowgreen;

      
}

	</style>
    
	
		
</head>

<body>
  
<ul>
		<li id="no1">1</li>
		<li class="black">2</li>
		<li class="yellow">3</li>
		<li class="fat">4</li>
		<li id="blue">6</li>
		
	</ul>

 

</body>
</html>

运行实例 »

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

手抄:

1.png

2.png


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