关于贴友的一个书本页面简单布局（html+css）的实现
浏览数：15 /
时间：2015年06月09日
贴友需求：以html+css仿照书本的页面实现布局效果（见图）
html代码：
1: <!-- 我的博客：http://www.ido321.com -->
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">
18: padding-left:2em;
20: }
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/>
52: text-indent:-2em;<br/>
54: </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>
css代码：
1: *{
3: padding: 0;
5: .content{
7: height: 1000px;
9: .text{
11: text-indent: 2em;
13: }
15: color: red;
17: }
19: text-decoration: none;
21: .code{
23: width: 100%;
25: .imgDiv{
27: margin-top: 1em;
29: }
31: float: left;
33: .right{
35: margin-left: 1.5em;
37: }
39: clear: both;
41: -moz-box-shadow: -5px -5px 5px #888888;
43: -o-box-shadow: -5px -5px 5px #888888;
45: }
47: text-align: left;
49: font-weight: bold;
51: }
53: margin-top: 1.5em;
55: .code2{
57: float: left;
59: .footerright{
61: margin-left: 1.5em;
在FF中的最终效果：（部分截图）
不足之处，敬请指正。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
