首页 > 代码库 > 关于贴友的一个书本页面简单布局（html+css）的实现
关于贴友的一个书本页面简单布局（html+css）的实现
贴友需求：以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中的最终效果：（部分截图）
不足之处，敬请指正。
来源：http://www.ido321.com/532.html
关于贴友的一个书本页面简单布局（html+css）的实现
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。