MẪU WEBSITE THEO GIÁ
Thay đổi dễ dàng theo phong cách của riêng của bạn
NULLTác giả : Số lượt xem : 9435 lượt xem
Ở bài trước mình có hướng dẫn các bạn làm danh sách sản phẩm và thống kê số liệu của sản phẩm theo dạng bảng. Trong bài này mình sẽ hướng dẫn các bạn làm bảng order như ảnh dưới.
Link DEMO : Bấm Vào Đây
Ta có HTML sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
<div class="wrapper"> <table class="table table-bordered cart_summary"> <thead> <tr> <th class="cart_product">Product</th> <th>Description</th> <th>Avail.</th> <th>Unit price</th> <th>Qty</th> <th>Total</th> <th class="action"><i class="fa fa-trash-o"></i> </th> </tr> </thead> <tbody> <tr> <td class="cart_product"> <a href="#"><img src="product-100x122.jpg" alt="Product"> </a> </td> <td class="cart_description"> <p class="product-name"><a href="#">Frederique Constant </a> </p> <small class="cart_ref">SKU : #123654999</small> <br> <small><a href="#">Color : Beige</a></small> <br> <small><a href="#">Size : S</a></small> </td> <td class="cart_avail"><span class="label label-success">In stock</span> </td> <td class="price"><span>61,19 €</span> </td> <td class="qty"> <input class="form-control input-sm" type="text" value="1"> <a href="#"><i class="fa fa-caret-up"></i></a> <a href="#"><i class="fa fa-caret-down"></i></a> </td> <td class="price"> <span>61,19 €</span> </td> <td class="action"> <a href="#">Delete item</a> </td> </tr> <tr> <td class="cart_product"> <a href="#"><img src="product-100x122.jpg" alt="Product"> </a> </td> <td class="cart_description"> <p class="product-name"><a href="#">Frederique Constant </a> </p> <small class="cart_ref">SKU : #123654999</small> <br> <small><a href="#">Color : Beige</a></small> <br> <small><a href="#">Size : S</a></small> </td> <td class="cart_avail"><span class="label label-success">In stock</span> </td> <td class="price"><span>61,19 €</span> </td> <td class="qty"> <input class="form-control input-sm" type="text" value="1"> <a href="#"><i class="fa fa-caret-up"></i></a> <a href="#"><i class="fa fa-caret-down"></i></a> </td> <td class="price"> <span>61,19 €</span> </td> <td class="action"> <a href="#">Delete item</a> </td> </tr> </tbody> <tfoot> <tr> <td colspan="2" rowspan="2"></td> <td colspan="3">Total products (tax incl.)</td> <td colspan="2">122.38 €</td> </tr> <tr> <td colspan="3"><strong>Total</strong> </td> <td colspan="2"><strong>122.38 €</strong> </td> </tr> </tfoot> </table> <div class="cart_navigation "> <a class="prev-btn" href="#">Continue shopping</a> <a class="next-btn" href="#">Proceed to checkout</a> </div> </div> |
Và Css:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 |
*{ box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; } table{ padding: 0; border: none; border-collapse: collapse; border: 1px solid #ddd; width: 1170px; margin: 50px auto 10px; } table td { padding: 0; border: none; border-collapse: collapse; } a { color: #666; text-decoration: none; } .table tr>td, .table tr>th { border: 1px solid #ddd; padding: 8px; line-height: 1.42857143; vertical-align: top; border-top: 1px solid #ddd; font-weight: normal; } .cart_avail { text-align: center; } img { vertical-align: top; max-width: 100%; } .cart_summary > thead, .cart_summary > tfoot { background: #f7f7f7; font-size: 16px; } .cart_summary td.cart_product { width: 120px; padding: 15px; } .page-order .cart_description { font-size: 14px; } .page-order .product-name { font-size: 16px; } .cart_summary td { vertical-align: middle!important; padding: 20px; } a { color: #666; text-decoration: none; outline: none !important; } .cart_avail .label { white-space: normal; display: inline-block; padding: 6px 10px; font-size: 14px; border-radius: 0px; } .cart_summary .price { text-align: right; } .cart_summary .qty { text-align: center; width: 100px; } .cart_summary .qty a:hover { background: #ff3366; color: #fff; } .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; } .form-control:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); } .input-sm { height: 30px; padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } .cart_summary .qty input { text-align: center; max-width: 64px; margin: 0 auto; border-radius: 0px; border: 1px solid #eaeaea; } .cart_avail .label-success { background: #FFF; border: 1px solid #55c65e; color: #48b151; font-weight: normal; } .cart_summary .qty a { padding: 8px 10px 5px 10px; border: 1px solid #eaeaea; display: inline-block; width: auto; margin-top: 5px; } .cart_summary .action { text-align: center; } .cart_summary .action a { background: url(https://i.imgur.com/wBgtljO.png) no-repeat center center; font-size: 0; height: 9px; width: 9px; display: inline-block; line-height: 24px; } .cart_summary tfoot { text-align: right; } .cart_navigation { margin: 10px 10% 40px; float: left; width: 80%; } .cart_navigation a.prev-btn { float: left; } .cart_navigation a { padding: 10px 20px; border: 1px solid #eaeaea; } .cart_navigation a.prev-btn:before { font: normal normal normal 14px/1 FontAwesome; content: "\f104"; padding-right: 15px; } .cart_navigation a.next-btn { float: right; background: #ff3366; color: #fff; border: 1px solid #ff3366; } .cart_navigation a:hover { background: #ff3366; color: #fff; } |
Từ HTML và CSS ở trên bạn gộp vào sẽ có bảng như trang ảnh.
Hy vọng các bạn sẽ thấy thích bài viết của mình chia sẻ cho các bạn, nếu có bất kỳ vấn đề khó khăn gì hay câu hỏi gì . Bạn đừng ngần ngại , hãy để lại bình luận ở dưới nhé.
Chúc Các Bạn Thành Công !