masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Tutorial troli beli-belah pembangunan JavaScript halaman pengubahsuaian CSS

Gunakan css untuk mengubah suai penampilan

Terutamanya melalui operasi terapung, tajuk dan maklumat terperinci setiap produk dipaparkan dalam baris yang berasingan, dan kemudian tetapkan halaman Jumlah lebar, anda juga boleh menggunakan CSS untuk mengubah suai halaman kami

Kod yang diubah suai adalah seperti berikut: 

<!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">数量</div>
		<div class="subtotal">小计</div>
		<div class="delete">操作</div>
	</div>
	<!--商品内容-->
	<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>


Meneruskan pembelajaran
||
<!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">数量</div> <div class="subtotal">小计</div> <div class="delete">操作</div> </div> <!--商品内容--> <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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492418 permainan