css竖向箭头符号_css列表实例:新闻竖向列表制作教程（垂直列表）

任务背景：

前面站长地带已经讲解了《横向列表之CSS导航条的制作》。本章CSS教程讲的是：《CSS列表实例：竖向列表》。

css列表在任何一个网站中都是必不可少的，比如网站的栏目导航条、网站的新闻列表，而归类分为：css横向列表和css竖向列表。

任务目标：

要求完成以下效果(新闻列表制作)

任务分析：

1、可以将整个放置在一个DIV容器内

01.

这里放置新闻列表-zzarea

2、新闻列表用ul li无序列表进行组合

01.

02.

03. 测试测试 [2012-08-10]

04.

05.

注意：

(1)在每一个列表LI内，又分为左右两部分内容，一部分是新闻标题，一部分是发表时间，注意我们的标签使用。

(2)你制作的新闻列表有几行，就复制几行

标签。

好了这样，我们的CSS内容结构部分就完成了，完整代码为

3、CSS样式修饰

CSS样式的修改依旧采用“从外到里，从上到下”的原则，一步一步的进行操作

步骤1：liebiao标签的设置，最外层的标签属性，一般是整体的设置，比如新闻列表的宽高、内边距、外边距之类。

01.*{ 02. margin:0px; 03. padding:0px; 04. } 05.body{ 06. font-size:14px; 07. font-family:"微软雅黑"; 08. } 09..liebiao{ 10. width:700px