15. When there are many levels, how to better name the class? As an example:
Copy the codeThe code is as follows:
.index #mainContent .mainContent_right .mainContent_list2 h1 a{}
This is the page I just made for you. When there are many levels, the naming method used is not very good. I'm just reporting it now.
It should be simplified to:
Copy the codeThe code is as follows:
.index #mainContent .right .list2 h1 a{}
Why? Why not be afraid that right and list2 will be repeated?
Because there is a path ahead of us.
.index #mainContent Right below
.index #mainContent .right list2 below
So it won't be repeated! ~No need
.mainContent_right .mainContent_list2
It’s necessary to add a mainContent in front!
16. Regarding compatibility, my feeling is that if you try to write things as formal as possible, there will be no compatibility problems often.
For example, the default font under ff is different from ie, but if we defined the font at the beginning, it would not look different.
The padding and ie of many things under ff are different, but we defined padding to 0 in advance, so it will be fine.
17. Similar to a tag, or other span, etc. If width is not defined, then the default is 100% wide. as follows:
Copy the codeThe code is as follows:
<a>1111</a><a>2222</a><a>3333</a>
If we set a{float:left}, the three of them will be displayed in a row and will be 100% wide, becoming adaptive wide, that is, the more characters there are, the larger it will be.
This detail is more useful when dealing with the sliding door effect.
18. What is a sliding door.
Simply put, it is a set of buttons, and the text length in each button is not certain. I don't want to cut the background color of each button alone, so I use the sliding door effect. Make it adaptable.
Here is an example:
Copy the codeThe code is as follows:
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Website Building Guide</a></li>
<li><a href="#">Internet Entrepreneurship</a></li>
</ul>
.nav {
list-style-type: none;
height:70px;
margin:0px 0px 0px 20px
}
.nav li{float:left;background:url(../images/) no-repeat;margin-left:8px;margin-top:10px;}
.nav a{
float:left;
color:#4d7ecd;
display:block;
background:url(../images/) no-repeat right top;
height:40px;
padding:0px 16px 15px 16px;
text-align:center;
}
Two backgrounds are set here. b01 is the left part of the button (including the middle). When cutting, cut it larger. b02 is the right part of the button (not including the middle)
Set b02 to not repeat, and the horizontal position is on the right. This automatic retractable sliding door is ready.
19. In this case, height must be set
Copy the codeThe code is as follows:
.list_title{
background:url(../images/list/);
}
.list_title span{
float:left;
display:block;
height:38px;
}
list_title is a div, because based on the principle mentioned above, "If you can set height and width for the box, try not to set as much as possible", we did not set the height for list_title, and hope to spread it through the span below it.
But because list_title itself has no height, the background will not be displayed.
The result is that the background of list_title cannot be displayed. Therefore, you must set a height, height:38px;
But there is no need to set width, because the default width of the div is 100% (it seems that all elements that can set width, the default width is 100%)
20. Setting ul{list-style-type:none;} in advance is invalid~~
Do you have to write list-style-type:none in each ul;