亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Tutoriel de panier de développement JavaScript Page de modification CSS

Utilisez CSS pour modifier l'apparence

Principalement grace à des opérations flottantes, le titre et les informations détaillées de chaque produit sont affichés sur une ligne séparée, puis définir la page La largeur totale, vous pouvez également utiliser CSS pour modifier notre page

Le code modifié est le suivant : 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
 <meta name="format-detection" content="telephone=no" /> 
<title>簡易購物車</title>
<meta charset="utf-8" />
<style>	
.shop{
	width:400px;
	background-color:#f0f0f0;
	text-align:center;
}
.shop2{
	text-align:center;
	clear:both;
	border:1px solid black;
    height:21px;
}
.goods{
	float:left;
	width:100px;
}	
.price{
	float:left;
	width:50px;
}	
.number{
	float:left;
	width:110px;
}	
.subtotal{
	float:left;
	width:50px;
	margin-top:2px;
}	
.delete{
	float:left;
	width:35px;
	margin-left:5px;
}	
.text{
	width: 22px;
	text-align:center;
}
</style>
</head>
<body>
	<!--購物車標題-->
	<div class="shop">
		<div class="title">簡易購物車</div>
		<div class="goods">商品</div>
		<div class="price">單價</div>
		<div class="number">數(shù)量</div>
		<div class="subtotal">小計</div>
		<div class="delete">操作</div>
	</div>
	<!--商品內(nèi)容-->
	<div class="shop2" id="shop2">
		<form>
		<div class="goods">小米MIX </div>
		<div class="price" id="price">5000</div>
		<div class="number">
			<input type="button" value="-" />
			<input type="tetx" value="1" class="text" id="text" />
			<input type="button" value="+" />
		</div>
		<div class="subtotal" id="subtotal">5000</div>
		<div class="delete"><a href="#">刪除</a></div>
		<form>
	</div>
</body>
</html>


Formation continue
||
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no" /> <title>簡易購物車</title> <meta charset="utf-8" /> <style> .shop{ width:400px; background-color:#f0f0f0; text-align:center; } .shop2{ text-align:center; clear:both; border:1px solid black; height:21px; } .goods{ float:left; width:100px; } .price{ float:left; width:50px; } .number{ float:left; width:110px; } .subtotal{ float:left; width:50px; margin-top:2px; } .delete{ float:left; width:35px; margin-left:5px; } .text{ width: 22px; text-align:center; } </style> </head> <body> <!--購物車標題--> <div class="shop"> <div class="title">簡易購物車</div> <div class="goods">商品</div> <div class="price">單價</div> <div class="number">數(shù)量</div> <div class="subtotal">小計</div> <div class="delete">操作</div> </div> <!--商品內(nèi)容--> <div class="shop2" id="shop2"> <form> <div class="goods">小米MIX </div> <div class="price" id="price">5000</div> <div class="number"> <input type="button" value="-" /> <input type="tetx" value="1" class="text" id="text" /> <input type="button" value="+" /> </div> <div class="subtotal" id="subtotal">5000</div> <div class="delete"><a href="#">刪除</a></div> <form> </div> </body> </html>
soumettreRéinitialiser le code