Home>Web design tutorial>WEB standardization

DIVCSS example: Create a common blog list

Author：Eve Cole Update Time：2009-06-11 17:37:36
Creating lists or list-like page elements with CSS has always been a topic of discussion. Today we will learn a commonly used blog list. We have learned many ways to do lists. Here are examples you can refer to:

Rendering of this example:


First, take a look at its structure. Set the time layer date on the left, the title of the article h2, the description layer meta of the article, and the subject content of the article p

div css xhtml xml Example Source Code Example Source Code [www.downcodes.com]
<div id="wrap">
<div class="list">
<p class="date"></p>
<h2></h2>
<p class="meta"></p>
<p></p>
</div>
</div>

Put all elements into the layer with id wrap,
Let’s start writing HTML code in detail:

div css xhtml xml Example Source Code Example Source Code [www.downcodes.com]
<div id="wrap">
<div class="list">
<p class="date">September <b>03</b></p>
<h2><a href="http://www.downcodes.com/default.asp?cateID=9">DIV CSS layout example: ten steps of using css website layout! </a></h2>
<p class="meta">From: <a href="http://www.downcodes.com/">www.downcodes.com</a> | Editor: <a href="#">downcodes.com </a> | <a href="#">No reply?</a></p>
<p>New tab: Whenever you open a new tab, you will intuitively see your most visited websites, most commonly used search engines, recently bookmarked pages, recently closed tabs, etc. .
App Shortcuts: Enable web apps without opening a browser. Application shortcuts directly load your frequently used online applications. </p>
</div>
<div class="list">
<p class="date">August <b>26</b></p>
<h2><a href="http://www.downcodes.com/article.asp?id=813">Define list dl to create CSS list elements with pictures and texts</a></h2>
<p class="meta">From: <a href="http://www.downcodes.com/">www.downcodes.com</a> | Editor: <a href="#">downcodes.com </a> | <a href="#">No reply?</a></p>
<p>New tab: Whenever you open a new tab, you will intuitively see your most visited websites, most commonly used search engines, recently bookmarked pages, recently closed tabs, etc. .
App Shortcuts: Enable web apps without opening a browser. Application shortcuts directly load your frequently used online applications. </p>
</div>
<div class="list">
<p class="date">August <b>22</b></p>
<h2><a href="http://www.downcodes.com/article.asp?id=792">A cool CSS+JS menu example that can hide and slide out</a></h2>
<p class="meta">From: <a href="http://www.downcodes.com/">www.downcodes.com</a> | Editor: <a href="#">downcodes.com </a> | <a href="#">No reply?</a></p>
<p>New tab: Whenever you open a new tab, you will intuitively see your most visited websites, most commonly used search engines, recently bookmarked pages, recently closed tabs, etc. .
App Shortcuts: Enable web apps without opening a browser. Application shortcuts directly load your frequently used online applications. </p>
</div>
</div>

With the above foundation, start the following CSS coding:
Overall statement:

div css xhtml xml Example Source Code Example Source Code [www.downcodes.com]
* { margin:0; padding:0; font-size:12px; color:#666; list-style:none; font-family:Arial, Helvetica, sans-serif;}
body{ background:#ebead1;}
a{ color:#514f42;text-decoration:none;}
a:hover{ color:#669900;}

Set the wrap style of the entire layer to a width of 650px; the top and bottom margins are 30px, and the left and right horizontal and center alignment lists are set to a width of 650px for each list layer;

div css xhtml xml Example Source Code Example Source Code [www.downcodes.com]
#wrap{ width:650px; margin:30px auto; overflow:hidden;}
.list{ width:650px; padding:0 0 20px 0; margin:0 0 20px 0; border-bottom:1px dashed #666633;}

Set the time to float on the left, width 76px; text-transform: uppercase; (lowercase converted to uppercase)

div css xhtml xml Example Source Code Example Source Code [www.downcodes.com]
.list .date{ float:left;width:76px; height:58px; margin:0 20px 0 0; padding:2px 0 0; background:#514F42;text-transform: uppercase;text-align: center;font-size :10px;font-weight: bold; color:#FFF;}
.list b{display:block; font-size:40px; color:#FFF; line-height:40px;}

Set the title description layer meta; set its bottom margin to 25px so that the main content can be left aligned without wrapping.

div css xhtml xml Example Source Code Example Source Code [www.downcodes.com]
.list .meta{margin:0 0 25px 0; color:#979680;}
.list h2 a{font-size: 1.8em; }
.list p{ display:block; line-height:18px;}
Related Articles