Hướng dẫn create simple shopping cart using html and css - tạo giỏ hàng đơn giản bằng html và css

CSS3 • JQuery • 15 tháng 8 năm 2016 • 2 phút đọc • August 15, 2016 • 2 minutes READ

Chủ đề: HTML / CSS3 / JavaScriptDiffic Khoa: Thời gian hoàn thành trung gian: 30 phút HTML / CSS3 / JavaScript
Difficulty: Intermediate
Estimated Completion Time: 30 minutes

Trong hướng dẫn này, chúng tôi sẽ tạo ra một giỏ hàng bằng cách sử dụng HTML và CSS3. Chúng tôi sẽ sử dụng phông chữ Google cho hướng dẫn này, cụ thể hơn là Roboto Roboto.Shopping Cart using HTML and CSS3. We’re going to use Google Fonts for this tutorial, more specifically “Roboto.”

HTML

Bước 1: Hãy để tạo ra cấu trúc HTML của chúng tôi. Let’s create our HTML structure.

Đầu tiên, chúng tôi cần một div container, mà chúng tôi sẽ gọi là. Bên trong container, chúng tôi sẽ có một tiêu đề và ba mục sẽ bao gồm:
Inside the container, we will have a title and three items which will include:

• Hai nút - nút Xóa và nút yêu thích
• Hình ảnh sản phẩm
• Tên sản phẩm và mô tả
• các nút sẽ điều chỉnh số lượng sản phẩm
• Tổng giá

    

      
      

        Shopping Bag
      

      
      

        

          
          
        

        

          
        

        

          Common Projects
          Bball High
          White
        

        

          
            
          
          
          
            
          
        

        
$549
      

      
      

        

          
          
        

        

          
        

        

          Maison Margiela
          Future Sneakers
          White
        

        

          
            
          
          
          
            
          
        

        
$870
      

      
      

        

          
          
        

        

          
        

        

          Our Legacy
          Brushed Scarf
          Brown
        

        

          
            
          
          
          
            
          
        

        
$349
      
    

CSS

Hãy chắc chắn rằng bạn bao gồm phông chữ chúng tôi sử dụng cho hướng dẫn này. Bây giờ, hãy để thêm một số phong cách vào cơ thể của chúng ta với các dòng sau:
Now, let’s add some style to our body with the following lines:

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: #7EC855;
  font-family: 'Roboto', sans-serif;
}

Tuyệt vời, bây giờ, hãy để Lôi làm cho giỏ hàng của chúng tôi là 750 × 423 và tạo kiểu cho nó để trông đẹp. Lưu ý rằng chúng tôi đang sử dụng FlexBox, vì vậy chúng tôi đặt nó để hiển thị Flex và tạo cột Flex Direction, bởi vì theo mặc định, hướng Flex được đặt làm hàng.

Trình tạo mẫu email trực tuyến

Với bưu thiếp, bạn có thể tạo và chỉnh sửa các mẫu email trực tuyến mà không cần bất kỳ kỹ năng mã hóa nào! Bao gồm hơn 100 thành phần để giúp bạn tạo các mẫu email tùy chỉnh nhanh hơn bao giờ hết.

Hãy thử các sản phẩm miễn phí khác

.shopping-cart {
  width: 750px;
  height: 423px;
  margin: 80px auto;
  background: #FFFFFF;
  box-shadow: 1px 2px 3px 0px rgba[0,0,0,0.10];
  border-radius: 6px;

  display: flex;
  flex-direction: column;
}

Tiếp theo, hãy tạo kiểu cho mục đầu tiên, là tiêu đề, bằng cách thay đổi chiều cao thành 60px và cho nó một số kiểu dáng cơ bản, và ba mặt hàng tiếp theo là các sản phẩm giỏ hàng, sẽ làm cho chúng có chiều cao 120px và đặt chúng để hiển thị flex .

.title {
  height: 60px;
  border-bottom: 1px solid #E1E8EE;
  padding: 20px 30px;
  color: #5E6977;
  font-size: 18px;
  font-weight: 400;
}

.item {
  padding: 20px 30px;
  height: 120px;
  display: flex;
}

.item:nth-child[3] {
  border-top:  1px solid #E1E8EE;
  border-bottom:  1px solid #E1E8EE;
}

Bây giờ chúng tôi đã tạo kiểu cho cấu trúc cơ bản của giỏ hàng của chúng tôi. Hãy để phong cách sản phẩm của chúng tôi theo thứ tự.
Let’s style our products in order.

Các yếu tố đầu tiên là các nút xóa và yêu thích. Tôi luôn luôn yêu thích hoạt hình nút tim Twitter, tôi nghĩ rằng nó sẽ trông tuyệt vời trên giỏ hàng của chúng tôi, hãy để thực hiện nó.
I’ve always loved Twitter’s heart button animation, I think it would look great on our Shopping Cart, let’s implement it.

.buttons {
  position: relative;
  padding-top: 30px;
  margin-right: 60px;
}
.delete-btn,
.like-btn {
  display: inline-block;
  Cursor: pointer;
}
.delete-btn {
  width: 18px;
  height: 17px;
  background: url["delete-icn.svg"] no-repeat center;
}

.like-btn {
  position: absolute;
  top: 9px;
  left: 15px;
  background: url['twitter-heart.png'];
  width: 60px;
  height: 60px;
  background-size: 2900%;
  background-repeat: no-repeat;
}

Chúng tôi đặt lớp là hoạt động của lớp học khi chúng tôi nhấp vào nút để làm động nó bằng jQuery, nhưng đây là phần tiếp theo.

.is-active {
  animation-name: animate;
  animation-duration: .8s;
  animation-iteration-count: 1;
  animation-timing-function: steps[28];
  animation-fill-mode: forwards;
}

@keyframes animate {
  0%   { background-position: left;  }
  50%  { background-position: right; }
  100% { background-position: right; }
}

Tiếp theo, là hình ảnh sản phẩm cần ký quỹ phải 50px.

.image {
  margin-right: 50px;
}

Let’s add some basic style to  product name and description.
.description {
  padding-top: 10px;
  margin-right: 60px;
  width: 115px;
}

.description span {
  display: block;
  font-size: 14px;
  color: #43484D;
  font-weight: 400;
}

.description span:first-child {
  margin-bottom: 5px;
}
.description span:last-child {
  font-weight: 300;
  margin-top: 8px;
  color: #86939E;
}

Sau đó, chúng ta cần thêm một phần tử số lượng, trong đó chúng ta có hai nút để thêm hoặc loại bỏ số lượng sản phẩm. Đầu tiên, làm cho CSS và sau đó chúng tôi sẽ làm cho nó hoạt động bằng cách thêm một số JavaScript.

.quantity {
  padding-top: 20px;
  margin-right: 60px;
}
.quantity input {
  -webkit-appearance: none;
  border: none;
  text-align: center;
  width: 32px;
  font-size: 16px;
  color: #43484D;
  font-weight: 300;
}

button[class*=btn] {
  width: 30px;
  height: 30px;
  background-color: #E1E8EE;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}
.minus-btn img {
  margin-bottom: 3px;
}
.plus-btn img {
  margin-top: 2px;
}

button:focus,
input:focus {
  outline:0;
}

Và cuối cùng, đó là tổng giá của sản phẩm.

.total-price {
  width: 83px;
  padding-top: 27px;
  text-align: center;
  font-size: 16px;
  color: #43484D;
  font-weight: 300;
}

Chúng ta cũng làm cho nó phản hồi bằng cách thêm các dòng mã sau:

@media [max-width: 800px] {
  .shopping-cart {
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  .item {
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .image img {
    width: 50%;
  }
  .image,
  .quantity,
  .description {
    width: 100%;
    text-align: center;
    margin: 6px 0;
  }
  .buttons {
    margin-right: 20px;
  }
}

Đó là nó cho CSS.

JavaScript

Hãy cùng làm cho trái tim hoạt hình khi chúng ta nhấp vào nó bằng cách thêm mã sau:

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: #7EC855;
  font-family: 'Roboto', sans-serif;
}

Mát mẻ! Bây giờ hãy để cho các nút số lượng hoạt động.

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: #7EC855;
  font-family: 'Roboto', sans-serif;
}

Và đây là phiên bản cuối cùng của chúng tôi:

Hướng dẫn được thực hiện! Tôi hy vọng bạn thích nó và học được điều gì đó mới. Nếu bạn có bất kỳ câu hỏi nào, hãy ping tôi!

Tải xuống UI Giỏ hàng

Giống như những gì bạn đang đọc? Đăng ký những câu chuyện hàng đầu của chúng tôi.

Làm thế nào để bạn lập một danh sách mua sắm trong HTML?

Làm cách nào để thêm biểu tượng giỏ hàng trong HTML?

Làm thế nào để bạn làm một giỏ hàng?