博客列表 >前端基础-HTML网页制作之表单及CSS选择器(2018年8月15日)

前端基础-HTML网页制作之表单及CSS选择器(2018年8月15日)

大白鲸的博客
大白鲸的博客原创
2018年08月16日 19:38:54657浏览

作业1:

作业照片20180815.jpg

作业2:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用选择器</title>
	<style>
	 	标签选择器:
		ul{
			padding: 0;
			margin: 0;
			border: 1px dashed #666;
			padding: 10px 5px;
		}
		/*子块撑开父级区块*/
		ul:after{
			content: ' ';
			display: block;
			clear: both;
		}
		ul li{
			list-style: none;
			float: left;
			width: 40px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			border-radius: 20%;
			box-shadow: 2px 2px 2px #ccc;
			background-color: skyblue;
			margin: 5px;
		}
		ul li[class$="pig"] + li{
			background-color: pink;
			color: black;			
		}
	</style>
</head>
<body>
	<ul>
		<li id="item1">1</li>
		<li class="cat pig dog">2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
	</ul>

</body>
</html>

运行实例 »

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


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