FW设计资源小集

 


2.盒子内容：List
内容清单无非就是这几个元素：point（点、编号、指示图标），*分类名（次要，放在首页时，文章所属的子分类），单个清单标题，New（最新的文章），发表时间，li下框线（一般为浅色直线或虚线）。
在上面的“各种盒子”已经有一些样式，这里接合CSS网页制作，来提供一些现有方案。
建议使用ul,li来显示条目链接，这样比较有条理性，而且也符合Web2.0的制作要求（我指的不是用了什么标记，而是指标记形式表现了内容：链接条目清单）。当然，网页中还没用到XHTML的话，用ul li对程序员也是福音，代表结构也更好些。
（1）point一般用list-style-type来写（有多种type，详情请查阅css手册）。上次有人问到list-style的颜色怎么改变，其实，就是ul li的文本色（color:#aaa）。
但在不同的浏览器下，效果会不一样，建议一般用背景图片（ul li{background:url() no-repeat left 48%; padding-left:15px;}）。
（2）分类名通常用中刮号"[...]"刮起来，或是加粗，又或是链接变色。放在point和text之间。变色放在前面效果更好。

（3）清单标题是条目文本和链接，这个没什么好说的，链接样式一般是"ul li a(顺序是link,visited,hover,active)<谢谢26楼>"
（4）New最新的两、三篇文章，或是最热(Hot)的几篇。有时会放一个图标或是把point变色，又或是把标题变色，有时是一个很小的图标。这些图标的高度通常低于文本高度，即12px以下，矢量图最好是实边，适应任何背景环境。不管图有多简洁，一定要用与文本不同的高亮或突出的色表示醒目。这里提供几种收集来的图片方案。



（5）发表时间一般喜欢放在最右边，或是代替分类名，放在标题的前面。颜色会比较浅，无链接状态。ul li中处理放在右边时间，通常是用<span>标记括起来，然后CSS用ul li span{float:right;}将时间向右对齐。
共10页: 上一页 [1] [2] [3] [4] 5 [6] [7] [8] [9] [10] 下一页

评论加载中…