registration page
The previous section mentioned how to display multiple products in a small interface. The code is as follows:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>溢出處理作業(yè)</title>
<style type="text/css">
#img-list{
/* 寬度,高度 */
width:500px;
height:150px;
/*邊框*/
border:1px solid #000;
/*橫向溢出使用滾動條 (auto || scroll)*/
overflow:auto;
}
#img-list>p{
/* 寬度,高度 背景色 */
width:800px;
height:100px;
}
#img-list>p>img{
width:100px;
/*鼠標(biāo)懸停之前，增加邊框，顏色設(shè)置為透明*/
border-radius:5px;
/*border:2px solid transparent;*/
}
/*鼠標(biāo)懸停時(shí)，顯示邊框*/
#img-list>p>img:hover{
border-color:#f00;
box-shadow:3px 3px 0px 0px #ddd;
}
</style>
</head>
<body>
<!-- 1、創(chuàng)建一個(gè) 500px*150px 的div，id : img-list -->
<div id="img-list">
<!-- 2、創(chuàng)建一個(gè) 800px*100px 的p元素 -->
<p>
<img src="p_small_001.jpg">
<img src="p_small_002.jpg">
<img src="p_small_003.jpg">
<img src="p_small_004.jpg">
<img src="p_small_005.jpg">
<img src="p_small_006.jpg">
<img src="p_small_007.jpg">
</p>
</div>
</body>
</html>The running results are as follows :
Write a registration page in this section:
The code is as follows :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>新用戶注冊</title>
<style type="text/css">
#container{
width:600px;
height:500px;
background-color:#434343;
padding:10px 10px;
color:white;
box-sizing:border-box;
}
#title>span{
font-size:18px;
}
#load{
text-decoration:none;
color:white;
font-size:18px;
margin-left:200px;
}
</style>
</head>
<body>
<div id="container">
<p id="title">
<span>新用戶注冊</span>
<a href="#" id="load">直接登錄</a>
</p>
<p>
用戶名：
<input type="text" id="uname" name="uname">
</p>
</div>
</body>
</html>The running results are as follows:
