热门标签 | HotTags
当前位置:  开发笔记 > 后端 > 正文

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

贴友需求:以html+css仿照书本的页面实现布局效果(见图)html代码:1:<!--我的博客:http:www.ido321.com-->

贴友需求:以html+css仿照书本的页面实现布局效果(见图)

html代码:

1:
DOCTYPE HTML>
html>
head>
meta http-equiv="content-type" content="text/html;charset=utf-8">
title>Testtitle>
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.coma>.程序爱好者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.coma>.程序爱好者QQ群:259280570,如果你是coder,欢迎你加入我们。如果你是coder,欢迎你加入我们。我的博客:<a href="http://www.ido321.com" target="_blank">www.ido321.coma>.程序爱好者QQ群:259280570,如果你是coder,欢迎你加入我们。如果你是coder,欢迎你加入我们。
p>
div class="imgDiv">
div class="left">
img src="1.jpg">
p>图1:XXXXXXp>
div>
div class="right">
img src="1.jpg">
p>图2:XXXXXXp>
div>
div>
div> div>
div class="btn">
button>10.11    设置字词间距button>
div>
p class="text">
a href="http://www.ido321.com" target="_blank">www.ido321.coma>.程序爱好者QQ群:259280570,如果你是coder,欢迎你加入我们。如果你是coder,欢迎你加入我们。
p>
p class="text">
a href="http://www.ido321.com" target="_blank">www.ido321.coma>.程序爱好者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.coma>.程序爱好者QQ群:259280570,如果你是coder,欢迎你加入我们。如果你是coder,欢迎你加入我们。
p>
div>
div class="footerright">
img src="1.jpg">
p>图3:XXXXXXp>
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


推荐阅读
author-avatar
qapo
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有