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

ゝ一纸荒年。 2022-08-12 00:22 99阅读 0赞

贴友需求：以html+css仿照书本的页面实现布局效果（见图）

![SouthEast][]

html代码：

1:

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中的最终效果：（部分截图）

![SouthEast 1][]

不足之处，敬请指正。

来源：[http://www.ido321.com/532.html][http_www.ido321.com_532.html]

[SouthEast]: /images/20220810/ee800aa3e6e847888c89d052ece8b83b.png
[SouthEast 1]: /images/20220810/9a4f82caca8f4bce8058e0025cf3f93f.png
[http_www.ido321.com_532.html]: http://www.ido321.com/532.html