(First three days) Various points to note on JD.com's page

Training School
Days 1 to 3
Learn HTML first
What is popular now is HTML5, and what you are currently learning is the HTML5 specification.
(Learning for people with a certain foundation)
What I learned in the first three days was how to write JD.com pages. It was different from what I wrote before. The page looked the same as what I wrote, but what the teacher said was still very different and more detailed. .
1. It is very important for programmers to write in a standardized way to make it easier for others to read, so comments are very important.
《Points to Note》
2. The layout of the page must be carefully considered first and divided into several parts. There are many common ones at the head and tail, which can be written in a css file.
3. In the place where users mainly visit, you can write it as beautifully as possible, such as "|". The first tags can be wrapped with

, and then write width, height, background, such as

;
.dps{
width: 1px;
height: 12px;
background-color: #ddd;
margin-top: 9px;
padding: 0
}
It should be noted here that since li may have other padding values ​​and may be inherited, 0 is set here.
You can simplify and write directly | at the end.
4. In the past, when I was writing code and liked layout, I liked to set height, but this is easy to write to death. You can write height when you start writing, but be careful to remove it after you finish writing.
If it floats, you can add pseudo elements to the overall layout of a piece of code to clear the float. That is.clearfix:after{}

《Writing Page Notes》
<1>The triangle symbol is;◇
i and s must be dragged, that is, add postion:absolute; i set the width and height, set overflow:hidden; s just set the font
Example.shortcut s{
font:400 15px/12px consolas;
position: absolute;
top: -6px;
right: 0;
}
.shortcut i{
width: 15px;
height: 8px;
position: absolute;
right:8px;
top: 12px;
overflow: hidden;
}
If you need to add pictures or triangles after and in front of the font code you write, For others, pay attention to leaving space, such as setting padding
<2> There are three displays to change the position relationship of objects: inline-block; postion; float
<3> You can use border-radius:0 0 0 0 to write irregular-shaped icons ; In order not to be hard-coded, be careful not to set the width, set padding
such as .shopping-t{
position: absolute;
top: -6px;
right: 7px;
border-radius: 8px 7px 7px 0;
background: red;
color:#fff;
padding: 0 3px;
font:400 11px/15px normal;
}

<4> Note that if the set code changes with a certain middle part as the page shrinks, set the position

Like

< ;span class="st sl2">

.slogen .st{
position: absolute;
left: 50%;
}
.slogen .sl1{
margin-left: -604px;
}
.slogen .sl2{
margin-left: -304px;
}
.slogen .sl4{
margin-left: 305px;
}

<5>a tags often wrap img (if you click on the picture to jump, it is a whole big picture, small pictures or pictures to be moved still use b, i, etc.), b, i tags, etc. are used as small icons and text. For the style to be added, pay attention to b and i setting display;
At the same time, when a sets b, i, etc. as the background image, you can also add a paragraph of text to facilitate web crawler optimization
Such as Jingdong
a{
display: inline-block;
width: 270px;
height: 60px;
background: url("../images/logo-201305.png");
margin-top: 20px;
text-indent: -10000px;/*The words are far away from the picture*/
}
<6>If you set a certain page above other pages, use z-index, but if this page floats, it must Set positon: relative; because it floats out of standard, z-index cannot be set