html练习

最新推荐文章于 2024-09-06 23:41:09 发布

那年牛奶不太纯

最新推荐文章于 2024-09-06 23:41:09 发布

阅读量213

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/Kr__z/article/details/129629780

版权

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>

效果：
在这里插入图片描述

在这里插入图片描述

那年牛奶不太纯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html练习

1.用户注册界面代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="#" method="get"> <table border="1" width="500" height="700"> <t
复制链接

扫一扫