The basic steps of writing a web project-Html
Preparation before construction
Create a folder, name it the project name, and then create a home page file in the folder: index.html, a folder with css: css: create two more files in the folder, a css file with home page style, A css file with public styles, a folder with pictures: images, if you still need js, create a js folder.
Write webpage
Start from the head
The head of a web page first needs a title: title, which describes the subject of a web page. As shown in the figure below, taking Xiaomi's official website as an example, there is also a logo in the title of the website. This logo needs to be imported and uses a label.
<link rel="icon" href="favicon.ico" type="image/x-icon"
rel: The statement is the title logo, href: the image address, type: what type it is
<link ref="shortcut icon" href="favicon.ico" type=""image/x-icon"
This is to show that the icon can be displayed in the favorites
[External link image transfer failed. The source site may have an anti-hotlinking mechanism. It is recommended to save the image and upload it directly (img-2Ya8DtMc-1586167026377)(C:\Users\FL\AppData\Roaming\Typora\typora-user-images\ image-20200406160431357.png)]
Also need the content of the meta package
<meta name="keywords" content="小米..."
This is a keyword, indicating the core search keywords contained in a web page content
<meta name="description" content="小米官网"
This is a description of the website information, which is displayed as a summary of the page content in the search results.
The content of the head of the website is shown to the browser so that the search engine can search the webpage.
<link rel="stylesheet" href="css/index.css"
Link external css style
<script src="js/index.js"></script>
Link external js code
Main page
Analyze the structure of the page and divide the page area. For example, determine the width of the center of the plate, and the following layout is based on the width of the center of the plate.
Write public style css files
Clear margins:
body,p,ul,h1,h2,h3,h4,h5,h6,dl,dd {
margin: 0;
}
Clear the padding:
ul,ol{
padding: 0;
}
Clear underline of a tag
a{
text-decoration: none;
}
Clear list style
li{
list-style: none;
}
Floating left and right
.fl{
float: left;
}
.fr{
float: right;
}
Public styles can be used wherever they are obtained, so they are put in one file.
If there are other needs, continue to add.
Use of Ali icons
The Ali icon is a vector diagram, and the picture will not be distorted whether it is zoomed in or zoomed out on the webpage. Used for the display of small icons
The address of the Ali icon: https://www.iconfont.cn/home/index
After downloading, unzip into the project file
Click to open the folder
demo_index.html is an instruction file. After clicking it, there will be a detailed usage method.
I choose the method of introducing font styles.
Copy, this is css style.
There is a problem to note here. The url of the code after copying is the address of the file. If it is placed under the font file, you need to add "...font/" in the url.
Copy, this is css style.
Copy, add code in the content of the corresponding page html file
If you haven't found it, the color may be the same as the background color.
The code for the small icon:
The semicolon after the code cannot be removed.
Finally talk about a vh and vw
1vw=1% viewport width
1vh=1% of the viewport height
So 100vw will traverse the entire viewport width, whether you zoom in or zoom out the entire page, it will traverse the entire viewport width.
vOTP-1586167026383)]
The semicolon after the code cannot be removed.
Finally talk about a vh and vw
1vw=1% viewport width
1vh=1% of the viewport height
So 100vw will traverse the entire viewport width, whether you zoom in or zoom out the entire page, it will traverse the entire viewport width.
width=100% just occupies the width of the current page