问题：关于贴友的一个书本页面简单布局（html+css）的实现
本文共 3201 字，大约阅读时间需要 10 分钟。
贴友需求：以html+css仿照书本的页面实现布局效果（见图）
html代码：
1:
2:
3:
4:
5:
6:Test
7:
8:
9:
10:
11:
12:
13: 我的博客：www.ido321.com.程序爱好者QQ群：259280570，如果你是coder，欢迎你加入我们。如果你是coder，欢迎你加入我们。
14:
15:
16:
17: #p2{ 18: padding-left:2em;
19: text-indent:-2em;
20: }
21:
22:
23:
24: 我的博客：www.ido321.com.程序爱好者QQ群：259280570，如果你是coder，欢迎你加入我们。如果你是coder，欢迎你加入我们。我的博客：www.ido321.com.程序爱好者QQ群：259280570，如果你是coder，欢迎你加入我们。如果你是coder，欢迎你加入我们。
25:
26:
27:
28:
29:图1：XXXXXX
30:
31:
32:
33:图2：XXXXXX
34:
35:
36:
37:
38:
39:
40:
41: 我的博客：www.ido321.com.程序爱好者QQ群：259280570，如果你是coder，欢迎你加入我们。如果你是coder，欢迎你加入我们。
42:
43:
44: 我的博客：www.ido321.com.程序爱好者QQ群：259280570，如果你是coder，欢迎你加入我们。如果你是coder，欢迎你加入我们。
45:
46:
47:
48:
49:
50: #p2{ 51: padding-left:2em;
52: text-indent:-2em;
53: }
54:
55:
56:
57: 我的博客：www.ido321.com.程序爱好者QQ群：259280570，如果你是coder，欢迎你加入我们。如果你是coder，欢迎你加入我们。
58:
59:
60:
61:
62:图3：XXXXXX
63:
64:
65:
66:
67:
css代码：
1: *{ 2: margin:0 auto;
3: padding: 0;
4: }
5: .content{ 6: width: 600px;
7: height: 1000px;
8: }
9: .text{ 10: word-wrap:break-word;
11: text-indent: 2em;
12: line-height: 1.5em;
13: }
14: a{ 15: color: red;
16: font-weight: bold;
17: }
18: a:link,a:hover{ 19: text-decoration: none;
20: }
21: .code{ 22: background-color: #ccc;
23: width: 100%;
24: }
25: .imgDiv{ 26: margin-left: 1em;
27: margin-top: 1em;
28:
29: }
30: .left{ 31: float: left;
32: }
33: .right{ 34: float: left;
35: margin-left: 1.5em;
36: margin-bottom: 2em;
37: }
38: .btn{ 39: clear: both;
40: -ms-box-shadow: -5px -5px 5px #888888;
41: -moz-box-shadow: -5px -5px 5px #888888;
42: -webkit-box-shadow: -5px -5px 5px #888888;
43: -o-box-shadow: -5px -5px 5px #888888;
44: box-shadow: -5px -5px 5px #888888;
45: }
46: button{ 47: text-align: left;
48: width: 100%;
49: font-weight: bold;
50: font-size: 30px;
51: }
52: .footer{ 53: margin-top: 1.5em;
54: }
55: .code2{ 56: width: 50%;
57: float: left;
58: }
59: .footerright{ 60: float: left;
61: margin-left: 1.5em;
62: }
在FF中的最终效果：（部分截图）
不足之处，敬请指正。
来源：
你可能感兴趣的文章
AngularJs控制器说明（一）
查看>>
Teleport Ultra网站静态资源下载工具
查看>>
C# 调用微信公众号接口生成带参数二维码、下载、合并
查看>>
C# 调用微信公众号接口发送客服消息示例
查看>>
C# 调用微信公众号接口获取会员信息示例
查看>>
mysql-5.7.xx-winx64服务无法启动解决方案
查看>>
Bootstrap 4重大更新，亮点解读
查看>>
Angular CLI ng常用命令整理
查看>>
Angular 路由使用整理（一）
查看>>
git回到指定版本命令
查看>>
cordova-plugin-splashscreen设置启动页面和图标
查看>>
cordova-plugin-camera相机插件使用
查看>>
cordova-plugin-media音频播放和录制
查看>>
Visual Studio 2017使用Emmet风格编写Html--ZenCoding
查看>>
Visual Studio Code v1.21发布
查看>>
C# Newtonsoft.Json JObject移除属性，在序列化时忽略
查看>>
Git移除版本控制操作
查看>>
Http缓存机制（转）
查看>>
C# 本地时间格式，UTC时间格式，GMT时间格式处理
查看>>
Windows系统搭建GitServer--Bonobo Git Server
查看>>