编程作业
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<style>
table{ /*表格设置*/
width:430px;
height:200px;
background:#acf;
border: 1px solid white;
border-radius:10px;
text-align:center;
margin:30px auto;
}
#input{
width:200px;
}
.left{
text-align: left;
}
.right{
text-align: right;
width:130px;
}
ul{
border:1px solid lightgray;
margin:0;
padding: 0;
width:500px;
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:50%;
box-shadow:2px 2px 2px #888;
background: skyblue;
margin-right: 5px;
}
/*类选择器*/
.beta1{
background: red;
}
/*id选择器*/
#beta2{
background: orange;
}
/*属性选择器，属性名*/
ul li[class] {
background: blueviolet;
}
/*属性选择器，属性值*/
ul li[class="beta1"] {
background: greenyellow;
}
/*属性选择器，以指定属性值开头*/
ul li[class^="bt1"]{
background: salmon;
}
/*属性选择器，以指定属性值结束*/
ul li[class$="beta3"]{
background: aqua;
}
/*属性选择器，属性值中包含指定子串*/
ul li[class*="b"]{
background: deeppink;
}
/*后代选择器，派生选择器*/
body ul li {
color: darkred;
font-size: 20px;
}
/*子选择器*/
ul > li[class$="bt2"]{
background: greenyellow;
}
/*相邻选择器*/
ul li[class$="bt3"] ~ * {
/*选择当前元素之后的所有同级元素（不包括当前元素)*/
background: hotpink;
color: black;
}
/*群组选择器*/
h1,p{
font-size: 3rem;
font-weight: lighter;
margin: 0;
}
/*伪类选择器，链接*/
a{
font-size: 3rem;
text-decoration: none;
}
/*访问前*/
a:link{
color:deeppink;
}
/*访问后*/
a:visited{
color:orange;
}
/*获得焦点时*/
a:focus{
color: purple;
}
/*鼠标悬停时*/
a:hover{
color:green;
}
/*鼠标点击时*/
a:active{
color:blue;
}
/*伪类选择器，位置*/
/*选择集合中的第一个元素*/
ul li:first-child{
background-color: #efefef !important;
}
/*选择集合中的最后一个子元素*/
ul li:last-child{
background-color: red;
}
/*选择所有的偶数小球变色*/
/*2n偶数，even偶数，2n+1奇数，odd奇数*/
ul li:nth-child(even){
background-color: purple!important;
}
/*伪类选择器，根据子元素数量*/
/*选择具有唯一子元素的元素*/
ol :only-child {
background-color: greenyellow;
}
/*选择指定类型的唯一子元素*/
ol li:only-of-type{
background-color: greenyellow;
}
/*倒数选择指定位置的元素*/
ul li:nth-last-child(4){
background-color: #aaccff;
}
/*选择指定父级的第二个<li>子元素*/
ol li:nth-of-type(3){
background-color: greenyellow;
}
/*选择页面中内容为空的元素*/
以下代码已在本地测试，因为与本网页的代码冲突所以注释掉
/*:empty{
width:300px;
height: 300px;
background-color: brown;
}
:empty:after{
content:'测试测试'
}
:empty:before{
!*默认插入的元素为行内元素，不支持宽度设定，如果一定要设置可以通过背景图片实现*!
content:url("imange/1.png")
}*/
</style>
</head>
<body>
<form action="" method="post">
<table >
<caption>账号登录</caption>
<tr>
<td class="right">账号：</td>
<td width="250" class="left"><input type="text" name="" value=""></td>
</tr>
<tr>
<td class="right">密码：</td>
<td width="250" class="left"><input type="password" name="" value=""></td>
</tr>
<tr >
<td colspan="2">
<input type="checkbox" name="admin" value="zddl">自动登录
<input type="checkbox" name="admin" value="jzmm">记住密码
<a href="#">找回密码</a>
</td>
</tr>
<tr>
<td colspan="2" align="center;"><input id="input" type="submit" name="submit" value="登录"></td>
</tr>
</table>
</form>
<hr>
<ul> <!--彩球-->
<li class="beta1">1</li>
<li id="beta2">2</li>
<li class="bt1 bt2 bt3">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<h1>群组选择器测试</h1>
<p>群组选择器测试</p>
<a href="https://lz373.cn">PHP自学笔记</a>
<hr>
<ol>
<li>列表项样式</li>
</ol>
<ol>
<li>列表项样式</li>
<li>列表项样式</li>
<li>列表项样式</li>
</ol>
<div></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄作业
