This is the first day of work around in the past half month. I think that this tutorial has not been completed yet, and I feel very uneasy. I just resigned two months ago and wanted to complete all the tutorials. However, due to an unfortunate situation, most of the data on the hard disk was lost, and half of the tutorials I wrote were wiped out. But recently many netizens through blog, QQ, MSN, E-MAIL and other ways to contact me, hope to continue to update this tutorial, some netizens even called my cell phone (I don't know how everyone knows my number, Ah ~~) I was touched by it. Although the time was very short, I 'd like to take some time to complete this tutorial as much as possible ~~ As Uncle whale said, time is milk. The more you squeeze, the more you get ~~
First, we need to explain some things. For the previous articles, in order to better differentiate the relationships between different layers, many places in the tutorial use uppercase CLASS or ID. In fact, this is not recommended, the recommended method is to add underscores (_) between words or splice words. Because CSS is case sensitive. As you can see, all the downloaded files I provide to you are processed in lower case.
Let's first deal with the sidebar style. After analysis, we can know that sidebar has four parts, and we divide these four parts into four layers:
<Div id = "search"> </div>
<Div id = "login">
<Div class = "bar_title"> </div>
<Div class = "bar_body"> </div>
</Div>
<Div id = "infomation">
<Div class = "bar_title"> </div>
<Div class = "bar_body"> </div>
</Div>
<Div id = "standard">
<Div class = "bar_title"> </div>
<Div class = "bar_body"> </div>
</Div>
Here we have ID and CLASS, so some friends will ask, under what circumstances is ID and under what circumstances is CLASS used?
ID, which indicates uniqueness and only appears once on this page. We use it to represent the layout structure;
CLASS indicates a group (CLASS) or an element of the same nature. They can share styles and will appear multiple times on the page.
Because the style of member logon, site information, page standards, and content words in these regions will be the same, we put them in a group.
But sometimes, when we need to set different styles for the elements in these layers, what should we do? For example, when a member logs on, the text is 14 PX bold, and the others are 12 px bold. How can we write CSS and read the following code?
. Bar_title {font-size: 12px; font-weight: bold}
# Login. bar_title {font-size: 14px}
# Login. bar_title indicates the style of the elements whose CLASS is bar_title at the layer whose ID is login. In this way, you can customize the styles for certain elements. # Login. bar_title also inherits the font-size: 14px style. the style of the bar_title group (class) is font-weight: bold, bold.
1st 2 pages