Web standard Practice--the first page of watercress

web| Standard

Objective

• The following example is based on the page after the user has logged in, the content may be different;
• This time does not insist on pixel-level consistency, especially the line spacing, spacing may have subtle discrepancies;
• Understand that this article requires you to have an understanding of HTML and CSS, it is best to be able to write HTML and CSS code;
• It may take you more than 15 minutes to read this article in detail;
• This article follows the Code for the best, and the fix for the rest principle.

I. Analysis structure

Layout difficulties

The first page of watercress is a typical three-line layout, but there are special aspects. To remove the header and tail, the middle of the two columns, the left column is adaptive, the right column is fixed width (350px). Such a layout, if you do not consider the first load which part of the content (and semantics), there is quite a simple way of writing. In addition, if both columns are the percentage width, then it is good to handle. The fact is that the width of the right column is fixed (and I plan to let the left column load first). Fixed width (or height) is a very dangerous thing, unless you also fixed the size of the text, otherwise, when the text is magnified, it is easy to make mistakes (but the table is not so much to consider).

Other difficulties

• New comment list in left column
  • I think it's a list of Ordered lists, so use <ol> tags in your code, or you can write <div> with <dl> or directly.
  • The picture on the left of the list is the user's avatar rather than the cover of the book. So I write and the user name that line together.
• The right column of watercress recommended and the style of neighbors
  • We usually have a fixed height of the block in order to float, but the length of the title here is different, the picture size and the bottom alignment, floating block height unknown, I can not, only temporarily limit the height. Who has the means to please kindly inform.

In analyzing the structure, we must know what we need to write first and then what to write. This directly affects the wording of the style sheet that follows. And my suggestion is that when the structure is set down, don't change it easily.

Second, the basic layout code

Referring to the Yahoo! UI Lib Grids, I named the next three lines as #hd, #bd, #ft, which are abbreviations for #header, #body, and #footer. About the ID and class name, each have their own habits. In CSS, generally used in the use of the Underline method (such as comment-list), underline the method (such as comment_list), camel nomenclature (such as commentlist) and Pascal nomenclature (such as commentlist), I personally prefer to use the underline method.

The middle of the two columns I named #main and #sidebar. Which part shows up first? I think the new comment on the left shows that it might be better first, after all, it's wider than the right in most cases. So in the HTML #main to write in front of the #sidebar, as follows:

<div id= "HD" ></div>
<div id= "BD" >
<div id= "main" ></div>
<div id= "sidebar" ></div>
</div>
<div id= "FT" ></div>

How do you write style sheets? #hd, #ft可以先不管, #bd because there is a floating inside, not adaptive height, so need to clear the float, there are many ways. If you do not clear the float, then the contents of the #ft will be "Jianfengchazhen" to show where you do not want to see it. For example, you can set clear:both for #ft, or easy clearing for #bd.

Because the width of the #main is adaptive, #sidebar width is fixed to 350px, in the HTML is #main in front, so can not use simple float (floating elements must be set width, otherwise will be based on the content width), also can not use absolute positioning, because you do not know the height of both. Depending on the width of the screen, sometimes the #sidebar is higher, sometimes #main relatively high, using absolute positioning, the following #ft show there will be problems. So I used a less common approach (I don't like this negative margin), as follows:

#bd {
padding-right:410px; /* Because of padding, clear float cannot simply set the #bd to float */
}
#main {
width:100%;
Float:left;
}
#sidebar {
width:350px;
Float:left; * If float right, there is a problem with IE, fix it here
margin-left:60px; /* column spacing, that is, gutter * *
Margin-right: -410px; * * This sentence is very important.
}

If we write a fixed-width #sidebar in HTML, then CSS is fairly simple, just float #sidebar to the right and then #main margin-right:410px; It's OK, it's solid. So the width of the #main is also adaptive. CSS as follows (in the actual project I will use this method, this example is not):

#sidebar {
Float:right; * Note in HTML #sidebar written in front of the #main * *
width:350px;
}
#main {
margin-right:410px;
}

List of new comments in the left column

Just said, here can use <dl>, <ul>, <ol> or <DIV>, with what is personal habits or according to need. I use <ol> here, and other writing can be extended by this. The HTML structure code is as follows:

<ol>
<li>
<p> comments by the author head and other information </p>
<p> Summary of comments </p>
</li>
...
</ol>

The picture here is the user's avatar, so I think it should be put together with the username. So this kind of writing, with absolute positioning simple. Again, if you use floating, you must set the width of the floating object, otherwise its width will be based on the content calculation, where the

Well, the basic question is clear, and we start writing the style here (note to clear <ol> margin):

. comment{
List-style:none;
position:relative; * * to the Avatar absolute positioning a reference * *
width:100%; /* If the width is not set, there is a positioning problem under IE; reference on a having Layout a text
}
. Comment h3{
Background: #EFE;
margin-left:75px;
}
. Comment p{
margin-left:75px;
}
. comment. avatar{* * Avatar class/
Position:absolute;
top:0;
left:0;
}

If we put the Avatar individually, not with the user name, then you can not have absolute positioning. However, in an adaptive layout, using float to locate is also a very troublesome thing.

Four, right column watercress recommended

The biggest difficulty. Because the length of the title is inconsistent, the height of the floating block can not be unified (if not set), so that the second row of the float will have an impact. I did not think of any good way to solve this problem, so I can only give an imperfect writing (but this is very common):

<ul>
<li>
<div></div>
<p> name of the book or other item </p>
</li>
...
</ul>

Add a <div> easy control around the picture (see CSS below). The picture on the watercress is different in size (really a disaster), this example simplifies to the same picture size, this will not delay too much time.

I separate the <div> height and <p> height around the picture so that when you enlarge the text, you can maintain a relatively good readability (but there is still a shortage of places). The style sheet is as follows:

. itemlst{
width:350px;
margin:0;
padding:0;
}
. Itemlst li{
width:100px;
Padding:0 8px; * * Use margin in IE there will be a double margin Bug * *
Float:left;
Text-align:center;
List-style:none;
}
. itemlst Li Img{
padding:10px;
}
. itemlst Li Div{
width:100%;
height:120px; * * so that the image of the block height of uniform at 120px * *
}
. itemlst Li P{
Float:left;
Height:6em; /* Display up to four lines of text, and then zoom out.
Line-height:1.5em;
}

(through Strict verification, but nothing interesting-_-)

V. Other

• Because FF and IE are inconsistent with the effects of border:1px dotted #DDD display. So I usually use the background instead (this example does not do this).
• Text size control, set the Datum value small in the body, and then use a percentage to control all other text sizes. Specific can participate in the Bulletproof WebDesign, Chinese version of Books have also been listed. Another, this is just a habit, in the domestic production of web pages please according to the actual situation.
• About the fourth part of the writing, in another article has a description.
• At the beginning of the CSS, set the *{margin:0;padding:0} to unify the nuances of each browser.
• Finally set the various parts of the font and the spacing between the elements to complete the production of the entire page.
  View Final effect

IE there will be some local differences, we are interested, you can study, here only for the Firefox service.

Six, what we have learned

• The use of float for the layout, especially the second part of the second form is very common;
• Using Position:absolute; and position:relative; for local positioning;
• Floating block display of list items (<li>);
• You need to consider the issue of resizing window and change font size when making pages that meet standards.