用 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>

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