Use CSS to make a news site list: UL is an unordered list in HTML, Li is the list item in the list. If no CSS defines its appearance, it is displayed by default as a list of columns, and it has a list of bullets (such as squares or black dots). CSS page layout, in addition to news lists, links run ul, Li Production, we usually will be the menu also with UL, Li to achieve.
The following is a reference fragment:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<TITLE>CSS News list Making webjx.com</title>
<style type= "Text/css" >
. list{
margin:0px 10px 20px;
Text-align:left;
}
. List ul{
List-style-type:none;
margin:0px;
padding:0px;
}
. List li{
width:100%;
}
. List Li a{
Color: #777777;
Display:block;
padding:6px 0px 4px 15px;
}
. List Li span{
Float:right;/* makes span elements float to the right
text-align:right;/* Date Right Alignment * *
}
. List Li a:hover{
Color: #336699;
}
</style>
<body>
<ul class=list>
<li><span>2007 year December 21 </span><a href= "#" > News headlines 01</a></li>
<li><span>2007 year December 21 </span><a href= "#" > News headlines 02</a></li>
<li><span>2007 year December 21 </span><a href= "#" > News headlines 03</a></li>
<li><span>2007 year December 21 </span><a href= "#" > News headlines 04</a></li>
</ul>
Note: span must be placed in front, and vice versa will result in line wrapping
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
