Nó không khó khăn 😉
Ảnh của Pankaj Patel trên unplashXin chào mọi người😃
Đây là bài viết đầu tiên của tôi trong phương tiện. Hôm nay tôi sẽ nói về cách tạo một trang web thương mại điện tử nhỏ bằng cách sử dụng HTML và CSS.HTML and CSS.
Một trang web thương mại điện tử là một cửa hàng trực tuyến cho phép bạn mua và bán các sản phẩm khác nhau thông qua Internet. Chúng tôi sử dụng HTML để tạo cấu trúc và nội dung của trang web của chúng tôi. Chúng ta nên thu hút trái tim của người dùng. Đối với điều đó, chúng tôi sử dụng CSS. CSS giúp chúng tôi làm cho trang web của chúng tôi bắt mắt bằng cách sử dụng các màu sắc, bố cục và phông chữ khác nhau.E-Commerce website is an online store that allows you to buy and sell various products through the Internet. We use HTML to create the structure and the content of our webpage. We should attract the hearts of our users. For that, we use CSS. CSS helps us to make our website an eye-catching one by using different colours, layout, and fonts.
Hãy để xem trang web của tôi trông như thế nào😃
Hãy để xem một bản demo của trang web của tôi.
Bản demo của trang web của tôiHãy để một cái nhìn vào mã của tôi😃 của tôi😃
Mã hóa trang web của tôiTất cả các trang web được chia thành ba phần chính -. Chúng tôi chỉ cần thay đổi văn bản ở giữa các thẻ HTML dựa trên mỗi phần.
Tiêu đề này là gì🤔
Ảnh của mã tiêu đề HeaderHTMLChúng tôi sử dụng thẻ làm thùng chứa cho nội dung giới thiệu hoặc một tập hợp các liên kết điều hướng. Chúng tôi chỉ sử dụng thẻ cho khối chính của các liên kết điều hướng. tag as a container for introductory content or a set of navigational links. We use the tag only for the major block of navigation links.
Chúng tôi sử dụng thẻ để nhúng hình ảnh trên trang HTML. Chúng tôi sử dụng SRC SRC để chỉ định đường dẫn đến hình ảnh. Ở đây tôi muốn hiển thị logo của trang web của mình. Để áp dụng các chức năng CSS, tôi phải nhận ra cụ thể điều đó. Đối với điều đó, tôi đã xác định một lớp có tên là Log Logob. tag to embed an image on an HTML page. We use “src” to specify the path to the image. Here I want to display the logo of my web page. To apply CSS functionalities, I have to specifically recognise that. For that, I have defined a class called “logob”.
Chúng tôi sử dụng thẻ để xác định một danh sách chưa được đặt hàng. Chúng tôi bắt đầu mục danh sách với thẻ. Chúng tôi sử dụng thẻ với thuộc tính HREF của nó để tạo một siêu liên kết đến các trang web hoặc bất cứ thứ gì khác mà URL có thể giải quyết. Thẻ nên chỉ ra đích của liên kết. tag to define an unordered list. We start the list item with the tag. We use the tag with its “href” attribute to create a
hyperlink to web pages or anything else a URL can address. tag should indicate the link's destination.
Chúng tôi sử dụng thẻ làm thùng chứa cho các phần tử HTML. Ở đây tôi đã xác định một lớp Div có tên là Intro Intro. để thẻ xác định các tiêu đề. Hãy cùng xem cách tôi làm cho tiêu đề này trở thành một tiêu đề hấp dẫn bằng cách sử dụng CSS. Ở đây tôi sẽ chỉ cho bạn một số phần mã CSS có thể được thêm vào các tài liệu HTML theo 3 cách. Chúng là nội tuyến, CSS nội bộ và bên ngoài. Ở đây tôi đã sử dụng một tệp CSS bên ngoài. Bộ chọn lớp chọn các phần tử HTML với một thuộc tính lớp cụ thể. Chúng tôi sử dụng ký tự [.], Theo sau là tên lớp. Trên tải trang, sẽ có một số dịch chuyển bố cục. Để tránh điều đó, chúng tôi đặt các thuộc tính chiều rộng và chiều cao. Thuộc tính con trỏ của người Viking làm nổi bật con trỏ chuột sẽ được hiển thị khi trỏ qua phần tử.width and height attributes. The
“cursor” property highlights the mouse cursor to be displayed when pointing over the element. Phần mã trên cho thấy cách tôi đã sử dụng các chức năng CSS cho lớp div giới thiệu. Chúng tôi sử dụng thuộc tính "Overflow, để chỉ định xem có nên cắt nội dung hay thêm các cuộn thanh khi nội dung của một phần tử quá lớn để phù hợp với khu vực được chỉ định. Ở đây tôi đã sử dụng giá trị ẩn. được cắt và phần còn lại của nội dung sẽ vô hình. Chúng tôi sử dụng vị trí trên mạng để làm nổi bật loại phương thức định vị được sử dụng cho một phần tử. Như bạn có thể thấy ở đây tôi đã sử dụng một hình ảnh nền và đã thay đổi các thuộc tính theo sự ưa thích."overflow” property to specify whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area. Here I have used “hidden” as
the value. It means that the overflow is clipped, and the rest of the content will be invisible. We use the “position” to highlight the type of positioning method used for an element. As you can see here I have used a background image and have changed the properties according to my preference. Bạn đã bao giờ nhận thấy khi bạn di chuyển con trỏ theo một số yếu tố, màu sắc của chúng đang thay đổi🤔 Chúng tôi sử dụng trên mạng: di chuột để chọn các yếu tố khi bạn chuột qua chúng. Ở đây tôi đã sử dụng thuộc tính màu để khiến anh ấy biết rằng anh ấy đã nhấp vào các yếu tố điều hướng. Bạn có muốn biết cách tôi tạo nút này không? 😉😉 Khi chúng ta đang so sánh với màn hình hiển thị: Inline, sự khác biệt chính là màn hình hiển thị: Inline-Block cho phép chúng ta đặt chiều rộng và chiều cao trên phần tử. Chúng tôi sử dụng thuộc tính "Border-Radius xác định bán kính của các góc phần tử. Tôi sử dụng màu cam làm màu nền của nút. Để tạo không gian xung quanh nội dung của một phần tử hoặc bên trong biên giới. Thuộc tính FONT-WEIGHT WEIGHT cho biết cách các nhân vật nên được hiển thị, dày hoặc mỏng.display: inline”, the major difference is that “display:
inline-block ”allows us to set a width and height on the element. We use the "border-radius” property defines the radius of the element's corners. I use orange as the background colour of the button. The “box-shadow” property attaches one or more shadows to an element. We use “padding” property to create space around an element’s content or inside borders. The “font-weight” property says how the characters should be
displayed, thick or thin. Tôi biết bạn đang háo hức chờ đợi để biết cách tôi tạo ra những biểu tượng này. Nó đơn giản. Hãy để một cái nhìn vào mã. Tôi đã xác định một phần có tên là Phần Lợi ích Phần. Theo đó, tôi đã xác định một lớp Div có tên là Hộp Lợi ích Trung tâm. Theo đó, tôi đã xác định một lớp Div có tên là Lợi ích. Theo đó, tôi đã xác định một lớp Span có tên là Icon Icon. Ở đây tôi đã nhập các biểu tượng hộp. Như bạn có thể bạn có thể thấy tôi đã áp dụng CSS cho các lớp DIV và SPAN của tôi một cách riêng biệt. Như bạn có thể thấy ở đây tôi đã sử dụng bố cục lưới. Bố cục lưới CSS CSS cung cấp một hệ thống bố cục dựa trên lưới, với các hàng và cột, giúp thiết kế các trang web dễ dàng hơn. Thuộc tính của Flex Flex-Direction chỉ định hướng của các mục linh hoạt.Grid Layout” offers a grid-based layout system, with rows and columns, making it easier to
design web pages. The “flex-direction” property specifies the direction of the flexible items. Hãy để xem cách tôi hiển thị một sản phẩm trong trang web của mình😁 Như bạn có thể thấy trong bức ảnh, tôi đã đề cập đến tên của sản phẩm, nó có bao nhiêu ngôi sao và giá của nó. Khi tôi di chuyển con trỏ xung quanh sản phẩm, sản phẩm dường như đang tăng kích thước của nó. Hãy cùng nhìn vào mã để có được một ý tưởng chi tiết hơn. Ở đây tôi đã xác định một lớp Div có tên là AC AC. Theo tôi đã xác định một lớp Div có tên là IMG-Cover. Tôi đã chèn một hình ảnh bằng thẻ. Tôi đã chèn mô tả sản phẩm bằng cách sử dụng thẻ. Tôi đã sử dụng một lớp Div có tên là xếp hạng trực tuyến để hiển thị các ngôi sao. Tôi đã sử dụng một lớp Div có tên là Giá Giá để hiển thị giá. Hãy để xem cách tôi làm cho sản phẩm này hiển thị một sản phẩm hấp dẫn bằng cách sử dụng CSS.😉 Như bạn có thể thấy, tôi đã áp dụng CSS cho các lớp DIV và SPAN của tôi một cách riêng biệt. Chúng tôi sử dụng trên mạng: di chuột để tăng kích thước của sản phẩm khi người dùng di chuyển con trỏ qua nó. Hiệu ứng chuyển đổi của người Viking thường có thể xảy ra khi người dùng di chuyển qua một phần tử. Thuộc tính biến đổi trên mạng cho phép bạn xoay, tỷ lệ, di chuyển các yếu tố của bạn.transition” effect could typically occur when a user hovers over an element. The “transform” property allows you to rotate, scale, move your elements. Chúng tôi hiển thị các sản phẩm của chúng tôi bằng cách sử dụng bố cục lưới. Hãy cùng xem một ví dụ về cách tôi sử dụng bố cục lưới. Đây là một bức ảnh của trang chân trang của trang web của tôi. Ở đây bạn có thể thấy một số liên kết và biểu tượng. Hãy để xem cách tôi làm điều này. Tôi đã xác định một phần ID có tên là Footer Footer. Theo đó, tôi đã xác định một lớp Div có tên là Foot Foot. Tôi đã sử dụng thẻ để có được một danh sách không có thứ tự. Tôi bắt đầu mục danh sách với thẻ. Chúng tôi sử dụng thẻ với thuộc tính HREF của nó để tạo một siêu liên kết đến các trang web. Thẻ sẽ chỉ ra đích liên kết. Tôi đã xác định một lớp Div khác có tên là Liên kết xã hội. Tôi đã nhập các biểu tượng đánh giá phông chữ. tag. We use the tag with its “href” attribute to create a hyperlink to web pages. The tag should indicate the link’s destination. I have defined another div class called “social-links”. I have imported
the font-awesome icons. Bạn có thể thấy cách tôi đã áp dụng các chức năng CSS cho phần chân trang và các thẻ khác cũng vậy. Đó là tất cả về việc tạo một trang web nhỏ bằng cách sử dụng HTML và CSS. Vì vậy, tôi nghĩ rằng bạn có một số kiến thức cơ bản về việc tạo một trang web. Cảm ơn bạn đã dành thời gian quý báu của bạn để đọc điều này. Nếu bạn nghĩ rằng blog này làm phong phú thêm kiến thức của bạn, xin đừng quên cho tôi một cái vỗ tay, để lại nhận xét và chia sẻ điều này với các đồng nghiệp của bạn. Theo dõi tôi để biết nhiều bài viết thú vị hơn.
Mã CSS của logob logobHãy để một cái nhìn thoáng qua về cơ thể của trang web của tôi
Ảnh của phần Lợi ích
Ảnh: Cách tôi hiển thị một sản phẩm
Mã CSSHãy để di chuyển đến chân trang
Ảnh của chân trangLàm thế nào để bạn tạo một trang web mua sắm trực tuyến bằng mã HTML và CSS?
Bạn có thể tạo các trang web với HTML và CSS không?
Các bước để tạo một trang web bằng cách sử dụng HTML và CSS là gì?
Làm cách nào để tạo một trang web mua sắm đơn giản?
Chủ Đề