ĐẠI HỌC TIN HỌC Tạo code một shoponline html
Lời giải 1 :
Tham khảo
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop Online</title>
<style>
/* Định dạng trang web */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
/* Định dạng tiêu đề */
h1 {
text-align: center;
margin: 20px 0;
}
/* Định dạng danh sách sản phẩm */
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
/* Định dạng mỗi sản phẩm*/
li {
background-color: #fff;
padding: 20px;
margin-bottom: 10px;
border-radius: 5px;
/* Định dạng giá sản phẩm */
.price {
font-weight: bold; }
/* Định dạng nút mua hàng */
.buy-btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
}
/* Định dạng hình ảnh sản phẩm */
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>Shop Online</h1>
<ul>
<li>
<img src="product1.jpg" alt="Product 1">
<h2>Product 1</h2>
<p class="price">$10</p>
<a href="#" class="buy-btn">Buy Now</a>
</li>
<li>
<img src="product2.jpg" alt="Product 2">
<h2>Product 2</h2>
<p class="price">$20</p>
<a href="#" class="buy-btn">Buy Now</a>
</li>
<li>
<img src="product3.jpg" alt="Product 3">
<h2>Product 3</h2>
<p class="price">$15</p>
<a href="#" class="buy-btn">Buy Now</a>
</li>
</ul>
</body>
</html>
Lời giải 2 :
<!DOCTYPE html>
<html>
<head>
<title>ShopOnline - Đại học Tin học</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
padding: 10px 0;
text-align: center;
}
nav {
background-color: #444;
color: white;
padding: 10px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
section {
padding: 20px;
}
footer {
background-color: #555;
color: white;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>ShopOnline - Đại học Tin học</h1>
</header>
<nav>
<ul>
<li><a href="#">Trang chủ</a></li>
<li><a href="#">Sản phẩm</a></li>
<li><a href="#">Dịch vụ</a></li>
<li><a href="#">Liên hệ</a></li>
</ul>
</nav>
<section>
<h2>Sản phẩm phổ biến</h2>
<div >
<img src="product1.jpg" alt="Sản phẩm 1">
<h3>Tên sản phẩm 1</h3>
<p>Giá: $100</p>
<button>Mua hàng</button>
</div>
<div >
<img src="product2.jpg" alt="Sản phẩm 2">
<h3>Tên sản phẩm 2</h3>
<p>Giá: $150</p>
<button>Mua hàng</button>
</div>
<!-- ...Thêm các sản phẩm khác tương tự... -->
</section>
<footer>
<p>© 2023 ShopOnline - Đại học Tin học</p>
</footer>
</body>
</html>
Bạn có biết?
Tin học là một ngành khoa học chuyên nghiên cứu quá trình tự động hóa việc tổ chức, lưu trữ, xử lý và truyền dẫn thông tin của một hệ thống máy tính cụ thể hoặc trừu tượng. Tin học bao hàm tất cả các nghiên cứu và kỹ thuật có liên quan đến việc mô phỏng, biến đổi và tái tạo thông tin. Hãy tận dụng sức mạnh của tin học để giải quyết các vấn đề và sáng tạo ra những giải pháp mới!
Nguồn :
Wikipedia - Bách khoa toàn thưTâm sự lớp 12
Lớp 12 - Năm cuối ở cấp trung học phổ thông, năm học quan trọng nhất trong đời học sinh, trải qua bao năm học tập, bao nhiêu kỳ vọng của người thân xung quanh. Những nỗi lo về thi đại học và định hướng tương lai thật là nặng nề. Hãy tin vào bản thân, mình sẽ làm được và tương lai mới đang chờ đợi chúng ta!
Nguồn :
sưu tậpCó thể bạn quan tâm
Tin Học
Lớp 12
Bài 53: Bài thi Vova là một học sinh thông minh và láu cá của vương quốc ByteLand. Chính phủ ByteLand đang muốn tuyển Vova vào trường Đại học Nhân tài. Tuy ...Tin Học
Lớp 12
cho một số nguyên dương , hay kiểm tra xem có số nào là x^3 = N không câu hỏi 7229313 ...Copyright © 2024 Giai BT SGK