关于贴友的一个书本页面简单布局（html+css）的实现

<!-- 我的博客：http://www.ido321.com -->
[code]DOCTYPE HTML>

html>

head>

meta http-equiv="content-type" content="text/html;charset=utf-8">

title>Test</title>

meta name="author" content="淡忘~浅思">

link rel="stylesheet" type="text/css" href="shuben.css">

head>

body>

div class="content">

p class="text">

a href="http://www.ido321.com" target="_blank">www.ido321.com</a>.程序爱好者QQ群：259280570，如果你是coder，欢迎你加入我们。如果你是coder，欢迎你加入我们。

p>

div class="code">

pre style="margin-left:-250px">

padding-left:2em;

}

pre>

div>

p class="text">

a href="http://www.ido321.com" target="_blank">www.ido321.com</a>.程序爱好者QQ群：259280570，如果你是coder，欢迎你加入我们。如果你是coder，欢迎你加入我们。我的博客：<a href="http://www.ido321.com" target="_blank">www.ido321.com</a>.程序爱好者QQ群：259280570，如果你是coder，欢迎你加入我们。如果你是coder，欢迎你加入我们。

p>

div class="imgDiv">

div class="left">

img src="1.jpg">

p>图1：XXXXXX</p>

div>

div class="right">

img src="1.jpg">

p>图2：XXXXXX</p>

div>

div>

div> </div>

div class="btn">

button>10.11    设置字词间距</button>

div>

p class="text">

a href="http://www.ido321.com" target="_blank">www.ido321.com</a>.程序爱好者QQ群：259280570，如果你是coder，欢迎你加入我们。如果你是coder，欢迎你加入我们。

p>

p class="text">

a href="http://www.ido321.com" target="_blank">www.ido321.com</a>.程序爱好者QQ群：259280570，如果你是coder，欢迎你加入我们。如果你是coder，欢迎你加入我们。

p>

div class="footer">

div class="code2">

div style="background-color: #ccc;">

p style="margin-left:1.5em">

br/>

text-indent:-2em;<br/>

</p>

div>

p class="text">

a href="http://www.ido321.com" target="_blank">www.ido321.com</a>.程序爱好者QQ群：259280570，如果你是coder，欢迎你加入我们。如果你是coder，欢迎你加入我们。

p>

div>

div class="footerright">

img src="1.jpg">

p>图3：XXXXXX</p>

div>

div>

div>

body>

html>

*{
[code]     padding: 0;

.content{

height: 1000px;

.text{

text-indent: 2em;

}

color: red;

}

text-decoration: none;

.code{

width: 100%;

.imgDiv{

margin-top: 1em;

}

float: left;

.right{

margin-left: 1.5em;

}

clear: both;

-moz-box-shadow: -5px -5px 5px #888888;

-o-box-shadow: -5px -5px 5px #888888;

}

text-align: left;

font-weight: bold;

}

margin-top: 1.5em;

.code2{

float: left;

.footerright{

margin-left: 1.5em;

在FF中的最终效果：（部分截图）