当前位置：首页 > news >正文

html练习

news 2025/8/21 12:40:38

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>