JavaScript实现逐层分段显示内容

JavaScript代码

<script language="javascript">
var curr = 0;
function $(id){
return document.getElementById(id);
}
function showNextSection(){
var currSec = $('sec_' + curr);
var next = currSec.getAttribute('name');
var nextSec = $('sec_' + next);
if(nextSec){
// 设置段落为可见
nextSec.style.display = 'block';
// 若为最后一个段落，则隐藏按钮
if(nextSec.getAttribute('name') == null)
$('nextButton').style.display = 'none';
curr = next;
}
}
</script>

HTML内容

<div id="sec_0" name="1" class="section">
<!-- 段落内容1 -->
第一场比赛<br> 荷兰 1 : 0 日本
</div>
<div id="sec_1" name="2" class="section init-hidden">
<!-- 段落内容2 -->
第二场比赛<br> 加纳 1 : 1 澳大利亚
</div>
<div id="sec_2" name="3" class="section init-hidden">
<!-- 段落内容3 -->
第三场比赛<br> 喀麦隆 1 : 2 丹麦
</div>
<div id="sec_3" class="section init-hidden">
<!-- 段落内容4 -->
最新比赛敬请期待......<br> 斯洛伐克 vs. 巴拉圭 - 6月20日 下午1:30
</div>
<a id="nextButton" onClick="showNextSection(); return false;" href="#">显示下一段</a>

CSS样式
<style type="text/css">
.section{border:1px dotted #CCCCCC; margin-bottom:5px; padding:10px;}
.init-hidden{ display:none; }
#nextButton{ background:#FF0000; margin:5px; padding:5px; color:#FFFFFF
</style>

效果预览 | 下载请网页另存为

JavaScript实现隐藏显示层

JavaScript代码

<script language="javascript">
function showwords()
{
if(document.getElementById("hidewords").style.display=="none")
{document.getElementById("hidewords").style.display="";}
else
{document.getElementById("hidewords").style.display="none";}
}
</script>

HTML内容

<div id="hidewords" style="display:none; ">
斯洛伐克 vs. 巴拉圭 - 6月20日 下午1:30 <br />
意大利 vs. 新西兰 - 6月20日 下午4:00 <br />
巴西 vs. 科特迪瓦 - 6月20日 下午8:30
</div>
<a href="javascript:showwords()" id="button">点击显示/隐藏赛场 </a>

效果预览 | 下载请网页另存为

• 2010-06-27 -- 南非世界杯小组赛中的血性铁人 (11)
• 2010-06-12 -- 2010最“臭”的一届世界杯 (6)

摘自：MarsLau's Blog | 原文链接：Permalink |
Tags: JavaScript, js, 世界杯

您可能也喜欢：
2010最“臭”的一届世界杯	南非世界杯小组赛中的血性铁人	回想去年毕业	产品包装	wordpress插件推荐：WP-EasyArchives 以及月存档链接问题补充
无觅

Feed enhanced by Better Feed from Ozh

float的3像素问题及解决办法

当使用float浮动容器后，在IE6下会产生3px的空隙，有意思的是右侧容器没设置高度时3px在右侧容器内部，当设定高度后又跑到容器的左侧了，所以对布局精度要求高的话，可以在float浮动容器样式里加针对IE6的属性”_margin-right”和”*html”，如：

#sidebar{ float:left; width:200px; _margin-right:-3px;}

或者

#sidebar{ float:left; width:200px;}
*html #sidebar{ margin-right:-3px;}

上边容器浮动后，下边的容器跟着浮动，造成页面错乱

如图中布局所示：footer必须要单独占一行，但当sidebar浮动后，content的高度小于sidebar的高度时，footer也跟着浮动到sidebar右侧了，造成页面错乱。解决办法是在maincontent和footer之间插入一个容器，设置样式
clear:both; height:0; font-size: 1px; line-height: 0px;用clear:both清除，即可使页面正常

IE6下float浮动导致双倍边距的bug

当页面内有多个连续浮动时，如本页的图标列表是采用左浮动，此时设置li的左侧margin值时，在最左侧呈现双倍情况。如外边距设置为10px，而左侧则呈现出20px，解决它的方法是在浮动元素上加上display:inline;的样式，这样就可避免双倍边距bug

当子元素浮动且未知高度时，怎么使父容器适应子元素的高度？

这种情况可在父窗口加上 overflow:auto;zoom:1;这两个样式属性，overflow:auto;是让父容器来自适应内部容器的高度，zoom:1;是为了兼容IE6而使用的CSS
HACK。zoom:1;通不过W3C的验证，这也是遗憾的一点，幸好IE支持<!–[if IE]>这种写法，可以专门针对IE来写单独的样式，所以可以把这个属性写在页面内的<!–[if IE]>中，这样应该可以通过验证了

css布局的相对定位与绝对定位

规划页面时，许多时候需要用到相对定位或绝对定位，这里边有个css技巧，掌握后有些地方就不用繁冗的js了。就是当父容器使用相对定位后，此时子元素再使用绝对定位，位置是相对于父元素。如果父元素没有定位，那么子元素的绝对定位是相对于浏览器

• 2009-03-12 -- WordPress主题RBcss发布 (77)
• 2008-07-10 -- CSS制作图片弹出展示效果 (3)
• 2008-06-03 -- CSS制作Tab菜单样式 (3)
• 2008-05-31 -- CSS自适应宽度圆角按钮 (3)
• 2008-05-28 -- 53种网页设计师必备的高级CSS技巧 (1)
• 2008-05-25 -- CSS定义网页滚动条 (0)
• 2008-05-25 -- 用css给图片加阴影 (2)

摘自：MarsLau's Blog | 原文链接：Permalink |
Tags: css布局, CSS样式, float, 浮动

您可能也喜欢：
CSS制作Tab菜单样式	CSS自适应宽度圆角按钮	用css给图片加阴影	53种网页设计师必备的高级CSS技巧	CSS制作图片弹出展示效果
无觅

Feed enhanced by Better Feed from Ozh

介绍一种用css制作缩略图弹出全图的方法，实现过程中没有用到任何的js。

HTML代码：

<DIV id=pic>
<A class=p1 title=”thumbnail image” href=”http://marslau.com/html/CSS-Image-PopUp/CSS-Image-PopUp.htm” mce_href=”http://marslau.com/html/CSS-Image-PopUp/CSS-Image-PopUp.htm”><img title=”BeautyTn” height=100 src=”Beauty-tn.jpg” mce_src=”Beauty-tn.jpg” width=100><IMG class=large title=”Beauty” height=498 src=”Beauty.jpg” mce_src=”Beauty.jpg” width=500></A>
</DIV>

对应的CSS：

#pic {WIDTH: 100px; BACKGROUND-COLOR: #ffffff; margin: 100px 0 0 80px;}
#pic A .large { BORDER: 0px; DISPLAY: block; WIDTH:0px; HEIGHT: 0px; } /*首先将大的展示图的高宽设为0，既不显示*/
#pic A IMG { BORDER: 0px;}
#pic A.p1 { BORDER: #000000 1px solid; DISPLAY: block; BACKGROUND: #ffffff; LEFT: 0px; WIDTH: 100px; TOP: 0px; HEIGHT: 100px; TEXT-DECORATION: none}
#pic A.p1:visited { BORDER: #000000 1px solid; DISPLAY: block; BACKGROUND: #ffffff; LEFT: 0px; WIDTH: 100px; TOP: 0px; HEIGHT: 100px; TEXT-DECORATION: none}
#pic A.p1:hover {COLOR: #000000; BACKGROUND-COLOR: #8c97a3; TEXT-DECORATION: none}
#pic A.p1:hover .large {BORDER: #000000 1px solid; DISPLAY: block; LEFT: 150px; WIDTH: 500px; POSITION: absolute; TOP: 0px; HEIGHT: 498px } /*当鼠标经过缩略图时，展示图再设定的绝对位置显示*/

     查看效果

• 2009-09-10 -- 5个css布局的常见问题及解决方法 (10)
• 2009-03-12 -- WordPress主题RBcss发布 (77)
• 2008-06-03 -- CSS制作Tab菜单样式 (3)
• 2008-05-31 -- CSS自适应宽度圆角按钮 (3)
• 2008-05-28 -- 53种网页设计师必备的高级CSS技巧 (1)
• 2008-05-25 -- CSS定义网页滚动条 (0)
• 2008-05-25 -- 用css给图片加阴影 (2)

摘自：MarsLau's Blog | 原文链接：Permalink |
Tags: CSS样式, 缩略图

您可能也喜欢：
用css给图片加阴影	CSS制作Tab菜单样式	53种网页设计师必备的高级CSS技巧	5个css布局的常见问题及解决方法	CSS自适应宽度圆角按钮
无觅

Feed enhanced by Better Feed from Ozh

     查看效果:CSS制作Tab菜单

     图片源文件下载

• 2009-09-10 -- 5个css布局的常见问题及解决方法 (10)
• 2009-03-12 -- WordPress主题RBcss发布 (77)
• 2008-07-10 -- CSS制作图片弹出展示效果 (3)
• 2008-05-31 -- CSS自适应宽度圆角按钮 (3)
• 2008-05-28 -- 53种网页设计师必备的高级CSS技巧 (1)
• 2008-05-25 -- CSS定义网页滚动条 (0)
• 2008-05-25 -- 用css给图片加阴影 (2)

摘自：MarsLau's Blog | 原文链接：Permalink |
Tags: CSS样式, tab, 样式

您可能也喜欢：
CSS自适应宽度圆角按钮	5个css布局的常见问题及解决方法	CSS定义网页滚动条	CSS制作图片弹出展示效果	用css给图片加阴影
无觅

Feed enhanced by Better Feed from Ozh

先来看张图片：

原理就是通过背景的左对齐和右对齐用A标签和span标签组合出一个完整的圆角矩形。再通过hover标签去滑动图片。ok，看看代码吧.

CSS:

*{margin:0; padding:0;}
body{padding:10px; font-size:12px;}
h1{margin:0; padding:10px 0; font-size:14px; font-weight:bold;}
a{background:url(1.gif) left 0; color:#fff; text-decoration:none; height:30px; float:left; cursor:hand; margin:0 5px 0 0;}
a:hover{background:url(1.gif) left -30px;height:30px;}
a span{background:url(1.gif) right 0; padding:7px 8px 7px 0; margin:0 0 0 8px; float:left; height:16px;}
a:hover span{background:url(1.gif) right -30px; color:#000; padding:7px 8px 7px 0; margin:0 0 0 8px; height:16px; }

HTML:

<body>
<a href=”#” mce_href=”#”><span>首页</span></a>
<a href=”#” mce_href=”#”><span>不是首页</span></a>
<a href=”#” mce_href=”#”><span>他也许是首页</span></a>
<a href=”#” mce_href=”#”><span>但他一定不是首页</span></a>
<a href=”#” mce_href=”#”><span>好了，就这样把。别扯了~</span></a>
</body>

演示地址：

http://www.aspxhome.com/examples/design/css/237320/liquid-css-menu.htm

PS：本文摘自“中国asp之家”

• 2009-09-10 -- 5个css布局的常见问题及解决方法 (10)
• 2009-03-12 -- WordPress主题RBcss发布 (77)
• 2008-07-10 -- CSS制作图片弹出展示效果 (3)
• 2008-06-03 -- CSS制作Tab菜单样式 (3)
• 2008-05-28 -- 53种网页设计师必备的高级CSS技巧 (1)
• 2008-05-25 -- CSS定义网页滚动条 (0)
• 2008-05-25 -- 用css给图片加阴影 (2)

摘自：MarsLau's Blog | 原文链接：Permalink |
Tags: CSS样式

您可能也喜欢：
CSS制作Tab菜单样式	用css给图片加阴影	5个css布局的常见问题及解决方法	CSS定义网页滚动条	53种网页设计师必备的高级CSS技巧
无觅

Feed enhanced by Better Feed from Ozh

1. CSS Based Navigation CSS导航菜单

鼠标悬浮时的凸出效果比较酷。

2. Navigation Matrix Reloaded

动态高亮的CSS导航菜单，非常有质感。

3. CSS Tabs

提供多种CSS Tab选项卡导航菜单样式。

4. CSS Bar Graphs (CSS For Bar Graphs)

用CSS创建的图形工具条。

5. Collapsing Tables: An Example

一个CSS表格演示

6. Adam’s Radio & Checkbox Customisation Method

较简单的复选框 效果

7. CSS Image Replacement

用CSS来实现图片替换文本标题的技术教程。

8. CSS Shadows (CSS Shadows Roundup)

CSS阴影效果生成技术

9. CSS Rounded Corners Roundup (Nifty Corners)

用CSST生成圆角效果

10. Drop Cap – Capital Letters with CSS

CSS生成的首字下沉效果

11. Define Image Opacity with CSS

使用CSS来修改图像的透明度

12. How to Create a Block Hover Effect for a List of Links

让所有HTML元素都能实现悬浮效果

13. Pullquotes with CSS (Automatic Pullquotes with JavaScript and CSS

使用Javascript和CSS结合实现的样式化引用

14. CSS Diagrams

用CSS实现的一览图

15. CSS Curves

CSS实现的曲线图布局

16. Footer Stick 可以让你在网页的底部覆盖一个DIV层

17. CSS Image Map

CSS实现的图片地图

18. CSS Image Pop-Up

用CSS达到图片的弹出展示效果，不需要任何Javascript

19. CSS Image Preloader

CSS的一个背景图片Hack方法

20. CSS Image Replacement for Buttons

CSS按钮生成

21. Link Thumbnail

用CSS实现的链接缩略图

22. CSS Map Pop

CSS地图弹出提示

23. PHP-based CSS Style Switcher

基于PHP的网站风格切换

24. CSS Unordered List Calender (CSS Styled Calender)

CSS结合无序列表实现的漂亮日历

25. CSS-Based Forms: Techniques

使用CSS实现的表单技术

26. CSS-Based Tables: Techniques

使用CSS实现的表格技术，主要是有高亮单元格等功能。

27. Printing Web-Documents and CSS

打印网页文档和CSS的服务

28. Improved Links-Display for Print-Layouts with CSS

CSS实现的打印布局

29. CSS-Submit Buttons

CSS实现的提交按钮，鼠标悬浮时实现切换效果

30. CSS Teaser Box

CSS实现的漂亮的圆角阴影模块

31. CSS Tricks for Custom Bullets

32. Ticked Off Links Reloaded

很酷的CSS关闭链接技巧

33. CSS Zooming

CSS实现文本大小的缩放

34. Creating a Star Rater using CSS

利用CSS制作星形评级系统

35. The ways to style visited Links

简单的样式化已经点击过的链接

36. PDF, ZIP, DOC Links Labeling

利用CSS为PDF、ZIP、DOC指定不同的图标

37. Displaying Percentages with CSS

利用CSS实现的百分度进度条显示

38. Image Floats without the Text Wrap

一个CSS的图片排版技术

39. Let visitors decide, whether or not will they open link in a new window

让使用者决定，是否在一个新窗品打开链接

40. Simple accessible external links

简单的对外部链接的美化效果

41. Zebra Table with JavaScript and CSS

使用Javascript和CSS实现的表格特效

42. Vertical Centering with CSS (Horizontal and Vertical Centering with CSS

利用CSS实现的垂直居中效果

43. Unobtrusive Sidenotes

CSS实现的旁注特效

44. Image Caption with CSS (Styled Images with Caption)

样式化图片的标题说明

45. Dynamic Piechart with CSS

动态的CSS饼形图表

46. Format Footnotes with CSS

使用CSS格式化页脚注释

47. Hierarchical Sitemap with CSS

利用CSS完成的层联树形菜单

48. Snook’s Resizable Underlines

49. Switchy McLayout: An Adaptive Layout Technique

CSS的自适应布局技巧

50. StyleMap: CSS+HTML Visual Sitemap

CSS+HTML的视觉网站地图

51. Custom Reading Width

自定义阅读内容的宽度

52. CSS Alert Message

53. CSS Production Notes

PS:本文摘自：帕兰映像

• 2009-09-10 -- 5个css布局的常见问题及解决方法 (10)
• 2009-03-12 -- WordPress主题RBcss发布 (77)
• 2008-07-10 -- CSS制作图片弹出展示效果 (3)
• 2008-06-03 -- CSS制作Tab菜单样式 (3)
• 2008-05-31 -- CSS自适应宽度圆角按钮 (3)
• 2008-05-25 -- CSS定义网页滚动条 (0)
• 2008-05-25 -- 用css给图片加阴影 (2)

摘自：MarsLau's Blog | 原文链接：Permalink |
Tags: CSS样式, 技巧

您可能也喜欢：
CSS自适应宽度圆角按钮	用css给图片加阴影	CSS制作Tab菜单样式	CSS定义网页滚动条	5个css布局的常见问题及解决方法
无觅

Feed enhanced by Better Feed from Ozh

overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容
overflow: auto; 在需要时内容会自动添加滚动条
overflow: scroll; 总是显示滚动条
overflow-x: hidden; 禁止横向的滚动条
overflow-y: scroll; 总是显示纵向滚动条

（二）以下代码定义滚动条的样式：

<STYLE>
BODY {
SCROLLBAR-FACE-COLOR: #f892cc;        //滚动条凸出部分的颜色
SCROLLBAR-HIGHLIGHT-COLOR: #f256c6;     //滚动条空白部分的颜色
SCROLLBAR-SHADOW-COLOR: #fd76c2;     //立体滚动条阴影的颜色
SCROLLBAR-3DLIGHT-COLOR: #fd76c2;     //滚动条亮边的颜色
SCROLLBAR-ARROW-COLOR: #fd76c2;     //上下按钮上三角箭头的颜色
SCROLLBAR-TRACK-COLOR: #fd76c2;     //滚动条的背景颜色
SCROLLBAR-DARKSHADOW-COLOR: #f629b9;     //滚动条强阴影的颜色
SCROLLBAR-BASE-COLOR: #e9cfe0;     //滚动条的基本颜色
}
</STYLE>

注意：如果你的静态页面顶端有类似与这样的代码<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> ，请将这段代码删除或将BODY {…}更改为HTML{…}即可见滚动条效果。

（三）网页中去掉滚动条：
去掉横向滚动条：<body   style=’overflow:scroll;overflow-x:hidden’>  
去掉竖向滚动条：<body   style=’overflow:scroll;overflow-y:hidden’>  
两个都去掉：<body   scroll=”no”>  
框加中去滚动条在name=”"后面加 scrolling=”No”

• 2009-09-10 -- 5个css布局的常见问题及解决方法 (10)
• 2009-03-12 -- WordPress主题RBcss发布 (77)
• 2008-07-10 -- CSS制作图片弹出展示效果 (3)
• 2008-06-03 -- CSS制作Tab菜单样式 (3)
• 2008-05-31 -- CSS自适应宽度圆角按钮 (3)
• 2008-05-28 -- 53种网页设计师必备的高级CSS技巧 (1)
• 2008-05-25 -- 用css给图片加阴影 (2)

摘自：MarsLau's Blog | 原文链接：Permalink |
Tags: CSS样式

您可能也喜欢：
CSS制作Tab菜单样式	CSS自适应宽度圆角按钮	CSS制作图片弹出展示效果	用css给图片加阴影	5个css布局的常见问题及解决方法
无觅

Feed enhanced by Better Feed from Ozh

只需要在<img>标记前加上以下语法，就可以运用滤镜制作阴影效果了。

<span style=”filter:shadow(color=gray,direction=45);width:100%;”>        // color为阴影的颜色，direction表示影音的角度（需以45度为1个单位）

效果如下：

• 2009-09-10 -- 5个css布局的常见问题及解决方法 (10)
• 2009-03-12 -- WordPress主题RBcss发布 (77)
• 2008-07-10 -- CSS制作图片弹出展示效果 (3)
• 2008-06-03 -- CSS制作Tab菜单样式 (3)
• 2008-05-31 -- CSS自适应宽度圆角按钮 (3)
• 2008-05-28 -- 53种网页设计师必备的高级CSS技巧 (1)
• 2008-05-25 -- CSS定义网页滚动条 (0)

摘自：MarsLau's Blog | 原文链接：Permalink |
Tags: CSS样式

Feed enhanced by Better Feed from Ozh