`

【CSS布局.3】列表样式定义法

 
阅读更多

CSS代码:

.list{
 margin: 0px 10px 20px;
 text-align: left; 
}

.list ul{
 list-style-type: none;
 margin: 0px;
 padding: 0px;
}

.list li{
 background: url(/news/images/line.gif) repeat-x bottom; 
 /*列表底部的虚线*/
 width: 100%; 
}

.list li a{
 color: #777777;
 display: block;
 padding: 6px 0px 4px 15px;
 background: url(/news/images/dot.gif) no-repeat 0 6px;
 /*列表左边的箭头图片*/
}

.list li span{
 float: right;/*使span元素浮动到右面*/
 text-align: right;/*日期右对齐*/
}

.list li a:hover{
 color: #336699;
 background: url(/news/images/dot2.gif) repeat-x bottom;
}

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

<ul class="list">
<li><span>2005年5月30日 </span><a href="#">新闻标题01</a></li>
<li><span>2005年5月30日 </span><a href="#">新闻标题02</a></li>
<li><span>2005年5月30日 </span><a href="#">新闻标题03</a></li>
<li><span>2005年5月30日 </span><a href="#">新闻标题04</a></li>
</ul>
分享到:
评论

相关推荐

    CSS文档 CSS2.0.chm

    3. **盒模型**:CSS2.0定义了盒模型,这是布局的基础。每个HTML元素都被视为一个矩形盒子,包含边距(margin)、边框(border)、内填充(padding)和实际内容。理解盒模型对于精确控制元素尺寸至关重要。 4. **...

    基于ASP的mysuc精致ASP留言板_div+css布局.zip

    【标题】"基于ASP的mysuc精致ASP留言板_div+css布局.zip" 提供了一个使用ASP技术构建的留言板系统,该系统结合了div和CSS布局,旨在实现美观且响应式的网页设计。ASP(Active Server Pages)是微软开发的一种服务器...

    仙灵游戏网站模板,div+css布局 .rar

    【描述】中的信息进一步强调了这个模板是基于“div+css布局”,这意味着整个网站的架构和样式都是通过这两种技术构建的。这种布局方式具有良好的浏览器兼容性,响应式设计能力强,能够适应不同设备和屏幕尺寸,提升...

    CSS样式初始化commonInitialize.css

    在网页设计中,CSS(Cascading Style Sheets)样式被广泛用于定义页面元素的外观、布局和结构。CSS样式初始化是开发过程中一个重要的步骤,它旨在消除浏览器之间的默认样式差异,确保网页在不同浏览器上的一致性表现...

    DIV CSS图标文字列表布局样式.zip

    "DIV CSS图标文字列表布局样式.zip"是一个关于如何利用HTML的元素和CSS(层叠样式表)来创建具有图标和文字的列表样式的资源包。这个压缩包可能包含了示例代码、CSS样式文件以及可能的jQuery特效,旨在帮助开发者...

    css 2.0.chm

    9. **列表样式**:控制列表项的符号和顺序,让列表更具个性化。 10. **媒体查询**:虽然CSS 2.0的媒体查询功能相对较弱,但仍可以实现简单的响应式设计,针对不同设备或屏幕尺寸应用不同的样式。 ### CSS 2.0对Web...

    css.rar_css_css布局

    本资料“css.rar”聚焦于CSS布局,提供了全面的样式大全,旨在帮助开发者掌握各种布局技巧。 一、CSS基础布局概念 1. 块级元素与行内元素:块级元素如`&lt;div&gt;`占据整个宽度,通常用于创建结构;行内元素如`&lt;span&gt;`...

    div+css教案.pdf

    5. 列表样式:教授如何设计不同类型的列表样式。 6. 表格样式:讲解CSS在表格设计中的应用。 7. 表单样式:如何使用CSS定制表单元素的外观。 8. 链接样式:定义链接的颜色、状态和行为。 9. 网页排版和DIV+CSS布局:...

    CSS3天气预报卡片布局代码.zip

    综上所述,"CSS3天气预报卡片布局代码.zip"是一个实用的前端资源,结合了CSS3的先进样式技术与JavaScript的动态功能,为开发者提供了一种快速构建具有专业外观的天气预报组件的方法。通过学习和应用这个代码,开发者...

    DIV CSS图标文字列表布局样式.rar

    "DIV CSS图标文字列表布局样式" 主要关注如何利用 `DIV` 和 `CSS` 创建具有图标和文字相结合的列表样式,这种布局在网页设计中非常常见,如导航菜单、服务列表或产品展示等。 首先,理解 `DIV` 的基本概念。`&lt;div&gt;`...

    CSS3产品图文列表响应式布局.zip

    【CSS3产品图文列表响应式布局】是一种网页设计技术,主要应用于现代网页,尤其是那些需要在不同设备上呈现一致用户体验的网站。响应式布局的核心思想是根据用户的行为和设备环境(系统平台、屏幕尺寸、屏幕方向等)...

    h5前端页面公共样式CSS框架.zip

    1. **CSS文件**:这里包含的是预定义的样式规则,可能有基础样式、布局样式、组件样式等。例如,reset.css用于消除浏览器默认样式差异,common.css可能包含全局样式,而button.css可能专门定义按钮样式。 2. **HTML...

    DIV+CSS图标文字列表布局样式代码

    例如,可能有以下样式定义: ```css .list-item { display: flex; /* 使用Flexbox布局 */ align-items: center; /* 水平居中对齐 */ justify-content: space-between; /* 图片和文字之间的间距 */ } .list-item...

    CSS3常见问题列表布局特效.zip

    《CSS3常见问题列表布局特效详解》 在网页设计领域,CSS3(层叠样式表第三版)已经成为了实现各种视觉效果的重要工具。本资源"CSS3常见问题列表布局特效.zip"提供了一套实用的代码示例,适用于解决网页中的列表布局...

    html5+css3响应式购物商城商品列表布局特效.zip

    `img`目录可能包含用于商品展示的图片资源,而`css`目录下的文件,如`style.css`,则包含了定义商品列表布局和样式的CSS代码。在这个特效中,CSS可能运用了响应式设计技术,如媒体查询,以及Flexbox或Grid布局,来...

    DIV+CSS完美布局.pdf

    #### 一、DIV+CSS布局基础概念 **DIV+CSS**是一种网页设计布局方式,其中**DIV**是HTML中的一个标签,用于定义文档中的独立区域;**CSS**(Cascading Style Sheets)即层叠样式表,用来控制网页的样式并允许将样式...

    CSS3健身计划列表布局代码.zip

    在本资源"CSS3健身计划列表布局代码.zip"中,我们主要探讨的是如何利用CSS3技术来创建一个吸引人的、实用的健身计划列表布局。这个布局可能包含一系列的健身项目,每个项目都有清晰的展示、详细的信息以及互动效果,...

    CSS常用的图文布局列表.rar

    本文将详细探讨"CSS常用的图文布局列表"这一主题,以帮助你理解和掌握在网页设计中实现各种图文布局的方法。 一、基础布局方式 1. 流式布局:这是最基础的布局方式,元素按照从左到右的顺序排列,当屏幕宽度不足以...

    reset.css & normalize.css 下载

    reset.css的主要优点在于它彻底地“清零”了所有元素的样式,让开发者可以从一个空白的画布开始构建自己的布局。然而,这也意味着开发者需要为每个元素定义基本样式,增加了工作量。 **二、normalize.css** ...

    css..rar_css c_css.c

    这个CHM手册还可能涵盖CSS的最新标准,如CSS3引入的新特性,如多列布局、阴影、渐变、旋转、缩放等效果,以及对Web组件的支持。 通过深入学习并实践这个手册中的内容,你将能够掌握创建美观、高效且适应各种设备的...

Global site tag (gtag.js) - Google Analytics