关于贴友的一个书本页面简单布局（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>&nbsp;</div>

div class="btn">

button>10.11&nbsp;&nbsp;&nbsp;&nbsp;设置字词间距</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

转载于:https://www.cnblogs.com/ido321/p/3961028.html