0704作业2

<!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>

相关文章