CSS控制内容的隐藏与限时,点击more后展示

2008-11-14 11:29:00 | 【

网页刚加载时只显示部分内容,点击More按钮后显示全部内容,CSS控制,兼容各种浏览器

查看全部代码 View Code

第一步:
在网页<head>区添加样式定义


<style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_variations.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.

由站酷(zcool)http://www.zcool.com.cn/ 整理 
来源于:http://www.cssplay.co.uk
=================================================================== */
 /* common styling */

 /* Set up the default font and ovrall size to include image */
 body {
	background: #fff;
	font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
	font-size: 11px;
}
.holder {width:210px; margin:5px; padding:5px; border:1px solid #ddd; float:left; background:#f8f8f8;}
.holder h2 {text-align:left;}
a.hid {color:#000; text-decoration:none; outline-style:none; position:relative; z-index:500;}
a.hid em {display:none;}
a.hid:hover {text-decoration:none;}
a.hid:active, a.hid:focus {background:#fff;}
a.hid:active span, a.hid:focus span {display:none;}
a.hid:active em, a.hid:focus em {display:block; background:#f8f8f8; color:#000; width:210px; font-style:normal; cursor:default; padding:5px 5px 20px 5px; position:absolute; left:-6px; top:-5px; border:1px solid #ddd; border-width:0 1px 1px 1px;}
.clear {clear:both;}
</style>


第二步:
在网页<body>区添加HTML显示代码

<div class="holder">
<h2>Blow, Blow, Thou Winter Wind</h2>
<p class="bold">William Shakespeare</p>
<p>Blow, blow, thou winter wind,<br />
Thou art not so unkind<br />
As man's ingratitude;<br />
Thy tooth is not so keen</p>
<p><a class="hid" href="#more" onclick="this.hideFocus=true" onblur="this.hideFocus=false"><span>more &#187;</span>&nbsp;
<em>Because thou art not seen,<br />
Although thy breath be rude.<br />
Heigh-ho! sing heigh-ho! unto the green holly:<br />
Most friendship is feigning, most loving mere folly:<br />
Then, heigh-ho! the holly!<br />
This life is most jolly.<br />
<br />
Freeze, freeze, thou bitter sky,<br />
Thou dost not bite so nigh<br />
As benefits forgot:<br />
Though thou the waters warp,<br />
Thy sting is not so sharp<br />
As friend remember'd not.<br />
Heigh-ho! sing heigh-ho! unto the green holly:<br />
Most friendship is feigning, most loving mere folly:<br />
Then, heigh-ho! the holly!<br />
This life is most jolly.<br /></em></a></p>
</div>

<div class="holder">
<h2>How Do I Love Thee?</h2>
<p class="bold">Elizabeth Barrett Browning</p>
<p>How do I love thee? Let me count the ways.<br />
I love thee to the depth and breadth and height<br />
My soul can reach, when feeling out of sight<br />
For the ends of Being and ideal Grace.</p>
<p><a class="hid" href="#more" onclick="this.hideFocus=true" onblur="this.hideFocus=false"><span>more &#187;</span>&nbsp;
<em>I love thee to the level of every day's<br />
Most quiet need, by sun and candlelight.<br />
I love thee freely, as men strive for Right;<br />
I love thee purely, as they turn from Praise.<br />
I love with a passion put to use<br />
In my old griefs, and with my childhood's faith.<br />
I love thee with a love I seemed to lose<br />
With my lost saints, I love thee with the breath,<br />
Smiles, tears, of all my life! and, if God choose,<br />
I shall but love thee better after death.<br /></em></a></p>
</div>

<div class="holder">
<h2>Seven Ages Of Man</h2>
<p class="bold">William Shakespeare</p>
<p>All the world's a stage,<br />
And all the men and women merely players,<br />
They have their exits and entrances,<br />
And one man in his time plays many parts,</p>
<p><a class="hid" href="#more" onclick="this.hideFocus=true" onblur="this.hideFocus=false"><span>more &#187;</span>&nbsp;
<em>His acts being seven ages. At first the infant,<br />
Mewling and puking in the nurse's arms.<br />
Then, the whining schoolboy with his satchel<br />
And shining morning face, creeping like snail<br />
Unwillingly to school. And then the lover,<br />
Sighing like furnace, with a woeful ballad<br />
Made to his mistress' eyebrow. Then a soldier,<br />
Full of strange oaths, and bearded like the pard,<br />
Jealous in honour, sudden, and quick in quarrel,<br />
Seeking the bubble reputation<br />
Even in the cannon's mouth. And then the justice<br />
In fair round belly, with good capon lin'd,<br />
With eyes severe, and beard of formal cut,<br />
Full of wise saws, and modern instances,<br />
And so he plays his part.<br />
The sixth age shifts<br />
and mere oblivion,<br />
Sans teeth, sans eyes, sans taste, sans everything.<br /></em></a></p>
</div>

<br class="clear" />

下载"CSS控制内容的隐藏与限时,点击more后展示"

  • 本地下载
  • 本地下载2

相关资源