首页 > 代码库 > 问题:关于贴友的一个书本页面简单布局(html+css)的实现

问题:关于贴友的一个书本页面简单布局(html+css)的实现

贴友需求:以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>&nbsp;</div>
  37:             <div class="btn">
  38:                 <button>10.11&nbsp;&nbsp;&nbsp;&nbsp;设置字词间距</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

问题:关于贴友的一个书本页面简单布局(html+css)的实现