博客列表 >3月21日作业

3月21日作业

木易阳的博客
木易阳的博客原创
2018年03月26日 17:43:14775浏览

3月21日作业:基本选择器,属性选择器

实例

<!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; 
		}
	
		#item1 {
		}

		.green {
		}
		
		ul li {  
			color: white;
		}

		ul * {
		}

		ul > li { 
			background-color: blue;
		}

		#item2 + li {
			background-color: black; 
		}
		
		#item2 ~ li {
			background-color: coral; 
		}

	</style>
</head >
<body >
	<ul>
		<li id="item1">php</li>
		<li class="green">中</li>
		<li class="green">文</li>
		<li class="">网</li>
		<li>欢</li>
		<li id="item2">迎</li>
		<li>你</li>
		<li>的</li>
		<li>观</li>
		<li>看</li>
	</ul>

</body>
</html>

运行实例 »

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

手抄基本选择器案例代码

微信图片_20180326174253.jpg微信图片_20180326174238.jpg

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议