1、PRD
The front-end FE (front-end) picture style is the PRD picture given by the design UI. Some better designers will mark the picture and write the page according to the distance on the picture.
2. Project preparation
First look at the page structure, write down the structure in the index.html entry file, see how many structures there are, and then subdivide it
Reset the corresponding label in reset.css to reset the corresponding style
3. Little experience
1) Style reset and modularization
reseat style sheet, fill in the corresponding content and reset it yourself. Generally, someone will write or specify the style reset content before a large project, and then directly quote it later to minimize nesting, which is convenient for website SEO (search engine optimization) to crawl
2) The difference between different values of line-hight
line-height value:
Numbers, 150%, 1px, 1em, normal, usually take the value of numbers, such as 1.5, which can be inherited
The value of line-height is generally font-size multiplied by a digital value, such as font-size is 10px, line-height is 1.5, then the actual line-height is 10x1.5=15px
font-family:'宋体'(Simsun)\Microsoft YaHei
3) css @rules
@charset sets the encoding of the style sheet
For example, set @charset 'utf-8'
@import imports other style files
@meida Media Queries
@font-face custom font
4）favicon
icon refers to the icon style on the title. You can use an online website to convert the img to an ico format picture, then import the corresponding ico picture in the directory, and link the corresponding icon in the head
<link rel="icon" href="./淘.ico">
5) base label
Set in the head, you can set the most basic web page navigation, URL
6) Custom icon
Imported with custom icons, Alibaba's iconfont
7) Application scenarios of H tags
Search engine SEO will distinguish the importance according to the weight of tags when crawling
The title is the most important, followed by h1-h6, the h1 tag can only appear once on a page, if there is no title, h1 can be used on the logo
h2 is used on the subtitle, h3 is the title of the page section, and h4 is used in the title of the section
8) Change words with pictures
Write the text in html, and then add background url (image address) in the css style
Text hidden: text-index: -9999
9) Weird box model
There are two types of box models;
1. Standard box model
Total width = border (left and right) + width+padding (left and right)
Total height = border (up and down) + height + padding (up and down)
2. IE box model (weird box model)
Total width = width
total height=height
10) css3 (rounded corners, gradients, transitions)
border-radius: rounded corners
Gradient: background-image: linear-gradient (to right, initial color, end color) is to bottom by default
linear-gradient: is a linear gradient
transition: Transition attribute value transition time
11) IE filter
filter: Gradient support for IE8
12）css hack
To support the compatibility of IE, there are special
13) The picture is vertically centered
1、display：table-cell
vertical-align:middle
Simulate the picture as a cell, and the picture can be vertically centered
2. Flexbox model:
display：flex；
justify-content: space-around;
align-items :center;
14）css sprites
15) Form
table{border-collapse:collapse} (border merge calculation)
table-layout: fixed (algorithm for defining the column width, the fixed calculation method is to automatically calculate the column width according to the table width, and the width of each column is the width of the entire table)
16) Image format webp
The image format developed by Google takes up less memory, but supports fewer browsers