这是一个由css div制作的可翻页的书。没有用到js。你可以来试试哦。顺便说一下，书里除了可放文字和图片,也可以插入网页的，还可以插入flash，也可以插入音乐和视频的。点击书皮打开看看吧。

ie6中，用<embed>插入音乐或flash或视频的时候，鼠标经过标签后之后，flash和视频不会消失，而是浮动在上方，ie7没有这个问题。ie6中<embed>里面加属性的时候，鼠标经过相应的标签后书会关闭。

如果有一天淘汰了ie6，我们就可以尽情的享受:hover效果，不仅是a:hover，还有li:hover，div:hover。

chrome浏览器对a:active和a:focus的解释不一样。所以在chrome浏览器下无法点开此书。

p
•
1
p
•
2


p
•
3
p
•
4

点击此书打开看看—>

Html

<div>
<span id="menu">
    <span id="tabs">

        <a href="#"><br />p<br />&bull;<br />1
            <span class="page_left">
                <object><p class="pad"><img src="boy.gif" alt="" />文字内容</p></object>
            </span>
            <span class="page_right">
                <object><p class="pad">文字内容</p></object><object>
                <div class="copy">&copy; 2009年9月22日</div>
                </object>
            </span>
        </a>
   
        <a href="#"><br />p<br />&bull;<br />2
                <span class="page_left">
                <object><p class="pad"><img src="slave.gif" alt="" />文字内容</p></object>
            </span>
            <span class="page_right">
                <object><p class="pad">文字内容</p></object>
                <object><div class="copy">&copy; 2009年9月23日</div></object>
            </span>
        </a>
   
        <a href="#"><br />p<br />&bull;<br />3
            <span class="page_left">
                <object><p class="pad"><img src="dans.gif" alt="" />文字内容</p></object>
            </span>
            <span class="page_right">
                <object><p class="pad"> 文字内容</p></object>
                <object><div class="copy">&copy; 2009年9月24日</div></object>
            </span>
        </a>
   
        <a href="#"><br />p<br />&bull;<br />4
            <span class="page_left">
                <object><p class="pad"><img src="four.gif" alt="" />文字内容</p></object>
            </span>
            <span class="page_right">
                <object><p class="pad">文字内容</p></object>
                <object><div class="copy">&copy; 2009年9月25日</div></object>
            </span>
        </a>
   
        <object><div id="front"><img src="stu.gif" alt=""  />文字内容</div></object>

    </span>
</span>
<div id="start"><a id="tp" href="#"><br /><br /><br />点击此书打开看看&mdash;&gt;</a></div>
</div>

Css

<style type="text/css">
<!--
#menu {
    width:520px;
    height:359px;
    background:url(open_one.gif);/*书打开后的背景*/
    color:#000;
    text-align:center;
    position:absolute;
    font-size:12px;
}
#tabs {
    position:absolute;
    top:30px;
    right:0px;
    width:30px;
    height:360px;
    text-align:center;
}

#menu a {
    display:block;
    width:30px;
    height:62px;
    text-decoration:none;
    color:#888;
}

#menu a:link{
    background:url(tab_off.gif) no-repeat;/*标签默认状态*/
}

#menu a:visited {
    display:block;
    height:62px;
    background:url(tab_off.gif) no-repeat;/*标签默认状态*/
    width:30px;
    text-decoration:none;
    color:#888;
}

#menu a span{
    display:none;
}

#menu a .page_left{
    display:none;
}   

#menu a .page_right{
    display:none;
}

#menu a:hover {
    text-decoration:none;
    background:url(tab_on.gif) #fff no-repeat;/*标签 鼠标经过后*/
    color:#000;
}

#menu a:hover .page_left {
    display:block;
    background:url(page_left.gif) no-repeat;/*左侧内页*/
    position:absolute;
    color:#f00;
    top:-20px;
    left:-480px;
    width:190px;
    height:337px;
    font-weight:normal;
    text-align:left;
    padding:20px 20px 0 30px;
}

#menu a:hover .page_right {
    display:block;
    background:url(page_right.gif) repeat-y;/*右侧内页*/
    position:absolute;
    color:#000;
    top:-10px;
    left:-238px;
    width:200px;
    height:304px;
    font-weight:normal;
    text-align:left;
    z-index:10;
    padding:20px 10px 0 20px
}

#menu a:active {
    text-decoration:none;
    color:#000;
}
span img {
    margin:10px;
    border:0px;
}
h1 {
    font-size:20px;
}
acronym {
    border-bottom:2px dashed #f00;
    cursor:help;
}
.pad {
    margin-left:15px;
    margin-right:18px;
    text-align:justify;
}
.copy {
    position:absolute;
    bottom:30px;
    right:30px;
    font-size:12px;
    color:#000;
}
#front {
    font-size:12px;
    background:url(page_right.gif) left repeat-y;/*右侧内页1*/
    position:absolute;
    color:#600;
    top:-10px;
    margin-left:-253px;
    display:inline;
    width:188px;
    height:310px;
    font-weight:normal;
    text-align:left;
    padding:0 20px 0 25px;
}
#start a#tp {
    width:520px;
    height:359px;
    background:url(book.gif) no-repeat;/*封皮*/
    background-position: top right;
    background-color:#fff;
    color:#000;
    text-align:justify;
    position:absolute;
    z-index:20;
    text-decoration:none;
    font-weight:bold;
}
a#tp:focus {
    display:none;
}
a#tp:active {
    display:none;
}

#start .pic {
    position:relative;
    margin-top:-200px;
    float:right;
    width:270px;
    text-align:center;
    color:#000;
    font-size:30px;
}

#menu p{
    margin:0;
}
-->
</style>