纯CSS制作的新闻网站中的文章列表
纯CSS制作的新闻网站中的文章列表
发布时间:2016-12-29 来源:查字典编辑
摘要:应用CSS制作的新闻网站中的文章列表:ul是html中的无序列表,li是列表中的列表项。如果没有CSS定义它的外观,它默认是显示成一列列表,...

应用CSS制作的新闻网站中的文章列表:ul是html中的无序列表,li是列表中的列表项。如果没有CSS定义它的外观,它默认是显示成一列列表,并且它会存在项目符号(比如方块或实心的黑点)的列表内容。CSS网页布局中,除了新闻列表、链接运行ul、li制作以外,我们通常将菜单也用ul、li来实现。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<title>CSS新闻列表制作webjx.com</title>

<styletype="text/css">

.list{

margin:0px10px20px;

text-align:left;

}

.listul{

list-style-type:none;

margin:0px;

padding:0px;

}

.listli{

width:100%;

}

.listlia{

color:#777777;

display:block;

padding:6px0px4px15px;

}

.listlispan{

float:right;/*使span元素浮动到右面*/

text-align:right;/*日期右对齐*/

}

.listlia:hover{

color:#336699;

}

</style>

</head>

<body>

<ulclass=list>

<li><span>2007年12月21日</span><ahref="#">新闻标题01</a></li>

<li><span>2007年12月21日</span><ahref="#">新闻标题02</a></li>

<li><span>2007年12月21日</span><ahref="#">新闻标题03</a></li>

<li><span>2007年12月21日</span><ahref="#">新闻标题04</a></li>

</ul>

注意:span一定要放在前面,反之会产生换行

</body>

</html>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类