Blogger Information
Blog 250
fans 3
comment 0
visits 322815
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
2018/3/20作业(css控制双色球)
梁凯达的博客
Original
1257 people have browsed it

重点部分:

样式分为:内联样式、外部样式、内部样式三种

1、元素选择器:直接用标签的形式

2、ID 选择器:#+id

3、类选择器:class,用.+类

4、父子选择器:例(ul li)

5、通配选择器:ul*

6、子元素选择器:ul>li(锁定ul下的li标签)

7、相邻兄弟选择器:例(#item1+li[选中#item1下面的一个li标签])

代码部分:

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户头像设计</title>
		<style>
			 #box1{
			 	height: 50px;
				border: dashed 1px;
				clear: both;
				
			}
			span{
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background: #000000;
				text-align: center;
				line-height: 50px;
				color: #FFFFFF;			
				display: block;
				margin: 0px;
				float: left;
				}
			#c2{
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background:  blueviolet;
				text-align: center;
				line-height: 50px;
				margin: 0px;
				float: left;
			}
			div .c3{
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background:   #DC143C;
				text-align: center;
				line-height: 50px;
				margin: 0px;
				float: left;
			}
			div>.c4:before{
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background:  #A52A2A;
				text-align: center;
				line-height: 50px;
				margin: 0px;
				float: left;
				content:'4';
			}
			div>.c4+.c5:before{
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background:  #FFA500;
				text-align: center;
				line-height: 50px;
				margin: 0px;
				float: left;
				content:'5';}
			span*:before{
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background: #000000;
				text-align: center;
				line-height: 50px;
				color: #FFFFFF;			
				display: block;
				margin:0px;
				float: left;
			}
			div[class="both7"]:before
			{
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background:  darkcyan;
				text-align: center;
				line-height: 50px;
				color: #FFFFFF;		
				float: left;
				content: '7';
			}
			#box3{
				float: left;
				width: 200px;
				height: 300px;
			}
			.p1,.p3{
				color: red;
			}
			.p2{
				color: #008B8B;
			}
		    p:last-child{
		    	color: red;
		    }
		    p{
		    	
		    }
		    div p:only-child{
		    	color: #FFA500;
		    	}
		    .div3 p:only-of-type{
		    	color:  #8A2BE2;
		    }
		</style>
	</head>
	<body>
		<div iD="box1">
		<span>1</span><!--用元素选择器的方法-->
		<div ID="c2">2</div><!--用类选择器的方法-->
		<div class="c3">3</div><!--用父子选择器的办法-->
		<div class="c4"></div><!--子选择器方式,此处使用了伪类选择器-->
		<div class="c5"></div><!--用相邻兄弟选择器方法-->
		<span id="box2">6</span><!--使用统配选择器方法-->
		<div class="both7"></div><!--使用指定单词选择器方法-->
		</div>
		<div id="box3">
		<p class="p1">这是第一行代码,变红</p>
		<div><p>这是第二行代码,变绿</p></div>
		<p class="p3">跟第一行一起变红</p>
		<p class="p4">跟第二行代码一起变绿</p>
		<div class="div3">
		<p class="p5">变紫色</p>
		<strong class="p7">跟第一行一样变红</strong>
		</div>
		</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