长安长安
TW金牌会员
 
UID 125567
精华
21
积分 1291
帖子 641
阅读权限 70
注册 2008-2-15
状态 离线
|
|
|
四、右栏豆瓣推荐
3l-E6L5V!w/k#V$k程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛
'q-{0a;S(X最大的难点。因为书名长短不一致，导致浮动的块高度并不能够统一（如果不设置的话），这样对于第二排的浮动就会有影响。我没想出有什么好的办法可以解决这个问题，所以只能给一个不完美的写法（但这很常用）：
)N9i:o0M @!w+^1\ Z-O,M.f1D8O!j#B
<ul> tech.techweb.com.cn#b;o.H2]2h6z,v
<li> 程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛5Q&e:^&N,})G
<div><img src="..." alt="..." /></div> TechWeb-技术社区,A3J4I&k+p'@"|+F
<p>书或其他 item 的名字</p>
/h1T,W*k8g*v9|2V;P程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛</li> 程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛+\'L9`5I"h1~:p!|%V
...
0m/z&W*V7Y!Y8E</ul>
"w;g!x/W6G1b,t
;~5P1D"}1J!u+l6U0Z在图片周围增加一个 <div> 方便控制（看下面的 CSS）。豆瓣上的图片是大小不一的（真是灾难），本例简化为图片大小相同，这样不会耽误太多时间。
7y,s!T$J.w1z;G+m2@
)i)Y*e0y4E2UTechWeb-技术社区我把图片周围的 <div> 高度和 <p> 的高度分开，这样在放大文字的时候，可以保持相对良好的可读性（但还是有不足的地方）。样式表如下：
1L/c/i,l!a9}3O:A0VTechWeb-技术社区
4O5s4X*t-{.itemlst{ -U$B6I5e5V0{:o:e
width: 350px; TechWeb-技术社区/Q%}(Y/I&n2W#S
margin: 0;
:K'l3Z0h;s,]padding: 0;
1z$D6~&h$@tech.techweb.com.cn} 9s,o4W5d2F5W4?.`!h d
.itemlst li{ &^+?+^/c8_:{:^
width: 100px; tech.techweb.com.cn2B1W O K-p#N
padding: 0 8px; /* 使用 margin 在 IE 下会有 double margin 的 Bug */ (H#{;K4N9i }:c9u$n.Q2~
float: left;
3M!j,T.k!C"XTechWeb-技术社区text-align: center; !t:H0x9C;N!p-M
list-style: none;
#m3r$U+_(z.m}
8@9B3|;?#@-P&r4c.itemlst li img{
#i p+Z.V(f8}:m4?*x程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛padding: 10px;
4l1I'A$}$[5F+D*J5E.W程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛} tech.techweb.com.cn*S1G8O0Q1F:R
.itemlst li div{ ;I9g0p3f+E-X%L,L!R1t
width: 100%; 7h0v2G3`/_6v"x
height: 120px; /* 这样把图像所处的块高度统一在 120px */ +a-V)W;`9f
} 1V&H V5P/?&a:{)n3D5j
.itemlst li p{ 程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛3G'X8l&B+V5t
float: left; ;E2o![ h2e'~(e.p
height: 6em; /* 最多显示四行文字，再放大就不行了 */
,W!p7m2w#{+V9W9htech.techweb.com.cnline-height: 1.5em; 9z/q1R0l,_/y7]&u
} :o8x6v2U7P-v!m
7t7r)m6e,i.\!S&s
（通过 Strict 验证，不过没什么意思 -_-）
;S s1z-k$`,m%Y;g3V;j0_8C;d+H;g
五、其他 程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛!D0T#V;W'L9E4\8G'n
6d5k;E5N4g:R/M2e因为 FF 和 IE 对于 border: 1px dotted #DDD 显示的效果不一致。所以一般我会用背景代替（本例没有这么做）。 程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛"~1|(N'?2X$I/o9[
文字大小的控制，在 body 中设置基准值 small，然后使用百分比控制其他所有的文字大小。具体可以参考Bulletproof Web Design，中文版图书也已经上市。另，这只是习惯而已，在国内制作网页请根据实际情况量力而为。 )O2E%R'L!c;v
关于第四部分的写法，在另外的文章内有说明。
%E(c8P&_8_在 CSS 的一开始，设定 *{margin: 0;padding: 0}，统一各个浏览器的细微的差别。
*N A6c"a6D+e(\最后设置各部分的字体和元素间的间距，完成整个页面的制作。
1M/|*U0Q'D,[查看最终效果 TechWeb-技术社区0y-~9n/}!a.^(\9f#o!^8o
IE 下会有些局部的差异，大家有兴趣的话，可以研究一下，这里仅为 Firefox 服务。
|
引用
回复
|
|
