Làm thế nào để xây dựng một trang web từ Scratch với HTML
Trong hướng dẫn toàn diện này, bạn sẽ học cách xây dựng một trang web đơn giản nhưng hấp dẫn từ đầu chỉ sử dụng HTML và CSS. Và, điều gì có thể tốt hơn việc tạo một trang web cho thú cưng yêu quý của bạn? Nó sẽ được chia thành ba phần: Trang chủ, Dịch vụ và Giới thiệu. Chúng tôi sẽ thêm một menu điều hướng ở đầu và một chân trang ở cuối.
Vì vậy, không cần thêm bất kỳ quảng cáo nào nữa, đây là cách tạo một trang web từ đầu bằng HTML và CSS.
Mục Lục
Xây dựng Phần Điều hướng và Anh hùng
Thêm một <đầu> để đặt tiêu đề cho dự án của bạn. Liên kết một style.css tệp và thêm Rubik phông chữ từ phông chữ của Google bằng cách sử dụng
Phần HTML:
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<title>Pawfect</title>
</head>
Thêm một và cấu trúc phần đầu tiên của trang web của bạn. Thêm một lớp tiêu đề cho biểu trưng và menu điều hướng. Sau đó, thêm một phần-anh hùng lớp cho tiêu đề chính với một chút mô tả về các dịch vụ của trang web.
Phần HTML:
<div class="first-fold">
<header class="header">
<a href="#">
<p class="logo">Pawfect🐾</p>
</a><nav class="main-nav">
<ul class="main-nav-list" role="navigation">
<li><a class="main-nav-link" href="#services">Our services</a></li>
<li><a class="main-nav-link" href="#about">About Us</a></li>
<li>
<a class="main-nav-link nav-cta">Get a Quote</a>
</li>
</ul>
</nav>
</header>
<section class="section-hero">
<div class="hero">
<div class="hero-text-box">
<h1 class="heading-primary">
Pet Home Grooming Service in North Carolina
</h1>
<p class="hero-description">
Running out of time? Say no more. Veniome Pawfect ea fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt nemo assumenda facere?
</p>
</div>
</div>
</section>
</div>
Đầu ra:
Bây giờ là lúc để tạo kiểu cho menu điều hướng và phần anh hùng.
CSS chung
Thêm kiểu CSS chung ở đầu style.css tập tin. Phần anh hùng có ảnh nền. Bạn có thể truy cập mã hoàn chỉnh bao gồm hình ảnh trên GitHub hoặc sử dụng hình ảnh của riêng bạn.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}html {
/* 10px / 16px = 0.625 =62.5*/
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth;
}
body {
font-family: 'Rubik', sans-serif;
line-height: 1.5;
font-size: 1.5rem;
font-weight: 400;
overflow-x: hidden;
color: #523414;
background-color: #e9be5a;
}
.heading-primary,
.heading-secondary,
.heading-tertiary {
font-weight: 700;
color: #523414;
letter-spacing: -0.5px;
}
.heading-primary {
font-size: 5.2rem;
line-height: 1.05;
margin-bottom: 3.2rem;
}
.heading-secondary {
font-size: 4.4rem;
line-height: 1.2;
margin-bottom: 5.6rem;
text-align: center;
}
.heading-tertiary {
font-size: 3rem;
line-height: 1.2;
margin: 1.2rem;
}
a {
text-decoration: none;
}
.first-fold {
background-image: url(img/Pawfect-bg.png);
min-height: 80rem;
}
Tạo kiểu cho Thanh điều hướng
Sử dụng CSS flexbox để điều chỉnh biểu trưng và menu điều hướng liên tiếp. Bộ màu nền minh bạch và đưa ra một bán kính biên giới của 9px vào nút Kêu gọi hành động (CTA).
CSS của thanh điều hướng
/* ****************** */
/* Logo */
/* ****************** */ .header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: transparent;
height: 9.6rem;
padding: 0 4.8rem;
}
.logo {
height: 2.2rem;
font-size: 3.6rem;
text-decoration: none;
text-align: center;
font-weight: bold;
color: #462d12;
}
/* ****************** */
/* Navigation */
/* ****************** */
.main-nav-list {
list-style: none;
display: flex;
align-items: center;
gap: 4.8rem;
}
.main-nav-link {
display: inline-block;
text-decoration: none;
color: #462d12;
font-weight: 400;
font-size: 1.8rem;
}
.main-nav-link.nav-cta {
padding: 1.2rem 2.4rem;
border-radius: 9px;
color: #fff;
background-color: #523414;
}
Đầu ra:
Tạo kiểu cho phần anh hùng
Đặt một chiều rộng tối đa trên lớp anh hùng lồng tiêu đề và mô tả chính. Nếu không, nó sẽ kéo dài ra đến cuối thay vì ở bên trái. Đặt cỡ chữ và đệm lót theo yêu cầu của bạn.
CSS Phần anh hùng
/* ****************** */
/* Hero section */
/* ****************** */
.section-hero {
padding: 15rem 0 9.6rem;
}.hero {
max-width: 75rem;
padding: 0 9.6rem;
align-items: left;
}
.hero-description {
font-size: 2rem;
line-height: 1.6;
margin: 4.8rem 0;
}
Đầu ra:
Xây dựng Phần Dịch vụ
Trang web cung cấp bốn dịch vụ: chải lông đầy đủ, tắm rửa cho chó tự phục vụ, tắm và sấy khô, và mát-xa cơ thể và bàn chân.
HTML Phần Dịch vụ
Tạo cha mẹ class = “dịch vụ lưới điện” và thêm tất cả bốn dịch vụ bằng cách sử dụng
<section class="our-services" id="services">
<div class="container">
<h2 class="heading-secondary">Our Services</h2>
<div class="grid services">
<div class="first-service">
<img src="img/Full Grooming.jpg" />
<h3 class="heading-tertiary">Full Grooming</h3>
<p>Lorem ipsum consectetur adipisicing elit.</p>
</div>
<div class="second-service">
<img src="img/Self Serve Dog Wash.jpg" />
<h3 class="heading-tertiary">Self Serve Dog Wash</h3>
<p>Odit aliquam dolor ex doloremque sed itaque.</p>
</div>
<div class="thrid-service">
<img src="img/Wash & Blow Dry.jpg" />
<h3 class="heading-tertiary">Wash & Blow Dry</h3>
<p>Voluptatem suscipit ut omnis quas saepe.</p>
</div>
<div class="fourth-service">
<img src="img/Body and Paw Massage.jpg" />
<h3 class="heading-tertiary">Body and Paw Massage</h3>
<p>Sapiente quos qui hic porro voluptatibus impedit.</p>
</div>
</div>
</div>
</section>CSS Phần Dịch vụ
Tạo một lưới có hai cột bằng nhau và đặt lô hổng đến 4rem. Điều chỉnh tất cả mục lưới ở trung tâm và đặt hình ảnh chiều rộng đến 80% so với kích thước ban đầu.
/* ****************** */
/* Our Services */
/* ****************** */
.our-services {
padding: 9.6rem 0;
}.container {
max-width: 120rem;
margin: 0 auto;
padding: 1.5rem 3.2rem;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
justify-content: center;
text-align: center;
}
.services img {
width: 80%;
border-radius: 9px;
}
Đầu ra:
.jpg?q=50&fit=crop&w=750&dpr=1.5)
Xây dựng phần Giới thiệu
Phần Giới thiệu sẽ có một hình ảnh và một hộp văn bản với một số thông tin ngắn gọn về đội.
Giới thiệu về phần HTML
Create a <div> and place the image and the text inside it.
<section class="about" id="about">
<div class="container">
<div class="grid grid-about about">
<img src="img/About.jpg" />
<div class="text">
<h2 class="heading-secondary">About Us</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas
officiis, perferendis iure possimus dolor aspernatur incidunt rem
ipsa, consectetur temporibus dolor ea? Tenetur nobis laboriosam
dolor perspiciatis aspernatur incidunt rem placeat quis assumenda
dicta!
</p>
</div>
</div>
</div>
</section>Giới thiệu về CSS Phần
Tạo kiểu cho hình ảnh và hộp văn bản bằng cách sử dụng CSS Grid và thêm bóng đổ để làm cho nó hấp dẫn hơn. Sử dụng một lợi nhuận âm để đặt hộp văn bản phía trên hình ảnh.
/* ****************** */
/* About Us */
/* ****************** */ .grid-about {
grid-template-columns: 1.2fr 0.8fr;
gap: 0;
}
.about {
padding: 2rem 0 7rem 0;
}
.about img {
width: 98%;
justify-self: end;
border-radius: 9px;
}
.about p {
font-size: 2.2rem;
}
.text {
max-width: 45rem;
background-color: #e7ac21;
padding: 10rem 5rem;
margin-left: -5rem;
border-radius: 9px;
}
.text h2 {
margin-bottom: 4.5rem;
text-align: center;
}
Đầu ra:
Chân trang của một trang web để lại ấn tượng lâu dài trong tâm trí của khách truy cập, vì vậy hãy đảm bảo rằng nó sạch sẽ và được tổ chức tốt.
Thêm tiêu đề chính nói lời cảm ơn đến khách truy cập. & sao chép; là một thực thể HTML cho © Biểu tượng.
<footer>
<h1 class="heading-primary">Thank You For Visiting Pawfect🐾!</h1>
<p>© Copyright 2022 Pawfect🐾</p>
</footer>Tạo kiểu cho footer bằng cách tạo kiểu khác cho footer màu nền và thiết lập thích hợp đệm lót.
/* ****************** */
/* Footer */
/* ****************** */ footer {
text-align: center;
background-color: #e7ac21;
padding: 2.5rem;
}
Đầu ra:
Bạn có thể xem trang web Pawfect cuối cùng theo liên kết này.
Xuất bản trang web của bạn
Xin chúc mừng, bạn đã tạo một trang web hoàn chỉnh từ đầu bằng HTML và CSS! Đã đến lúc xuất bản trang web của bạn và nhận phản hồi từ cộng đồng. Chúng tôi hy vọng bạn thích quá trình tạo ra trang web. Nếu bạn mới sử dụng dịch vụ lưu trữ, hãy xem cách lưu trữ trang web miễn phí bằng GitHub Pages.
Đọc tiếp
Giới thiệu về tác giả
