level 1
楼上是骗子
2018年12月22日 14点12分
level 2
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
fieldset{
width: 300px;
margin: 0 auto;
background: #28ff28;
color: red;
}
.box{
border: 1px solid #844220;
margin: 10px 0;
box-sizing: border-box;
padding: 5px 10px;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>练习1</legend>
<div>
<label for="name">姓名:</label>
<div>
<input type="text" id="name">
</div>
</div>
<div class="box">
<div>性别：</div>
<div>
<input type="radio" id="male" value="male">
<label for="male">男</label>
</div>
<div>
<input type="radio" id="female" value="female">
<label for="female">女</label>
</div>
</div>
<div class="box">
<div>
爱好：
</div>
<div>
<input type="checkbox" id="option_a" value="a">
<label for="option_a">A</label>
</div>
<div>
<input type="checkbox" id="option_b" value="b">
<label for="option_b">B</label>
</div>
<div>
<input type="checkbox" id="option_c" value="c">
<label for="option_c">C</label>
</div>
</div>
<div>
<input type="submit" id="button1" value="提交">
<input type="submit" id="button2" value="重置">
</div>
</fieldset>
</form>
</body>
</html>
level 2
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
.container{
width: 300px;
height: 210px;
border: 2px solid black;
padding: 30px 60px;
margin: 0 auto;
display: flex;
box-sizing: border-box;
}
.container h1{
width: 100%;
background: green;
text-align: center;
margin: auto;
padding: 20px 0;
color: red;
}
</style>
</head>
<body>
<div class="container">
<h1 class="name">张三</h1>
</div>
</body>
</html>
level 2
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
.container{
width: 300px;
height: 300px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.box{
width: 100px;
height: 100px;
}
.box-red{
background: red;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box box-red"></div>
<div class="box"></div>
<div class="box box-red"></div>
<div class="box box-red"></div>
<div class="box box-red"></div>
<div class="box"></div>
<div class="box box-red"></div>
<div class="box"></div>
</div>
</body>
</html>
level 2
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
.container{
width: 900px;
height: 500px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.box1{
background: #2FFFFF;
height: 10%;
}
.box2{
background: #159;
flex: 1;
display: flex;
}
.box3{
background: #0066FF;
height: 08%;
}
.left{
width: 30%;
background: #FFCE66;
}
.right{
width: 70%;
background: #9A2FFF;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="box3"></div>
</div>
</body>
</html>
level 2
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
.container{
width: 500px;
height: 400px;
margin: 0 auto;
border: 5px solid red;
display: flex;
flex-wrap: wrap;
}
.box{
width: 90px;
height: 90px;
margin: 5px;
border-radius: 100%;
background: #008200;
display: flex;
}
.box h1{
margin: auto;
color: #fff;
font-size: 40px;
}
.red{
background: red;
}
.box:nth-child(2n){
background: #0000FF;
}
</style>
</head>
<body>
<div class="container">
<div class="box red"><h1>1</h1></div>
<div class="box"><h1>2</h1></div>
<div class="box"><h1>3</h1></div>
<div class="box"><h1>4</h1></div>
<div class="box"><h1>5</h1></div>
<div class="box"><h1>6</h1></div>
<div class="box"><h1>7</h1></div>
<div class="box"><h1>8</h1></div>
<div class="box"><h1>9</h1></div>
<div class="box"><h1>10</h1></div>
<div class="box"><h1>11</h1></div>
<div class="box"><h1>12</h1></div>
<div class="box"><h1>13</h1></div>
<div class="box"><h1>14</h1></div>
<div class="box"><h1>15</h1></div>
<div class="box"><h1>16</h1></div>
<div class="box"><h1>17</h1></div>
<div class="box"><h1>18</h1></div>
<div class="box"><h1>19</h1></div>
<div class="box"><h1>20</h1></div>
</div>
</body>
</html>
