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>
