css3技术

DIVCSS实例教程:一款清新风格的CSS新闻列表制作_div+css布局教程

字号+ 作者:H5之家 来源:H5之家 2015-09-27 17:07 我要评论( )

DIVCSS实例教程:一款清新风格的CSS新闻列表制作,学习DIVCSS实例教程:一款清新风格的CSS新闻列表制作,DIVCSS实例教程:一款清新风格的CSS新闻列表制作,查看DIVC


  今天我们说说一款新闻列表的制作。新闻列表是一个网站的重要组成元素。我们会经常碰到它,如何处理他的外观显得尤为重要。这个实例中,我们将标题与日期作单独的浮动,而且在链接的鼠标悬停时,呈现出不同的色彩变化。而且我们控制LI的背景,让其也产生一些交互。总体上的效果还不错。大家可以看看下面的图片:



  XHTML代码很简单,就是一个无序列表,不过我们对标题和时间设置了不同的CLASS以方便控制。

div css xhtml xml Example Source Code

Example Source Code []


<ul id="pagelist">
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字标题的文字标题的文字标题的文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字标题的文字标题的文字标题的文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字标题的文字标题的文字标题的文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字字</span><span class="ldt">2007-08-06</span></a></li>
</ul>


  我们看下面的CSS代码:

div css xhtml xml Example Source Code

Example Source Code []

#pagelist {border:4px solid #ccc; padding:10px; width:530px; font-size:12px; list-style-type:none; }
#pagelist li {width:530px; height:30px;}
#pagelist li a .lbt {display:block; width:448px; float:left; text-indent:20px; text-decoration:none; white-space:nowrap; text-overflow:ellipsis; overflow: hidden; display:inline;}
#pagelist li a .ldt {display:block; width:75px; float:right; text-align:center; color:#069; text-decoration:none; display:inline;}
#pagelist li a {width:530px; height:30px; display:block; line-height:30px; color:#666; text-decoration:none; cursor:hand; background:url(20070807_bg.png) no-repeat 0 0;}
#pagelist li a:hover{ color:#03c; text-decoration:none; background:url(20070807_bg.png) no-repeat 0 -30px;}
#pagelist li a:hover .ldt {color:#000;}


  首先我们定义了UL的边框,内边距等相关常用的属性。
  我们设置了LI的宽度为530PX,高度为30px.
  我们对标题和时间进行了单独的设置。相关的属性也很轻易理解的。
  我们设置了链接的样式。主要需要注重的是色彩的变化及设置cursor:hand;。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • DIVCSS网页布局:用CSS实现表单form布局_div+css布局教程

    DIVCSS网页布局:用CSS实现表单form布局_div+css布局教程

    2015-10-02 15:06

  • CSSfloats来创建三栏网页布局的方法_div+css布局教程

    CSSfloats来创建三栏网页布局的方法_div+css布局教程

    2015-10-02 15:03

  • 左中右3栏布局中最先显示中栏内容的方法_div+css布局教程

    左中右3栏布局中最先显示中栏内容的方法_div+css布局教程

    2015-10-02 15:00

  • DIVCSS网页布局:三行三列自适应高度的DIV布局_div+css布局教程

    DIVCSS网页布局:三行三列自适应高度的DIV布局_div+css布局教程

    2015-10-02 14:28

网友点评