programming html

Tôi có thể tạo trang web Thương mại điện tử bằng HTML không?

Nếu bạn là nhà phát triển hoặc nhà thiết kế, bạn cần học cách tạo trang đích bằng HTML, CSS, SCSS và JavaScript

Khi bạn đã thành thạo với CSS và SCSS, bạn có thể mở rộng kiến thức của mình bằng cách thêm một số khung CSS như Bootstrap, Tailwind CSS, Foundation, Bulma, v.v. vào ngăn xếp của bạn

Một số khung CSS này ngăn bạn viết mã thừa và tập trung hơn vào phần logic của trang đích

Các khung giao diện người dùng đáp ứng này cung cấp lưới, HTML, SASS hoặc SCSS và các phần tử Giao diện người dùng CSS, mẫu và mã bao gồm bố cục, điều hướng, cảnh báo, nút, kiểu chữ, biểu mẫu, v.v.

Home Shop Pages About Us Lookups

Để xem bản xem trước của HTML trong trình duyệt, hãy mở dự án bằng tiện ích mở rộng máy chủ trực tiếp

Thanh điều hướng bây giờ có thể được coi là một khung xương vì vậy chúng ta cần thêm một số phần thịt vào nó bằng CSS

Tôi đã sử dụng CSS Flexbox để định vị logo, menu điều hướng và các biểu tượng ở bên phải theo chiều ngang


.header {
  margin-bottom: 4rem;

  /* ========== Navigation =========== */
  .navbar {
    padding: 2.5rem 0;
    position: relative;
    z-index: 1;

    .row {
      justify-content: space-between;

      .nav-list {
        a {
          display: inline-block;
          padding: 1rem;
          font-size: 1.7rem;
          font-weight: 500;
          color: var[--black-color];

          &.user-link {
            display: none;
          }

          &:not[:last-child] {
            margin-right: 0.5rem;
          }

          &:hover {
            color: var[--primary-color];
          }
        }
      }

      .icons {
        .icon {
          font-size: 2.2rem;
          padding: 0.5rem;
          color: var[--black-color];
          cursor: pointer;
          justify-content: center;
          position: relative;

          &:not[:last-child] {
            margin-right: 3rem;
          }

          span {
            display: block;
            width: 1rem;
            height: 1rem;
            background-color: var[--primary-color];
            border: 1px solid var[--black-color];
            position: absolute;
            top: 0.3rem;
            right: 0.4rem;
            border-radius: 50%;
          }

          &:hover {
            background-color: #f4f4f4;
          }
        }
      }
    }
  }

  .hamburger,
  .close {
    display: none;
  }
}

Đây là những gì nó trông giống như trong trình duyệt

Để làm cho menu điều hướng phản hồi nhanh trên tất cả các thiết bị, chúng tôi sẽ sử dụng thuộc tính vị trí Flexbox và CSS

Trên màn hình rộng, chúng tôi sẽ cung cấp cho menu điều hướng một thuộc tính bên phải là -100% để ẩn menu và khi


npm install sass -g

9 có lớp thứ hai là


sass ./scss/styles.scss ./css/styles.css --watch

0 thì thuộc tính bên phải bây giờ sẽ là 0 để hiển thị nó

Chúng tôi sẽ sử dụng JavaScript để tự động thêm lớp


sass ./scss/styles.scss ./css/styles.css --watch

0 bất cứ khi nào biểu tượng bánh hamburger được nhấp vào

Tóm lại, chúng tôi chỉ muốn làm cho menu điều hướng xuất hiện từ bên phải khi


npm install sass -g

9 có lớp thứ hai là


sass ./scss/styles.scss ./css/styles.css --watch

Sao chép và dán truy vấn phương tiện bên dưới ngay sau kiểu của. bánh hamburger &. Thoát


npm install sass -g

Sao chép và dán JavaScript để chuyển đổi lớp


sass ./scss/styles.scss ./css/styles.css --watch

0 trên phần tử


npm install sass -g


npm install sass -g

Đây là những gì nó trông giống như

Cách thêm tiêu đề anh hùng vào trang web thương mại điện tử thời trang

Phần anh hùng bao gồm một người phụ nữ ngồi trong xe đẩy ở bên phải và một số văn bản ở bên trái

Nội dung văn bản sẽ bao gồm một khoảng, một tiêu đề tùy chỉnh 1, một đoạn văn và một nút kêu gọi hành động

Sao chép và dán HTML cho phần anh hùng ngay sau thẻ điều hướng kết thúc


npm install sass -g

Dưới đây là mã SASS cho phần Hero, tôi đã sử dụng


npm install sass -g

Đây là bản xem trước trong trình duyệt

Cách thêm biểu mẫu đăng ký và đăng nhập vào trang web thương mại điện tử thời trang

Form đăng ký và đăng nhập của website Thương mại điện tử thời trang hơi phức tạp nên mình phải viết bài khác cho nó

Sau này tôi sẽ bao gồm liên kết đến bài viết đó nhưng bạn có thể tải xuống mã nguồn vì nó đã được bao gồm trong mã nguồn

Cách thêm phần Bộ sưu tập sản phẩm bằng tính năng lọc

Phần bộ sưu tập sản phẩm bao gồm một thanh trượt và các chức năng lọc của trang web Thương mại điện tử thời trang

Với thanh trượt, chúng tôi sẽ sử dụng thư viện SwiperJS để làm cho cuộc sống của chúng tôi dễ dàng hơn

Bạn có thể sử dụng các thư viện thanh trượt khác như GlideJS cũng được viết bằng vanilla Javascript

Đây là HTML cho phần bộ sưu tập sản phẩm


/* ========== Google Fonts =========== */
@import url['//fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'];
@import url['//fonts.googleapis.com/css2?family=Aclonica&display=swap'];

/* ========== CSS Variables =========== */
:root {
  --primary-color: #ff5e3a;
  --default-color: #4f5665;
  --black-color: #000;
  --grey-color: #f0f0f0;
  --white-color: #fff;
  --lightpink: #ffcce0;
  --blue: #1a1aff;
  --custom: #1a1aff;
  --color: #4d4d4d;
  --lightblue: #ccccff;
  --box-shadow-1: 0 5px 15px rgba[0, 0, 0, 0.1];
  --box-shadow-2: 0 5px 15px rgba[255, 94, 58, 0.2];
  --gradient: linear-gradient[to bottom, #fccb90, #ff9a9e];
  --btn-gradient: linear-gradient[to bottom, #ff5151 50%, #ff5e3a];
}

*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var[--black-color];
  background-color: var[--white-color];
}

h1,
h2,
h3,
h4 {
  color: var[--black-color];
  line-height: 1.2;
  font-weight: 500;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style-type: none;
}

section {
  padding: 5rem 0 5rem;
  overflow: hidden;
}

p {
  line-height: 3rem;
}

img {
  max-width: 100%;
  height: auto;
}

/* ========== Custom Classes =========== */
.container {
  max-width: 120rem;
  padding: 0 3rem;
  margin: auto;
}

@media [min-width: 1600px] {
  .container {
    max-width: 160rem;
  }
}

@media [max-width: 567px] {
  .container {
    padding: 0 1rem;
  }
}

.d-flex {
  display: flex;
  align-items: center;
}

/* ========== Header =========== */

/* ========== Navigation =========== */

/* ========== Hero Area =========== */

/* ========== Collection =========== */

/* ========== Arrivals =========== */

/* ========== Categories Product =========== */

/* ========== Statistics =========== */

/* ========== Blog =========== */

/* ========== Footer =========== */

/* ========== User Form =========== */

Bạn có thể thấy HTML chỉ chứa một sản phẩm thử nghiệm mà tôi đã nhận xét. Sau đó, chúng tôi sẽ sử dụng Javascript để tìm nạp sản phẩm từ tệp JSON và hiển thị động trên trình duyệt

Dưới đây là các kiểu SASS cho phần bộ sưu tập sản phẩm


/* ========== Google Fonts =========== */
@import url['//fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'];
@import url['//fonts.googleapis.com/css2?family=Aclonica&display=swap'];

/* ========== CSS Variables =========== */
:root {
  --primary-color: #ff5e3a;
  --default-color: #4f5665;
  --black-color: #000;
  --grey-color: #f0f0f0;
  --white-color: #fff;
  --lightpink: #ffcce0;
  --blue: #1a1aff;
  --custom: #1a1aff;
  --color: #4d4d4d;
  --lightblue: #ccccff;
  --box-shadow-1: 0 5px 15px rgba[0, 0, 0, 0.1];
  --box-shadow-2: 0 5px 15px rgba[255, 94, 58, 0.2];
  --gradient: linear-gradient[to bottom, #fccb90, #ff9a9e];
  --btn-gradient: linear-gradient[to bottom, #ff5151 50%, #ff5e3a];
}

*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var[--black-color];
  background-color: var[--white-color];
}

h1,
h2,
h3,
h4 {
  color: var[--black-color];
  line-height: 1.2;
  font-weight: 500;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style-type: none;
}

section {
  padding: 5rem 0 5rem;
  overflow: hidden;
}

p {
  line-height: 3rem;
}

img {
  max-width: 100%;
  height: auto;
}

/* ========== Custom Classes =========== */
.container {
  max-width: 120rem;
  padding: 0 3rem;
  margin: auto;
}

@media [min-width: 1600px] {
  .container {
    max-width: 160rem;
  }
}

@media [max-width: 567px] {
  .container {
    padding: 0 1rem;
  }
}

.d-flex {
  display: flex;
  align-items: center;
}

/* ========== Header =========== */

/* ========== Navigation =========== */

/* ========== Hero Area =========== */

/* ========== Collection =========== */

/* ========== Arrivals =========== */

/* ========== Categories Product =========== */

/* ========== Statistics =========== */

/* ========== Blog =========== */

/* ========== Footer =========== */

/* ========== User Form =========== */

Khi làm việc với SwiperJS, bạn cần tạo một thể hiện của lớp Swiper và truyền hai đối số, bộ chọn lớp hoặc id của phần tử HTML thanh trượt và một đối tượng tùy chọn chứa một số tùy chỉnh

Sao chép và dán mã trượt vào sản phẩm. tập tin js


/* ========== Google Fonts =========== */
@import url['//fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'];
@import url['//fonts.googleapis.com/css2?family=Aclonica&display=swap'];

/* ========== CSS Variables =========== */
:root {
  --primary-color: #ff5e3a;
  --default-color: #4f5665;
  --black-color: #000;
  --grey-color: #f0f0f0;
  --white-color: #fff;
  --lightpink: #ffcce0;
  --blue: #1a1aff;
  --custom: #1a1aff;
  --color: #4d4d4d;
  --lightblue: #ccccff;
  --box-shadow-1: 0 5px 15px rgba[0, 0, 0, 0.1];
  --box-shadow-2: 0 5px 15px rgba[255, 94, 58, 0.2];
  --gradient: linear-gradient[to bottom, #fccb90, #ff9a9e];
  --btn-gradient: linear-gradient[to bottom, #ff5151 50%, #ff5e3a];
}

*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var[--black-color];
  background-color: var[--white-color];
}

h1,
h2,
h3,
h4 {
  color: var[--black-color];
  line-height: 1.2;
  font-weight: 500;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style-type: none;
}

section {
  padding: 5rem 0 5rem;
  overflow: hidden;
}

p {
  line-height: 3rem;
}

img {
  max-width: 100%;
  height: auto;
}

/* ========== Custom Classes =========== */
.container {
  max-width: 120rem;
  padding: 0 3rem;
  margin: auto;
}

@media [min-width: 1600px] {
  .container {
    max-width: 160rem;
  }
}

@media [max-width: 567px] {
  .container {
    padding: 0 1rem;
  }
}

.d-flex {
  display: flex;
  align-items: center;
}

/* ========== Header =========== */

/* ========== Navigation =========== */

/* ========== Hero Area =========== */

/* ========== Collection =========== */

/* ========== Arrivals =========== */

/* ========== Categories Product =========== */

/* ========== Statistics =========== */

/* ========== Blog =========== */

/* ========== Footer =========== */

/* ========== User Form =========== */

Đây là mã Javascript để tìm nạp các sản phẩm từ tệp JSON


/* ========== Google Fonts =========== */
@import url['//fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'];
@import url['//fonts.googleapis.com/css2?family=Aclonica&display=swap'];

/* ========== CSS Variables =========== */
:root {
  --primary-color: #ff5e3a;
  --default-color: #4f5665;
  --black-color: #000;
  --grey-color: #f0f0f0;
  --white-color: #fff;
  --lightpink: #ffcce0;
  --blue: #1a1aff;
  --custom: #1a1aff;
  --color: #4d4d4d;
  --lightblue: #ccccff;
  --box-shadow-1: 0 5px 15px rgba[0, 0, 0, 0.1];
  --box-shadow-2: 0 5px 15px rgba[255, 94, 58, 0.2];
  --gradient: linear-gradient[to bottom, #fccb90, #ff9a9e];
  --btn-gradient: linear-gradient[to bottom, #ff5151 50%, #ff5e3a];
}

*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var[--black-color];
  background-color: var[--white-color];
}

h1,
h2,
h3,
h4 {
  color: var[--black-color];
  line-height: 1.2;
  font-weight: 500;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style-type: none;
}

section {
  padding: 5rem 0 5rem;
  overflow: hidden;
}

p {
  line-height: 3rem;
}

img {
  max-width: 100%;
  height: auto;
}

/* ========== Custom Classes =========== */
.container {
  max-width: 120rem;
  padding: 0 3rem;
  margin: auto;
}

@media [min-width: 1600px] {
  .container {
    max-width: 160rem;
  }
}

@media [max-width: 567px] {
  .container {
    padding: 0 1rem;
  }
}

.d-flex {
  display: flex;
  align-items: center;
}

/* ========== Header =========== */

/* ========== Navigation =========== */

/* ========== Hero Area =========== */

/* ========== Collection =========== */

/* ========== Arrivals =========== */

/* ========== Categories Product =========== */

/* ========== Statistics =========== */

/* ========== Blog =========== */

/* ========== Footer =========== */

/* ========== User Form =========== */

Đây là mã JS để hiển thị động các dự án trên màn hình


/* ========== Google Fonts =========== */
@import url['//fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'];
@import url['//fonts.googleapis.com/css2?family=Aclonica&display=swap'];

/* ========== CSS Variables =========== */
:root {
  --primary-color: #ff5e3a;
  --default-color: #4f5665;
  --black-color: #000;
  --grey-color: #f0f0f0;
  --white-color: #fff;
  --lightpink: #ffcce0;
  --blue: #1a1aff;
  --custom: #1a1aff;
  --color: #4d4d4d;
  --lightblue: #ccccff;
  --box-shadow-1: 0 5px 15px rgba[0, 0, 0, 0.1];
  --box-shadow-2: 0 5px 15px rgba[255, 94, 58, 0.2];
  --gradient: linear-gradient[to bottom, #fccb90, #ff9a9e];
  --btn-gradient: linear-gradient[to bottom, #ff5151 50%, #ff5e3a];
}

*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var[--black-color];
  background-color: var[--white-color];
}

h1,
h2,
h3,
h4 {
  color: var[--black-color];
  line-height: 1.2;
  font-weight: 500;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style-type: none;
}

section {
  padding: 5rem 0 5rem;
  overflow: hidden;
}

p {
  line-height: 3rem;
}

img {
  max-width: 100%;
  height: auto;
}

/* ========== Custom Classes =========== */
.container {
  max-width: 120rem;
  padding: 0 3rem;
  margin: auto;
}

@media [min-width: 1600px] {
  .container {
    max-width: 160rem;
  }
}

@media [max-width: 567px] {
  .container {
    padding: 0 1rem;
  }
}

.d-flex {
  display: flex;
  align-items: center;
}

/* ========== Header =========== */

/* ========== Navigation =========== */

/* ========== Hero Area =========== */

/* ========== Collection =========== */

/* ========== Arrivals =========== */

/* ========== Categories Product =========== */

/* ========== Statistics =========== */

/* ========== Blog =========== */

/* ========== Footer =========== */

/* ========== User Form =========== */

Dưới đây là mã JS để lọc các sản phẩm dựa trên danh mục của chúng


/* ========== Google Fonts =========== */
@import url['//fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'];
@import url['//fonts.googleapis.com/css2?family=Aclonica&display=swap'];

/* ========== CSS Variables =========== */
:root {
  --primary-color: #ff5e3a;
  --default-color: #4f5665;
  --black-color: #000;
  --grey-color: #f0f0f0;
  --white-color: #fff;
  --lightpink: #ffcce0;
  --blue: #1a1aff;
  --custom: #1a1aff;
  --color: #4d4d4d;
  --lightblue: #ccccff;
  --box-shadow-1: 0 5px 15px rgba[0, 0, 0, 0.1];
  --box-shadow-2: 0 5px 15px rgba[255, 94, 58, 0.2];
  --gradient: linear-gradient[to bottom, #fccb90, #ff9a9e];
  --btn-gradient: linear-gradient[to bottom, #ff5151 50%, #ff5e3a];
}

*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var[--black-color];
  background-color: var[--white-color];
}

h1,
h2,
h3,
h4 {
  color: var[--black-color];
  line-height: 1.2;
  font-weight: 500;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style-type: none;
}

section {
  padding: 5rem 0 5rem;
  overflow: hidden;
}

p {
  line-height: 3rem;
}

img {
  max-width: 100%;
  height: auto;
}

/* ========== Custom Classes =========== */
.container {
  max-width: 120rem;
  padding: 0 3rem;
  margin: auto;
}

@media [min-width: 1600px] {
  .container {
    max-width: 160rem;
  }
}

@media [max-width: 567px] {
  .container {
    padding: 0 1rem;
  }
}

.d-flex {
  display: flex;
  align-items: center;
}

/* ========== Header =========== */

/* ========== Navigation =========== */

/* ========== Hero Area =========== */

/* ========== Collection =========== */

/* ========== Arrivals =========== */

/* ========== Categories Product =========== */

/* ========== Statistics =========== */

/* ========== Blog =========== */

/* ========== Footer =========== */

/* ========== User Form =========== */

Cách thêm phần hàng mới

Phần mới đến khá đơn giản vì nó bao gồm ba hình ảnh có lớp phủ văn bản

Đây là HTM cho phần mới đến


/* ========== Google Fonts =========== */
@import url['//fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'];
@import url['//fonts.googleapis.com/css2?family=Aclonica&display=swap'];

/* ========== CSS Variables =========== */
:root {
  --primary-color: #ff5e3a;
  --default-color: #4f5665;
  --black-color: #000;
  --grey-color: #f0f0f0;
  --white-color: #fff;
  --lightpink: #ffcce0;
  --blue: #1a1aff;
  --custom: #1a1aff;
  --color: #4d4d4d;
  --lightblue: #ccccff;
  --box-shadow-1: 0 5px 15px rgba[0, 0, 0, 0.1];
  --box-shadow-2: 0 5px 15px rgba[255, 94, 58, 0.2];
  --gradient: linear-gradient[to bottom, #fccb90, #ff9a9e];
  --btn-gradient: linear-gradient[to bottom, #ff5151 50%, #ff5e3a];
}

*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var[--black-color];
  background-color: var[--white-color];
}

h1,
h2,
h3,
h4 {
  color: var[--black-color];
  line-height: 1.2;
  font-weight: 500;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style-type: none;
}

section {
  padding: 5rem 0 5rem;
  overflow: hidden;
}

p {
  line-height: 3rem;
}

img {
  max-width: 100%;
  height: auto;
}

/* ========== Custom Classes =========== */
.container {
  max-width: 120rem;
  padding: 0 3rem;
  margin: auto;
}

@media [min-width: 1600px] {
  .container {
    max-width: 160rem;
  }
}

@media [max-width: 567px] {
  .container {
    padding: 0 1rem;
  }
}

.d-flex {
  display: flex;
  align-items: center;
}

/* ========== Header =========== */

/* ========== Navigation =========== */

/* ========== Hero Area =========== */

/* ========== Collection =========== */

/* ========== Arrivals =========== */

/* ========== Categories Product =========== */

/* ========== Statistics =========== */

/* ========== Blog =========== */

/* ========== Footer =========== */

/* ========== User Form =========== */

Đối với SCSS, chúng tôi sẽ sử dụng CSS Grid để định vị hình ảnh trong các cột và hàng khác nhau tùy thuộc vào chế độ xem của màn hình


/* ========== Google Fonts =========== */
@import url['//fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'];
@import url['//fonts.googleapis.com/css2?family=Aclonica&display=swap'];

/* ========== CSS Variables =========== */
:root {
  --primary-color: #ff5e3a;
  --default-color: #4f5665;
  --black-color: #000;
  --grey-color: #f0f0f0;
  --white-color: #fff;
  --lightpink: #ffcce0;
  --blue: #1a1aff;
  --custom: #1a1aff;
  --color: #4d4d4d;
  --lightblue: #ccccff;
  --box-shadow-1: 0 5px 15px rgba[0, 0, 0, 0.1];
  --box-shadow-2: 0 5px 15px rgba[255, 94, 58, 0.2];
  --gradient: linear-gradient[to bottom, #fccb90, #ff9a9e];
  --btn-gradient: linear-gradient[to bottom, #ff5151 50%, #ff5e3a];
}

*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var[--black-color];
  background-color: var[--white-color];
}

h1,
h2,
h3,
h4 {
  color: var[--black-color];
  line-height: 1.2;
  font-weight: 500;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style-type: none;
}

section {
  padding: 5rem 0 5rem;
  overflow: hidden;
}

p {
  line-height: 3rem;
}

img {
  max-width: 100%;
  height: auto;
}

/* ========== Custom Classes =========== */
.container {
  max-width: 120rem;
  padding: 0 3rem;
  margin: auto;
}

@media [min-width: 1600px] {
  .container {
    max-width: 160rem;
  }
}

@media [max-width: 567px] {
  .container {
    padding: 0 1rem;
  }
}

.d-flex {
  display: flex;
  align-items: center;
}

/* ========== Header =========== */

/* ========== Navigation =========== */

/* ========== Hero Area =========== */

/* ========== Collection =========== */

/* ========== Arrivals =========== */

/* ========== Categories Product =========== */

/* ========== Statistics =========== */

/* ========== Blog =========== */

/* ========== Footer =========== */

/* ========== User Form =========== */

Đây là bản xem trước của phần mới đến

Cách thêm phần sản phẩm

Phần sản phẩm tương tự như phần bộ sưu tập sản phẩm vì chúng tôi sẽ tìm nạp sản phẩm từ tệp JSON và hiển thị chúng trên màn hình

Phần này cũng có nút tải thêm để tải thêm sản phẩm khi nhấp vào

Đây là mã HTML cho phần sản phẩm


/* ========== Google Fonts =========== */
@import url['//fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'];
@import url['//fonts.googleapis.com/css2?family=Aclonica&display=swap'];

/* ========== CSS Variables =========== */
:root {
  --primary-color: #ff5e3a;
  --default-color: #4f5665;
  --black-color: #000;
  --grey-color: #f0f0f0;
  --white-color: #fff;
  --lightpink: #ffcce0;
  --blue: #1a1aff;
  --custom: #1a1aff;
  --color: #4d4d4d;
  --lightblue: #ccccff;
  --box-shadow-1: 0 5px 15px rgba[0, 0, 0, 0.1];
  --box-shadow-2: 0 5px 15px rgba[255, 94, 58, 0.2];
  --gradient: linear-gradient[to bottom, #fccb90, #ff9a9e];
  --btn-gradient: linear-gradient[to bottom, #ff5151 50%, #ff5e3a];
}

*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var[--black-color];
  background-color: var[--white-color];
}

h1,
h2,
h3,
h4 {
  color: var[--black-color];
  line-height: 1.2;
  font-weight: 500;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style-type: none;
}

section {
  padding: 5rem 0 5rem;
  overflow: hidden;
}

p {
  line-height: 3rem;
}

img {
  max-width: 100%;
  height: auto;
}

/* ========== Custom Classes =========== */
.container {
  max-width: 120rem;
  padding: 0 3rem;
  margin: auto;
}

@media [min-width: 1600px] {
  .container {
    max-width: 160rem;
  }
}

@media [max-width: 567px] {
  .container {
    padding: 0 1rem;
  }
}

.d-flex {
  display: flex;
  align-items: center;
}

/* ========== Header =========== */

/* ========== Navigation =========== */

/* ========== Hero Area =========== */

/* ========== Collection =========== */

/* ========== Arrivals =========== */

/* ========== Categories Product =========== */

/* ========== Statistics =========== */

/* ========== Blog =========== */

/* ========== Footer =========== */

/* ========== User Form =========== */

HTML cho phần sản phẩm cũng đơn giản vì chúng tôi sẽ sử dụng Javascript để tự động thêm các sản phẩm vào HTML

Dưới đây là các phong cách cho phần sản phẩm


/* ========== Google Fonts =========== */
@import url['//fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'];
@import url['//fonts.googleapis.com/css2?family=Aclonica&display=swap'];

/* ========== CSS Variables =========== */
:root {
  --primary-color: #ff5e3a;
  --default-color: #4f5665;
  --black-color: #000;
  --grey-color: #f0f0f0;
  --white-color: #fff;
  --lightpink: #ffcce0;
  --blue: #1a1aff;
  --custom: #1a1aff;
  --color: #4d4d4d;
  --lightblue: #ccccff;
  --box-shadow-1: 0 5px 15px rgba[0, 0, 0, 0.1];
  --box-shadow-2: 0 5px 15px rgba[255, 94, 58, 0.2];
  --gradient: linear-gradient[to bottom, #fccb90, #ff9a9e];
  --btn-gradient: linear-gradient[to bottom, #ff5151 50%, #ff5e3a];
}

*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var[--black-color];
  background-color: var[--white-color];
}

h1,
h2,
h3,
h4 {
  color: var[--black-color];
  line-height: 1.2;
  font-weight: 500;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style-type: none;
}

section {
  padding: 5rem 0 5rem;
  overflow: hidden;
}

p {
  line-height: 3rem;
}

img {
  max-width: 100%;
  height: auto;
}

/* ========== Custom Classes =========== */
.container {
  max-width: 120rem;
  padding: 0 3rem;
  margin: auto;
}

@media [min-width: 1600px] {
  .container {
    max-width: 160rem;
  }
}

@media [max-width: 567px] {
  .container {
    padding: 0 1rem;
  }
}

.d-flex {
  display: flex;
  align-items: center;
}

/* ========== Header =========== */

/* ========== Navigation =========== */

/* ========== Hero Area =========== */

/* ========== Collection =========== */

/* ========== Arrivals =========== */

/* ========== Categories Product =========== */

/* ========== Statistics =========== */

/* ========== Blog =========== */

/* ========== Footer =========== */

/* ========== User Form =========== */

Trong SCSS, chúng tôi đã sử dụng CSS Grid để làm cho các sản phẩm phản hồi nhanh trên các màn hình khác nhau chỉ bằng một dòng mã


npm install sass -g

Dưới đây là mã Javascript để hiển thị động các sản phẩm trên màn hình và cũng thêm chức năng tải thêm


npm install sass -g

Đây là giao diện của phần sản phẩm trong trình duyệt

Cách thêm phần thống kê

Phần thống kê cũng đơn giản. Phần này có nền màu chuyển sắc với bốn thẻ được đặt trong bốn cột lưới

Mỗi thẻ có một biểu tượng, tiêu đề và một số văn bản đoạn văn

Đây là HTML cho phần thống kê


npm install sass -g

Dưới đây là các kiểu cho phần thống kê. Tôi cũng đã sử dụng lưới CSS để làm cho các cột khác nhau phản hồi trên các màn hình khác nhau


npm install sass -g

Đây là bản xem trước của phần thống kê trong trình duyệt

Cách thêm phần blog thương mại điện tử thời trang

Phần này chứa các bài đăng blog nổi bật của trang web Thương mại điện tử thời trang. Bạn luôn nên thêm một phần blog vào các trang web Thương mại điện tử của mình để hướng lưu lượng truy cập không phải trả tiền từ các công cụ tìm kiếm

Đây là mã HTML cho phần blog


npm install sass -g

Dưới đây là các kiểu SCSS cho phần blog


npm install sass -g

Đây là bản xem trước của phần blog

Cách thêm phần chân trang

Cuối cùng, chúng ta đang ở phần cuối cùng của trang web Thương mại điện tử thời trang

Chân trang chứa bốn cột trên màn hình rộng và một cột trên thiết bị di động

Chân trang có các liên kết chung để điều hướng đến các trang khác của trang web Thương mại điện tử thời trang và một số biểu tượng mạng xã hội

Đây là HTML cho chân trang


npm install sass -g

Dưới đây là các kiểu cho phần chân trang. Tôi đã sử dụng các cột Lưới để làm cho chân trang thích ứng với các kích thước màn hình khác nhau


npm install sass -g

Đây là những gì chân trang trông giống như trong trình duyệt

Phần kết luận

Trong bài viết này, bạn đã học được cách tạo một

Trang web thương mại điện tử thời trang đáp ứng
phần blog
thanh trượt với thư viện SwiperJS

Đây là cách bạn có thể xây dựng trang web Thương mại điện tử thời trang đáp ứng với HTML, CSS và Javascript. Vui lòng thêm nhiều chức năng và trang để làm cho nó hấp dẫn hơn

Click vào nút download bên dưới để tải về toàn bộ mã nguồn của website TMĐT thời trang

Bạn có thể tạo một trang web chỉ bằng HTML không?

Câu trả lời ngắn gọn là có, bạn có thể tạo một trang web đơn giản chỉ với HTML và CSS . Tuy nhiên, nếu bạn muốn bắt đầu xây dựng một số trang web thực sự thú vị và linh hoạt hơn trong những gì bạn có thể làm, bạn cần sử dụng JavaScript, ngôn ngữ phụ trợ, lưu trữ web và cơ sở dữ liệu.

Tôi có thể viết mã trang web Thương mại điện tử của riêng mình không?

Có, bạn có thể viết mã trang web thương mại điện tử của riêng mình từ đầu . Tuy nhiên, việc xây dựng một trang web thương mại điện tử đòi hỏi một lượng thời gian và công sức đáng kể, cũng như các kỹ năng chuyên môn về thiết kế và phát triển web.

HTML trong điện tử là gì

Ngôn ngữ đánh dấu siêu văn bản [HTML] là tập hợp các ký hiệu hoặc mã đánh dấu được chèn vào một tệp dành để hiển thị trên Internet . Đánh dấu cho trình duyệt web biết cách hiển thị các từ và hình ảnh của trang web.