1.用户注册界面
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="#" method="get">
<table border="1" width="500" height="700">
<thead>
<tr align="center">
<td colspan="2" bgcolor="#ccc">用户注册</td>
</tr>
<tr >
<td bgcolor="#eee" align="center">用户名</td>
<td bgcolor="#eee" align="left"><input type="text" name="name"></td>
</tr>
<tr>
<td bgcolor="#eee" align="center">密码</td>
<td bgcolor="#eee" ><input type="password" name="password"></td>
</tr>
<tr>
<td bgcolor="#eee" align="center">性别</td>
<td bgcolor="#eee" >
<input type="radio" name="sex" value="man" >男
<input type="radio" name="sex" value="woman" >女
</td>
</tr>
<tr>
<td bgcolor="#eee" align="center">爱好</td>
<td bgcolor="#eee">
<input type="checkbox" name="hobby" value="write" >写作
<input type="checkbox" name="hobby" value="music">听音乐
<input type="checkbox" name="hobby" value="sing">唱歌
</td>
</tr>
<tr>
<td bgcolor="#eee" align="center">省份</td>
<td bgcolor="#eee">
<input type="hidden" id="hidden">
<select name="province" id="">
<option >广东省</option>
<option >四川省</option>
<option >广西省</option>
<option >陕西省</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#eee" align="center" width="100" height="150">自我介绍</td>
<td bgcolor="#eee"><textarea name="introduce myself" id="" cols="55" rows="10">
</textarea>
</td>
</tr>
<tr align="center">
<td bgcolor="#ddd" colspan="2">
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</td>
</tr>
</thead>
</table>
</form>
</body>
</html>
效果:
2.仿淘宝商品界面
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.goods{
width: 220px;
height: 360px;
border: 1px solid #f40;
}
img{
width: 220px;
}
.menu>li:hover{
background-color: #f40;
color: white;
}
.menu{
width: 220px;
height: 20px;
background-color: black;
list-style: none;
text-align: center;
padding: 0%;
margin-top: -3.55px;
}
.menu > li{
width: 110px;
border: none;
float: left;
}
.price{
margin-left: 5px;
margin-right: 5px;
}
.price > span{
line-height: 20px;
vertical-align: middle;
}
.price > span:first-child{
color: #f40;
font-size: 20px;
font-weight: bold;
}
.price > span:nth-child(2){
font-size: 12px;
background-color: #f40;
color: white;
padding-left: 1px ;
padding-right: 1px;
}
.price > span:last-child{
float: right;
font-size: 12px;
color: #888;
}
#des{
margin-left: 5px;
margin-right: 5px;
}
#des>a{
color: #444;
font-size: 9px;
text-decoration: none;
}
#des>a:hover{
text-decoration: underline;
color: #999;
}
#des>a:nth-child(2){
color: #f40;
}
#des1{
margin-left: 5px;
margin-right: 5px;
}
#des1 > a{
line-height: 50px;
vertical-align: center;
}
#des1>a{
color: #888;
font-size: 8px;
}
#des1>a:last-child{
float: right;
font-size: 8px;
text-decoration: none;
}
#pho > img{
width: 20px;
height: 20px;
margin-left: 5px;
margin-right: 5px;
}
#pho > :nth-child(2){
margin-left: -5px;
}
#pho > img:last-child{
width: 25px;
height: 25px;
float: right;
}
</style>
</head>
<body>
<div class="container">
<div class="goods">
<img src="./2.png" alt="loading...">
<ul class="menu">
<li>找同款</li>
<li>找相似</li>
</ul>
<div class="price">
<span>¥19999.00</span>
<span>包邮</span>
<span>0人付款</span>
</div>
<div id="des">
<a href="#">欧兰薇雅</a>
<a href="#">欧洲进口水晶珍珠水晶珍珠</a>
<a href="#">戒指</a>
<a href="#">女食指指环心形 礼物</a>
</div>
<div id="des1">
<a href="#">欧兰薇雅旗舰店</a>
<a href="#">上海</a>
</div>
<div id="pho">
<img src="./4.png" alt="loading...">
<img src="./5.png" alt="loading...">
<img src="./6.png" alt="loading...">
</div>
</div>
</div>
</body>
</html>
效果: