用 UL 制作的横向导航菜单效果

导航菜单可以说是网站制作中最常见的工作,当然,由于他的重要性(基本上整个网站所有页面都会显示),所以,有不少设计师在上面花费了很多心血。本文介绍的是对横向导航菜单的最简单的实现,相信明白了实现原理后,你可以制作出属于自己的精彩的导航效果,到时,可别忘了和大家共享哟!

用 UL 制作的横向导航菜单效果 – 示例

 
<style type="text/css">
#navsite h5 {
	display: none;
}
#navsite ul {
	padding: 3px 0; 
	margin-left: 0; 
	border-bottom: 1px solid #778; 
	font: bold 12px Verdana, sans-serif; 
}
 
#navsite ul li {
	list-style: none;
	margin: 0; 
	display: inline; 
}
 
#navsite ul li a {
	padding: 3px 0.5em; 
	margin-left: 3px; 
	border: 1px solid #778;
	border-bottom: none;
	background: #DDE;
	text-decoration: none;
}
 
#navsite ul li a:link {
	color: #448;
}
 
#navsite ul li a:visited {
	color: #667;
}
 
#navsite ul li a:link:hover, #navsite ul li a:visited:hover {
	color: #000;
	background: #AAE;
	border-color: #227;
}
 
#navsite ul li a#current {
	background: white; 
	border-bottom: 1px solid white;
}
</style>
 
<div id="navsite">
	<h5>Site navigation:</h5>
	<ul>
		<li><a href="#">首页</a></li>
		<li><a href="#">关于</a></li> 
		<li><a href="#">档案</a></li>
		<li><a href="#">作品</a></li>
		<li><a href="#" id="current">演讲</a></li> 
		<li><a href="#">联系</a></li>
	</ul>
</div>

可见,用这种方式做的导航,结构清晰,HTML代码简洁,改版时更是方便,根据本文的内容,相信您很容易做出符合自己网站风格的导航。

页面滚动条(scrollbar)颜色设置详解

一些网站为了整体效果,会调整页面滚动条的颜色,但是,这个解决方案只有 KDE 上的 Konqueror 浏览器和 Windows 上的 Internet Explorer 5.5+ 才支持,发在这里只是供有需要的人采用,因此,使用前要根据自己的用户群来进行选择。

 
<style type="text/css">
body, html {
	scrollbar-face-color: #353535;
	scrollbar-shadow-color: #565656;
	scrollbar-highlight-color: #565656;
	scrollbar-3dlight-color: #7F7F7F;
	scrollbar-darkshadow-color: #565656;
	scrollbar-track-color: #565656;
	scrollbar-arrow-color: #DADADA;
}
</style>

由于在 xhtml 中 定义在 body 上是没有效果的,所以为了通用,可以在 body 和 html 标签都定义一下。

这些属对应图例如下:

滚动条的显示与隐藏:

语法:

overflow : visible | auto | hidden | scroll

参数:

visible :  不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto :  此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden :  不显示超过对象尺寸的内容
scroll :  总是显示滚动条

单独控制横向滚动条或者纵向滚动条可以用 :overflow-x 和 overflow-y ,语法和 overflow 相同。

一个效果不错的 TAB 样式

本文介绍一种将 <ul> 和 <li> 修饰成 TAB 风格的 CSS 样式。

先看看最终效果:

css tab

一个效果不错的 TAB 样式 – 示例

现在我们可以结合效果来看看代码。

先看看 CSS 部分 :

 
<style type="text/css">

body {
	font-family:verdana,arial,sans-serif,"宋体";
	font-size:12px;
	margin:0px;
	padding:0px;
	background:#aaa;
}

a {
	color: #003499; 
	text-decoration: none;
}

a:hover {
	color: #000000; 
	text-decoration: underline;
}

#tabnav {
	background:#d5d5d5;
	border-bottom:1px solid #333;
	padding-bottom:3px;
}

#tabnav ul {
	padding:15px 0px 5px 0px;
	margin:5px 0px 5px 0px;
	list-style:none;
	background:#f1f1f1;
	border-bottom:1px solid #999;
}

#tabnav ul li {
	display:inline;
	margin-left:10px;
}

#tabnav ul li a {
	background:#fff;	
	padding:5px 10px 5px 10px;
	border:1px solid #999;
}

#tabnav ul li a:hover {
	background:#ccc;	
}

#tabnav ul li a.here {
	background:#d5d5d5;
	padding:5px 10px 5px 10px;
	border-top:1px solid #999;
	border-left:1px solid #999;
	border-right:1px solid #999;
	border-bottom:1px solid #d5d5d5;
}

#tabnav ul li a.here:hover {
	background:#d5d5d5;
}
	
</style>

代码中首先定义了整个文档的字体、文字大小及背景等信息,还定义了默认的链接样式。关键部分从 #tabnav 开始, #tabnav 就是要定义的 <ul> 的父元素,然后逐层定义 <li> <a> 等样式。

参照效果图我们可以看到:#tabnav ul li a.here 定义的是当前选中的链接样式。

对照着 (X)HTML 看看:

 
<div id="tabnav">
<ul>
	<li><a href="#">首页</a></li>
	<li><a href="#" class="here">技术文章</a></li>
	<li><a href="#">提交文章</a></li>
	<li><a href="#">联系我们</a></li>
</ul>
</div>

通过修改 CSS 我们可以很容易的改变整个 TAB 的显示风格。

用 UL 实现类似 Table 的数据列表样式

在 CSS 变成热门之前,大多数人都是用 table 来显示数据或者控制页面布局,自从大家开始关注 CSS 起,人们发现, table 远没有用 CSS 控制的代码结构清晰,而且一旦 CSS 被缓存到客户端,直接从服务器端加载的数据就大大减少了。因此,有众多的人开始研究 table 的替代方案,从页面布局到内容导航,而本文介绍的技巧是用 CSS 控制 <ul> 来实现类似于 table 的数据列表样式。

先看看效果:

css table

用 UL 实现类似 Table 的数据列表样式 – 示例

通过上面的图片和示例,我们很容易发现通过 CSS 是很容易实现类似 table 的数据列表样式,接下来让我们看看代码:

先看看 CSS 部分:

 
<style type="text/css">
<!--
body, td, div, p, span, textarea, select {
	font-size: 12px; 
	font-family: verdana, arial, helvetica, sans-serif
}
a {
	color: #003499; 
	text-decoration: none; 
	font-size: 12px;
}
a:hover {
	color: #000000; 
	text-decoration: underline; 
	font-size: 12px;
}
ul{
	margin:0px;
	padding:0px;
	width:265px;
	display:block;
	clear:both;
}
ul li{
	float:left;
	list-style-type:none;
	border-top:#000 solid 1px;
	border-left:#000 solid 1px;
	width:65px;
}
.border-r{
	border-right:#000 solid 1px;
}
.border-b{
	border-bottom:#000 solid 1px;
}
.border-l{
	border-right:#000 solid 1px;
	border-bottom:#000 solid 1px;
}
-->
</style>

接着再看看 (X)HTML:

 
<ul>
	<li>1-1</li>
	<li>1-2</li>
	<li>1-3</li>
	<li class="border-r">1-4</li>
</ul>
<ul>
	<li>2-1</li>
	<li>2-2</li>
	<li>2-3</li>
	<li class="border-r">2-4</li>
</ul>
<ul>
	<li>3-1</li>
	<li>3-2</li>
	<li>3-3</li>
	<li class="border-r">3-4</li>
</ul>
<ul>
	<li class="border-b">4-1</li>
	<li class="border-b">4-2</li>
	<li class="border-b">4-3</li>
	<li class="border-l">4-4</li>
</ul>

可见,控制显示样式的代码和数据结构分离后,整个代码更加清晰了,同时一旦 CSS 被缓存了,在其他页面调用相同样式的时候,加载的代码大大减少,而且,通过这样分离,我们很容易通过修改 CSS 而改变整个网站的风格。使网站改版或者维护变得更加容易。

文章摘要效果专题

本例是仿照 JEK2K.com 制作的文章摘要效果,简化部分代码,使摘要部分css相对独立。

文章摘要效果专题 – 示例

 
/* 主体样式 */
.story {
	margin:10px;
	border-bottom:1px solid #F06;
}
/* 主体链接样式 */
.story a { 
	color:#F06; 
	text-decoration:none; 
}
.story a:hover { 
	color:#000; 
}
/* 主体标题样式 */
.story h3 {
	font-size:16px;
	margin:0;
	border-top:3px solid #F06;
	padding-top:10px;
	color:#CCC;
}
/* 主体内容样式 */
.story p {
	line-height:150%;
}
/* 主体内容链接样式 */
.story p a {
	text-decoration:underline;
}
/* 主体图片样式 */
.story img {
	background-color:#d5d5d5;
	padding:3px;
	margin:10px 10px 10px 0;
}
.story img:hover {
	background-color:#eee;
}
/* 主体详细信息样式 */
.story .details {
	margin:5px 0 5px 0;
	text-align:left;
	border-bottom:1px solid #F06;
	padding:0 0 10px 0;
	font-size:11px;
	color:#666;
}
/* 主体底部链接样式 */
.story .continue {
	display:block;
	text-align:right;
	margin-bottom:15px;
}
 
<!-- 主体开始 -->
	<div class="story">
 
		<h3>
			<a href="#" rel="bookmark" title="欢迎来到 FreeBSD 的世界!">欢迎来到 FreeBSD 的世界!</a>
		</h3>
 
		<div class="details">
			Posted at 2006-08-32 22:32:11 &rarr; <a href="#" title="操作系统" rel="category tag">操作系统</a>
		</div>
 
		<p><img src="logo-red.png" alt="logo-red.png" /></p>
 
		<p>FreeBSD 基于<a href="#">加州大学伯克利分校计算机系统研究组(CSRG)</a>发布的 4.4BSD-Lite, 继承了 BSD 系统开发的优良传统。 除了 CSRG 优秀的工作之外, FreeBSD 项目花费了非常多的时间来优化调整系统, 使其在真实负载情况下拥有最好的性能和可靠性。像许多商业巨人努力地增加 PC 操作系统的特性、 提升性能并改善其可靠性一样, FreeBSD 现在 就已经可以提供了!</p>
 
		<p>FreeBSD 可以提供的应用事实上仅局限于您的想象力。从软件开发到工厂自动化,从存货控制到遥远的人造卫星天线方位控制, 如果商业的 <a href="#">UNIX</a> 产品可以做到,那么就非常有可能您也可以用 FreeBSD 来做! FreeBSD 也极大地受益于全世界的研究中心和大学开发的数以千计的高质量的应用程序,这些程序通常只需要很少的花费甚至免费。商业应用程序也是可用的,并且每天都有大量的出现。</p>
 
		<p>因为 FreeBSD 自身的源代码是完全公开的,所以对于特定的应用程序或项目,可以对系统进行最大限度的定制。</p>
 
		<span class="continue">
			<a href="#" title="浏览完整文章">浏览完整文章 &gt;&gt;</a>
		</span>
 
	</div>
	<!-- 主体结束 -->

用 CSS 实现 Firefox 和 IE 都支持的 Alpha 透明效果

有的时候,为了实现一些特殊效果,需要将页面元素变透明,本文介绍的就是用 CSS 实现 Firefox 和 IE 都支持的 Alpha 透明效果。

 
filter:alpha(opacity=50);       /* IE */
-moz-opacity:0.5;              /* Moz + FF */
opacity: 0.5;           /* 支持CSS3的浏览器(FF 1.5也支持)*/

IE使用私有属性filter:alpha(opacity),Moz Family使用私有属性-moz-opacity,而标准的属性是opacity(CSS 3, Moz Family部分支持CSS3)。后面的数值是透明度,使用百分比或者小数。

本文是一位未留姓名的网友提交的。

在此提醒热心网友,在提交文章时请填写详细的联系方式,以便文章发布!

CSS 分页导航样式

分页导航在程序开发中经常用到,而通常的做法是直接显示几个链接,本文介绍的是来自 DynamicDrive 的一个分页链接效果,html代码简洁,样式完全由css控制,很容易整合到自己的网站。

CSS 分页导航样式 – 示例

CSS 部分:

 
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.pagination{
padding: 2px;
}

.pagination ul{
margin: 0;
padding: 0;
text-align: left; /*Set to "right" to right align pagination interface*/
font-size: 16px;
}

.pagination li{
list-style-type: none;
display: inline;
padding-bottom: 1px;
}

.pagination a, .pagination a:visited{
padding: 0 5px;
border: 1px solid #9aafe5;
text-decoration: none; 
color: #2e6ab1;
}

.pagination a:hover, .pagination a:active{
border: 1px solid #2b66a5;
color: #000;
background-color: lightyellow;
}

.pagination li.currentpage{
font-weight: bold;
padding: 0 5px;
border: 1px solid navy;
background-color: #2e6ab1;
color: #FFF;
}

.pagination li.disablepage{
padding: 0 5px;
border: 1px solid #929292;
color: #929292;
}

.pagination li.nextpage{
font-weight: bold;
}

* html .pagination li.currentpage, * html .pagination li.disablepage{ /*IE 6 and below. Adjust non linked LIs slightly to account for bugs*/
margin-right: 5px;
padding-right: 0;
}

</style>

HTML 部分:

 
<div class="pagination">
<ul>
<li class="disablepage">« previous</li>
<li class="currentpage">1</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a>...</li>
<li><a href="#">15</a></li>
<li><a href="#">16</a></li>
<li class="nextpage"><a href="#">next »</a></li>
</ul>
</div>

不用 table 的 form 表单效果

以前做 form 时,通常是用两列表格,一列显示名称,一列放置表单元素。而本文介绍的是用 css 来实现的方法,便于控制全站风格,代码简洁。

不用 table 的 form 表单效果 – 示例

 
.cssform p{
	width: 300px;
	clear: left;
	margin: 0;
	padding: 5px 0 8px 0;
	padding-left: 155px; /*width of left column containing the label elements*/
	border-top: 1px dashed gray;
	height: 1%;
}

.cssform label{
	font-weight: bold;
	float: left;
	margin-left: -155px; /*width of left column*/
	width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
	width: 180px;
}

.cssform textarea{
	width: 250px;
	height: 150px;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
	margin-left: 3px;
}
 
<form id="myform" class="cssform" action="">

<p>
<label for="user">Name</label>
<input type="text" id="user" value="" />
</p>

<p>
<label for="emailaddress">Email Address:</label>
<input type="text" id="emailaddress" value="" />
</p>

<p>
<label for="comments">Feedback:</label>
<textarea id="comments" rows="5" cols="25"></textarea>
</p>

<p>
<label for="comments">Sex:</label>
Male: <input type="radio" name="sex" /> Female: <input type="radio" name="sex" /><br />
</p>

<p>
<label for="comments">Hobbies:</label>
<input type="checkbox" name="hobby" /> Tennis<br />
<input type="checkbox" name="hobby" class="threepxfix" /> Reading <br />
<input type="checkbox" name="hobby" class="threepxfix" /> Basketball <br />
</p>

<p>
<label for="terms">Agree to Terms?</label>
<input type="checkbox" id="terms" class="boxes" />
</p>

<div style="margin-left: 150px;">
<input type="submit" value="Submit" /> <input type="reset" value="reset" />
</div>

</form>

用列表(ul)的方式实现向前和向后跳转的链接样式

在许多文章显示页面,都会有一个向前和向后的跳转链接,虽然这是一个简单的功能,但是对于用户体验却有一个很大的提高.本文介绍的就是用列表(ul)的方式实现向前和向后跳转的链接样式.

用列表(ul)的方式实现向前和向后跳转的链接样式 – 示例

先看看效果:

用列表(ul)的方式实现向前和向后的按钮样式

 
<style type="text/css">
<!--
body, td, div, p, span, textarea, select {
	font-size: 12px; font-family: verdana, arial, helvetica, sans-serif
}
a {
	color: #DCB20C; text-decoration: none; font-size: 12px;
}
a:hover {
	color: #CC9933; text-decoration: underline; font-size: 12px;
}
ul#navigation {
	list-style-type: none;
	margin: 0;
	padding: .5em 0;
	border-top: 1px solid #666;
}

ul#navigation li a {
	display: block;
	width: 5em;
	color: #FFF;
	background-color: #036;
	padding: .2em 0;
	text-align: center;
	text-decoration: none;
}

ul#navigation li a:hover {
	color: #FFF;
	background-color: #69C;
}

ul#navigation .left { float: left; }
ul#navigation .right { float: right; }

-->
</style>
 
<ul id="navigation">
	<li class="left"><a href="#">Back</a></li>
	<li class="right"><a href="#">Next</a></li>
</ul>

CSS Beauty 风格的两列新闻显示样式

本文向您推荐的是 CSS Beauty 风格的两列新闻显示样式, 新闻是一般网站必不可少的功能, 而新闻列表的表现方式也是多姿多彩的, 本文介绍的是按两列显示的新闻列表方案, 同时还有一个 TAB 浏览的 Javascript 技巧和 FORM 元素的样式设计.

CSS Beauty 风格的两列新闻显示样式 – 示例

CSS 部分:

 
<style type="text/css">
<!--
body, td, div, p, span, textarea, select {
	font-size: 12px; font-family: verdana, arial, helvetica, sans-serif
}
a {
	color: #DCB20C; text-decoration: none; font-size: 12px;
}
a:hover {
	color: #CC9933; text-decoration: underline; font-size: 12px;
}

/* ClearFix */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {display: inline-table;}

/* Hides from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/* 公用 FORM 样式 */
input, textarea{
	background: #fff;
	border: 1px solid #83cde1;
	border-top: 3px solid #83cde1;
}
input:hover, textarea:hover {
	background: #F0FDE2;
	border-top: 3px solid #b1e77a
}
input:focus, textarea:focus {
	background: #FCFFEC;
	border-top: 3px solid #b1e77a
}
.submit { border: 0; width: auto; }
.submit:hover, .submit:active { border:0; }
.radio { background: none; border: 0; }


#news {
	margin:0;
	padding:0 15px 5px 10px;
	border-bottom: 1px dotted #BBE0EB;
}

/* TAB样式 开始 */
#news ul.domtabs {
	list-style: none;
	font-size: 0.9em;
	border-bottom: 1px dotted #BBDFED;
	margin: 0 0 20px 0;
	padding: 0 30px 2px 0;
	text-align: right;
}
#news ul.domtabs li {
	display: inline;
	margin: 0;
}
#news ul.domtabs a:link,
#news ul.domtabs a:visited,
#news ul.domtabs a:active,
#news ul.domtabs a:hover {
	text-decoration: none;
	padding: 2px 5px 4px 5px;
	position: relative;
	bottom: 0;
	color: #89C7D9;
}
#news ul.domtabs li.active a:link,
#news ul.domtabs li.active a:visited,
#news ul.domtabs li.active a:active,
#news ul.domtabs li.active a:hover {
	background:#fff;
	padding: 2px 10px 4px 10px;
	border: 1px dotted #BBDFED;
	border-bottom: 1px solid #fff;
	position: relative;
	bottom: 0;
	color: #418FA5;
}
#news ul.domtabs a:hover {
	text-decoration: underline;
}
#news ul.domtabs li.active a:hover {
	text-decoration: none;
}


/* 新闻列表样式 开始 */
#newswrap {
	margin:0;
}
#news-left, #news-right {
	float: right;
	width: 48%;
	max-width: 330px;
}
#news .more {
	clear: both;
	margin:0;
	padding: 0 15px 0 0;
	font-size: 0.85em;
	text-align: right;
	line-height: 1em;
}
#news .more img {
	vertical-align: bottom;
	border: 0;
	margin: 0 0 0 5px;
}
#news-right p, #news-left p {
	font-size: 0.85em;
	padding: 0 5px 0 0;
	margin: 0 0 0 12px;
	color: #4896AC;
}
#news-right p a, #news-left p a {
	font-weight: bold;
	display:block;
}
#news-right p a.continue, #news-left p a.continue {
	font-weight: normal;
}
#news p.author {
	color: #83cde1;
	border: 0;
	padding: 0 0 5px 0;
	margin: 0 10px 10px 12px;
	border-bottom: 1px dotted #BBE0EB;
}
#news p.author a {
	color: #86d734;
	font-weight: normal;
	display:inline;
	font-size: 0.85em;
}
#news p.author a:hover {
	text-decoration: underline;
}
#news p.author:hover {
	background: none;
}


/* FORM 表单样式 开始 */
#news #form {
	display: none;
}
#news form {
	float: right;
	margin: 0;
	padding: 0;
	background: #fff;
	font-size: 0.9em;
	width: 85%;
}
#news form p {
	padding: 0 0 0 20px;
	float: left;
	margin: 0;
	width: 180px;
	color: #4896AC;
}
#news form p.note {
	margin: 0 0 20px 0;
}
#news fieldset {
	border: 0;
}
#news legend {
	display: none;
}
#news label {
	display: block;
}
#news input {
	margin: 0 0 10px 0;
	display: block;
	width: 150px;
}
#news textarea {
	margin: 0;
	width: 150px;
	height: 100px;
}
#news .submit {
	width: auto;
	border: 0;
}

-->
</style>

HTML 部分:

 
<div id="news" class="domtab clearfix">

	<ul class="domtabs">
		<li class="active"><a href="#news-right">Current News</a></li>
		<li><a href="#submit-news">Submit News</a></li>
	</ul>

	<div style="display: block;" id="newswrap">	
	
		<div id="news-right">
			
			<p><a href="http://www.sitepoint.com/article/accessibility-techniques">Advanced Accessibility Techniques.</a> Techniques you can implement to achieve advanced accessibility beyond the W3C guidelines.</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 07 at 07:24 AM</p>
						
			<p><a href="http://www.brothercake.com/site/resources/reference/3d/">Dynamic 3D with CSS and the DOM.</a>Underground - A 3D dungeon environment built using Tantek's technique of creating shapes out of the interaction of CSS borders.</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 04 at 08:38 AM</p>
						
			<p><a href="http://www.brothercake.com/site/resources/scripts/dbx/">Docking boxes (dbx).</a> Adds animated drag 'n' drop, snap-to-grid, and show/hide-contents functionality to any group of elements.</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 03 at 11:22 AM</p>
						
			<p><a href="http://www.useit.com/alertbox/screen_resolution.html">Screen Resolution and Page Layout.</a> Optimize Web pages for 1024x768, but use a liquid layout that stretches well for any resolution, from 800x600 to 1280x1024.</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 02 at 07:50 AM</p>
						
			<p><a href="http://accessites.org/gbcms_xml/news_page.php?id=19">Visual Vs. Structural.</a> Does the choice of approach — visual vs structural — have any impact on the accessibility or usability of a site?</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 02 at 07:47 AM</p>
			
		</div>

		<div id="news-left">
			
			<p><a href="http://www.456bereastreet.com/archive/200608/google_valid_and_strict/">Google valid and strict.</a>Roger Johansson debunks the myth that Google has deprecated code tosave on bandwidth. He speculates why they still use old markup.</p>
			<p class="author">Posted by <a href="http://sonspring.com/">Nathan Smith</a> on Aug 15 at 01:37 AM</p>
						
			<p><a href="http://techfoolery.com/archives/2006/08/11/2021/">Animated Page Scroller</a>. An elegant JavaScript solution for page navigation</p>
			<p class="author">Posted by <a href="http://dustindiaz.com/">Dustin Diaz</a> on Aug 15 at 12:43 AM</p>
						
			<p><a href="http://www.aptana.com/" title="JavaScript Love Maker">Aptana Web IDE</a>. A robust, JavaScript-focused IDE for building dynamic web applications.</p>
			<p class="author">Posted by <a href="http://dustindiaz.com/">Dustin Diaz</a> on Aug 15 at 12:28 AM</p>
						
			<p><a href="http://www.flickrshow.com/">Flickrshow.</a> Provides you with the simplest way of displaying your Flickr photosets on your own website with the use of some javascript.</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 10 at 11:06 AM</p>
						
			<p><a href="http://jquery.com/demo/thickbox/">ThickBox 2.0.</a> Version 2 of the JQuery based photo slideshow script, new features include iFrame support, multi-picture slideshows and more.</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 09 at 09:31 AM</p>
			
		</div>

		<p class="more"><a href="http://www.cssbeauty.com/news/">News Archive</a> <a href="http://www.cssbeauty.com/rss/news/"><img src="rss.gif" alt="RSS Feed" /></a></p>

	</div>

	<div id="form">
		<form action="/news/submit/snews.php" method="post" id="submit-news">
			<fieldset>
				<legend>Submit News</legend>

				<p>
				<label for="title">Title:</label>

				<input type="text" tabindex="1" name="n-title" id="title" />

				<label for="url">News URL:</label>
				<input type="text" tabindex="2" name="n-url" id="url" />

				<label for="description">News Description:</label>
				<textarea tabindex="3" name="n-description" id="description" rows="5" cols="15"></textarea>
				<small>Max 120 characters</small>

				</p>

				<p class="note"><strong>Note:</strong> Your submission will be placed on queue pending review, if accepted your news item will show up in the next few hours.</p>
					
				<p>
				<label for="name">Your Name:</label>
				<input type="text" tabindex="4" name="s-name" id="name" />

				<label for="email">Your email:</label>

				<input type="text" tabindex="5" name="s-email" id="email" />

				<label for="yurl">Your Website:</label>
				<input type="text" tabindex="6" name="s-url" id="yurl" />
					
				<input class="submit" type="image" src="submit.gif" alt="submit" tabindex="7" />
				</p>
			</fieldset>
		</form>
	</div>

</div>

本文只是摘录原网站的部分代码, 目的是整理其实现技巧, 如果您有其他目的或用途, 请联系原网站.