收藏
批改状态：合格
老师批语：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业2</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 500px;
/*height: 700px;*/
/*border: 1px solid red;*/
margin: 200px auto;
}
#box ul{
margin: 50px auto;
padding: 0 5px;
}
#box ul li{
list-style: none;
display: inline-block;
width: 40px;
height: 40px;
margin: 0 auto;
/*background: green;*/
text-align: center;
line-height: 40px;
border-radius: 50%;
border: 2px solid #000000;
box-shadow: 5px 5px 10px #666666;
}
/*伪类选择器*/
/*ul下第一个子元素，first-child*/
/*ul :first-child{*/
/* background-color: darkred;*/
/*}*/
/*ul下最后一个子元素,last-child*/
/*ul :last-child{*/
/* background: yellow;*/
/*}*/
/*ul下的偶数子元素，ul :nth-child(2n或者even)*/
ul :nth-child(even){
/*background: yellow;*/
}
/*ul下的奇数子元素，ul :nth-child(2n-1或者odd)*/
ul :nth-child(odd){
/*background: green;*/
}
/*ul下倒数第二个子元素选中*/
ul :nth-last-child(2){
/*background: coral;*/
}
ul li:nth-of-type(4){
background: darkred;
}
/*表单样式*/
#from{
width: 500px;
height: 500px;
border: 1px solid #666666;
margin: 0 auto;
}
/*获取标点焦点*/
form :focus{
background: #ccc;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>1</li>
<li>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>
</div>
<div id="from">
<!-- 演示表单选择器 -->
<form action="">
<p>
<label for="email">邮箱:</label>
<input type="email" id="email">
</p>
<p>
<label for="password">密码:</label>
<input type="password" id="password">
</p>
<p>
<input type="radio" id="week" name="save" value="7" checked><label for="week">保存一周</label>
<input type="radio" id="month" name="save" value="30"><label for="month">保存一月</label>
</p>
<p>
<button>登录</button>
</p>
</form>
</div>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
