List of articles, blog list, there is generally composed of the article name and time, the name of the article is behind time, click on the article name, the article can enter.
For aesthetics, the name of the article in general have a certain maximum word limit, length and width alignment, such as length and width of the uniform format more beautiful, this is relatively simple to do with the form, update a time when the need to add table rows on the line.
Page 1. This effect, the body of the page using three parts, the part of the title bar of the navigation bar, the contents of the middle column, below there is a bottom of the page. ( Three parts, related Bowen: HTML layout and typography are 4 three-part test image page ,)
2. navigation bar and title bar fills the entire browser width, the width of the self-applicable, uses a navigation bar Click the link on the navigation bar to jump the method, in addition, it may be a bulk links, because I like the text points navigation bar, lit habit, so do not block the use of the method. ( Navigation, related Bowen: the HTML Layout 2 production level navigation, )
3. The intermediate body portion, with the layout table, the intermediate article is tiled, so that no matter how much of the middle, automatically adaptive, to facilitate later deletions article. (Related Bowen: the HTML table layout and typography cleared padding ,)
4. Inside the body text and the internal time using table look format, tiled intermediate unit Gerry nested articles and a table for setting the time format.
Before Bowen has introduced production, where the contents of the previous integration a bit, make up a page, and the main Riga 3 nested tables, used to format the article list style.
1.2.3 has a blog post describes the style, nested tables presented here. Since the table nested tables, the code looks messy, usually distinguished by indentation, nested table unit Gerry large table look indentation, formatting codes, see table no area of the label, with annotations where marked out nested tables.
General structure: large body form, is divided into three lines, the first line is the top picture, a second row of nested tables, the third line is the bottom of the image.
The second line is the tile, the height is not provided, so that nested tables can be highly adaptive, then the content can be freely increased.
PS: Before Bowen introduced some div, some of the table, above the relevant Bowen typography is used here.
Page code: total blank line to separate the code area, the first area is the title bar, the navigation area is the second, and the third area is the content, the fourth area is the footer.
<body id="bodyA1"> <div id="header"> <div id="head1"></div> </div> <div id="d"> <ul> <li><a href="">简短问答</a></li> <li><a href="bloglistindex.html">>Li> </A</Bowen backup <li><a href="">测试用</a></li> <li><a href="">关于</a></li> </ul> </div> <div id="t1"> <table width="900px"> <tr> <td colspan=2 width="900px" height="165px" class= "td_top" > </ TD > </ TR > < TR > < TD class = "td_mid" width = "900px" > <-! nested tables Start -> < Table > < TR > < TD width = "600px" > < A href = "./ blogbacklist / b220.html" > [brief Q] how to test the virtual printer, virtual printer related </ A > </ td > < td width = "300px" >2019-09-23 14:30</td> </ TR > < TR > < TD width = "600px" > < A the href = "./ blogbacklist / b209.html" > LODOP Paper / printer / Copies / orientation / Duplex brief Q </ A > < / TD > < TD width = "300px by" > 2019-09-23 14:36 </ TD > </ TR > will be omitted. . . . . . . . . . . . A plurality of rows tr </ Table > <-! Ended nested tables -> </ TD > </ tr > < td colspan=2 width="900px" height="75px" class="td_bottom"></td> </tr> </table> </div> <div id="footer"><img src="./images/huaxie.png"></div> </body>
Nested table style code page :( remaining part blog post linked above style code again have introduced)
table{margin:auto;border-collapse:collapse;} td{padding:0px;} .td_top{background-image:url(../images/top.png);} .td_mid{background-image:url(../images/mid.png);padding-left:50px;line-height:30px;} .td_bottom{#8ea5e0;background-image:url(../images/bottom.png);} #t1{font-size:14px;} #t1 a{text-decoration:none;color:blue;}
Icon:
