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

2024-11-29 09:30:51

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS新闻列表制作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;/*使span元素浮动到右面*/
text-align: right;/*日期右对齐*/
}
.list li a:hover{
color: #336699;
}
</style>
</head>
<body>
<ul class=list>
<li><span>2007年12月21日</span><a href="#">新闻标题01</a></li>
<li><span>2007年12月21日</span><a href="#">新闻标题02</a></li>
<li><span>2007年12月21日</span><a href="#">新闻标题03</a></li>
<li><span>2007年12月21日</span><a href="#">新闻标题04</a></li>
</ul>
注意:span一定要放在前面,反之会产生换行
</body>
</html>

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

应用CSS制作的新闻网站中的文章列表:ul是html中的无序列表,li是列表中的列表项.如果没有CSS定义它的外观,它默认是显示成一列列表,并且它会存在项目符号(比如方块或实心的黑点)的列表内容.CSS网页布局中,除了新闻列表.链接运行ul.li制作以外,我们通常将菜单也用ul.li来实现. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml
利用AJAX实现WordPress中的文章列表及评论的分页功能

文章列表页分页一.加载 jQuery 库既然是 jQuery 驱动的 Ajax ,加载 jQuery 库是必须的. 二.文章列表格式在你的文章列表页面(首页 index.php.归档 archive.php )需要确保有以下类似的结构  <div id="content">  <div class="post"></div> <d
WordPress主题中添加文章列表页页码导航的PHP代码实例

WordPress 默认给主题开发者的建议是在文章列表底部提供上下页按钮,所以没有提供直接用在文章列表下的分页导航的函数.这里我提供一个比较完善的分页导航函数. /** *WordPress 文章列表分页导航 *http://www.endskin.com/page-navi/ */ function Bing_get_pagenavi( $query = false, $num = false, $before = '<article class="pagenavi postlistpa
纯CSS实现标签导航制作

在网上搜索了一下都没怎么看到纯用CSS制作标签导航方面的教程或者说明,大部分都是要涉及到JS的编写的.这对于很多CSS学习中的人来说实在有些不够体贴,既然没人做那我来先来试试!我在这里做的CSS标签导航是纯CSS无JS无背景图片的绿色导航.此文章适合初学者,高手可以路过,呵呵! nav02 *{ margin:0; padding:0; } .mainNav{ margin:0 20px; height:47px; border-bottom:2px solid #000; } ul{ marg
纯js+html和纯css+html制作手风琴效果

本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下一.纯css+html的手风琴效果这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> <head> <style> body{background: url('bg.gif') repeat;} ul,li,p{margin: 0px;padding: 0px;lis
纯css实现窗户玻璃雨滴逼真效果

这里仅是用CSS技术来演示这样的一个场景,可能并不太实用.然而这是一个探索CSS新功能的最佳机会.可以让你尝试使用一些新特性和新工具.并且逐渐将在工作中实践.在制作窗口雨滴效果,将使用到HAML和Sass. 案例效果查看演示源码下载看到上面的效果是不是有点像人站室内看窗外雨中的夜景,窗户上雨滴的效果是那么的真实,窗外的夜景却又是那么的模糊.咱们不在诗意化了,我想大家更为关注的是用什么样的技术来实现这样的一个效果. 预处理器在这个示例中,使用了HAML和Sass来替代我们熟悉的HTML和C
利用CSS制作3D动画

目录 CSS 3D 基础知识使用 transform-style 启用 3D 模式利用 perspective & perspective-origin 设置 3D视距,实现透视/景深效果通过绘制 Webpack Logo 熟悉 CSS 3D 实现文字的 3D 效果 3D 氖灯文字效果利用 CSS 3D 配合 translateZ 实现真正的文字 3D 效果利用距离.角度及光影构建不一样的 3D 效果 3D 计数器空间效果空间 3D 效果热身利用图片素材 3D 无限延伸视角动画
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码

复制代码代码如下: <HTML> <HEAD> <TITLE>JS+CSS制作的DIV层最小化和随意拖拽排序功能</TITLE> <style type="text/css"> body { margin:10px; } #dragHelper { position:absolute;/*重要*/ border:2px dashed #000000; background-color:#FFFFFF; filter: alp
CSS制作树状目录教程

本篇详细介绍如何利用CSS能方便地控制对象的"显示"和"隐藏"属性原理,制作一个树状目录,用CSS制作这样的树状目录,方法简单,代码也比较少,所以把它写出来,给网友们共亨,以便在需要的时候也可动手做一个. 索易电子杂志大多采用树状目录,当鼠标点击主目录时,展开子目录:当再次点击主目录时,则关闭子目录.显得简捷明快,朴实无华. 制作这种树状目录的方法较多,最近我先看下面的示例:当用鼠标在主目录上点一下,就下拉出相应的子目录,再点一下,又恢复原状,其效果与索易电子杂志上
支持IE6 IE7 Firefox 的纯CSS的下拉菜单

纯CSS的下拉菜单支持IE6 IE7 Firefox *{margin:0;padding:0;} .menu{font-size:12px;position:relative;z-index:100;} .menu ul{list-style:none;} .menu li {float:left;position:relative;} .menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;} .menu tab

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

相关推荐

随机推荐