贴友需求：以html+css仿照书本的页面实现布局效果（见图）
html代码：
1: <!-- 我的博客：http://www.ido321.com -->
2: <!DOCTYPE HTML>
3: <html>
4: <head>
5: <meta http-equiv="content-type" content="text/html;charset=utf-8">
6: <title>Test</title>
7: <meta name="author" content="淡忘~浅思">
8: <link rel="stylesheet" type="text/css" href="shuben.css">
9: </head>
10: <body>
11: <div class="content">
12: <p class="text">
13: 我的博客：<a href="http://www.ido321.com" target="_blank">www.ido321.com</a>.程序爱好者QQ群：259280570，如果你是coder，欢迎你加入我们。如果你是coder，欢迎你加入我们。
14: </p>
15: <div class="code">
16: <pre style="margin-left:-250px">
17: #p2{
18: padding-left:2em;
19: text-indent:-2em;
20: }
21: </pre>
22: </div>
23: <p class="text">
24: 我的博客：<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，欢迎你加入我们。
25: </p>
26: <div class="imgDiv">
27: <div class="left">
28: <img src="1.jpg">
29: <p>图1：XXXXXX</p>
30: </div>
31: <div class="right">
32: <img src="1.jpg">
33: <p>图2：XXXXXX</p>
34: </div>
35: </div>
36: <div> </div>
37: <div class="btn">
38: <button>10.11 设置字词间距</button>
39: </div>
40: <p class="text">
41: 我的博客：<a href="http://www.ido321.com" target="_blank">www.ido321.com</a>.程序爱好者QQ群：259280570，如果你是coder，欢迎你加入我们。如果你是coder，欢迎你加入我们。
42: </p>
43: <p class="text">
44: 我的博客：<a href="http://www.ido321.com" target="_blank">www.ido321.com</a>.程序爱好者QQ群：259280570，如果你是coder，欢迎你加入我们。如果你是coder，欢迎你加入我们。
45: </p>
46: <div class="footer">
47: <div class="code2">
48: <div style="background-color: #ccc;">
49: <p style="margin-left:1.5em">
50: #p2{<br/>
51: padding-left:2em;
52: text-indent:-2em;<br/>
53: }
54: </p>
55: </div>
56: <p class="text">
57: 我的博客：<a href="http://www.ido321.com" target="_blank">www.ido321.com</a>.程序爱好者QQ群：259280570，如果你是coder，欢迎你加入我们。如果你是coder，欢迎你加入我们。
58: </p>
59: </div>
60: <div class="footerright">
61: <img src="1.jpg">
62: <p>图3：XXXXXX</p>
63: </div>
64: </div>
65: </div>
66: </body>
67: </html>
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中的最终效果：（部分截图）
不足之处，敬请指正。
来源：http://www.ido321.com/532.html
时间： 2024-08-25 12:15:23