IT技术江湖   操作系统   安全技术   平面设计   Web开发   数据库   互联网   搜索引擎   网络广告   
引擎技术江湖  BLOG  合作联系
本站
Google
IT技术江湖
首页>Web开发>DIV+CSS重构> 纯CSS制作的新闻网站中的文章列表
  • IT技术江湖
  • 纯CSS制作的新闻网站中的文章列表
    http://www.hack1st.com 来源: 2008-03-20 阅读: 评论

     应用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>

    上一篇:CSS设计符合Web标准的网页表单的几个技巧  
    下一篇:CSS布局实例:上中下三行,中间自适应

    ·网友互动--用户名: (新注册) 密码: 匿名评论 [所有评论]
    评论内容:(用户发表意见仅代表其个人意见,评论内容与本站立场无关,请自觉遵守互联网相关政策法规)
    关注此文读者还看过
    • ·从四个方面谈谈Web标准的价值所在
      ·CSS编写中灵活运行注释的意义
      ·用CSS制作的很不错的简洁的网页导航下拉菜
      ·一个用纯CSS制作的网页下拉菜单
      ·Div + CSS高度自适应解决方案
      ·简单了解学习CSS的伪类
      ·CSS 中的行为 —— expression
      ·网页制作基础知识:为什么我的设置的div最
      ·CSS样式表技巧总结
      ·DIV和CSS排版中制作细线条的几种方法
    最新更新
    • ·从四个方面谈谈Web标准的价值所在
      ·CSS编写中灵活运行注释的意义
      ·用CSS制作的很不错的简洁的网页导航下拉菜
      ·一个用纯CSS制作的网页下拉菜单
      ·Div + CSS高度自适应解决方案
      ·简单了解学习CSS的伪类
      ·CSS 中的行为 —— expression
      ·CSS样式表技巧总结
      ·DIV和CSS排版中制作细线条的几种方法
      ·运用 CSS 的 absolute 与 relative 制作的
    文章关注度排行
    ·Div + CSS高度自适应解决方案
    ·一个用纯CSS制作的网页下拉菜单
    ·用CSS制作的很不错的简洁的网页导航下拉菜
    ·DIV和CSS排版中制作细线条的几种方法
    ·控制网页文件大小通过精简CSS实现
    ·CSS的学习应该注意学习方法
    ·CSS让网页更容易设计与维护
    ·CSS实战:利用CSS相对定位进行多行多列布局
    热点推荐
    频道推荐
    • ·CSS的学习应该注意学习方法
    • ·CSS让网页更容易设计与维护
    • ·CSS设计符合Web标准的网页表单的几个技巧
    • ·巧妙运用CSS样式表立刻改变鼠标的样式
    • ·纯CSS制作的新闻网站中的文章列表
    • ·CSS布局实例:上中下三行,中间自适应
    • ·Web 的内容(Content)、结构(Structure)
    本站精华
    • ·巧妙运用CSS样式表立刻改变鼠
    • ·Web 的内容(Content)、结构
    • ·CSS让网页更容易设计与维护
    • ·CSS的学习应该注意学习方法
    • ·CSS布局实例:上中下三行,中间
    • ·纯CSS制作的新闻网站中的文章
    • | 网站导航 | 联系QQ | 编辑邮箱 | RSS订阅 | 友情链接 | 官方blog
    • 版权所有:IT技术江湖 @2007-2008
    • powered by www.hack1st.com online services. all rights reserved.京ICP备07005766号