当前位置:  编程技术>WEB前端

纯CSS制作的新闻网站中的文章列表

    来源: 互联网  发布时间:2014-09-06

    本文导语:  应用CSS制作的新闻网站中的文章列表:ul是html中的无序列表,li是列表中的列表项。如果没有CSS定义它的外观,它默认是显示成一列列表,并且它会存在项目符号(比如方块或实心的黑点)的列表内容。CSS网页布局中,除了新闻...

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

 
 
 
 
CSS新闻列表制作webjx.com 
 
.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;/*使span元素浮动到右面*/ 
text-align: right;/*日期右对齐*/ 

.list li a:hover{ 
color: #336699; 

 
 
 
 
  • 2007年12月21日新闻标题01
  •  
  • 2007年12月21日新闻标题02
  •  
  • 2007年12月21日新闻标题03
  •  
  • 2007年12月21日新闻标题04
  •  
     
    注意:span一定要放在前面,反之会产生换行 
     
     

        
     
     
     
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • CSS中Float(浮动)相关技巧文章
  • java命名空间javax.swing.text.html类css的类成员方法: css定义及介绍
  • <!--@import"css/cssset/.css-->,css/cssset/.css是什么意思?
  • java命名空间javax.swing.text.html类css的类成员方法: getattribute定义及介绍
  • CSS预处理器 Less CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: font定义及介绍
  • css强制换行 css强制不换行的css方法
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: margin定义及介绍
  • CSS代码格式化 CSS Beautify
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: padding定义及介绍
  • jquery css类用法(添加、修改与删除css)
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: border定义及介绍
  • CSS 框架 Simpl.css
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: clear定义及介绍
  • CSS解析器 CSS Parser
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: height定义及介绍
  • CSS压缩器 Css Compressor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: color定义及介绍
  • Eclipse的CSS编辑插件 CSS Editor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: display定义及介绍
  • jQuery添加/改变/移除CSS类及判断是否已经存在CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: float定义及介绍
  • CSS代码检查工具 CSS Lint


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3