热门标签 | 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


推荐阅读
  • 本指南详细介绍了如何在CentOS 6.6 64位系统上以root用户身份部署Tomcat 8服务器。系统环境为CentOS 6.6 64位,采用源码安装方式。所需软件为apache-tomcat-8.0.23.tar.gz,建议将软件下载至/root/opt目录。具体下载地址请参见官方资源。本指南涵盖了从环境准备到服务启动的完整步骤,适用于需要在该系统环境下搭建高性能Web应用服务器的技术人员。 ... [详细]
  • 该问题可能由守护进程配置不当引起,例如未识别的JVM选项或内存分配不足。建议检查并调整JVM参数,确保为对象堆预留足够的内存空间(至少1572864KB)。此外,还可以优化应用程序的内存使用,减少不必要的内存消耗。 ... [详细]
  • 为了优化用户体验,本文探讨了如何调整下拉菜单的宽度。通过合理设置宽度,可以提升界面的美观性和易用性。文章提供了具体的代码示例,帮助开发者实现这一目标。例如,可以通过 CSS 或 JavaScript 来动态调整下拉菜单的宽度,确保其在不同设备和屏幕尺寸上都能保持良好的显示效果。 ... [详细]
  • 本指南介绍了 `requests` 库的基本使用方法,详细解释了其七个主要函数。其中,`requests.request()` 是构建请求的基础方法,支持其他高级功能的实现。此外,我们还重点介绍了如何使用 `requests.get()` 方法来获取 HTML 网页内容,这是进行网页数据抓取和解析的重要步骤。通过这些基础方法,读者可以轻松上手并掌握网页数据抓取的核心技巧。 ... [详细]
  • 本文深入探讨了Java多线程环境下的同步机制及其应用,重点介绍了`synchronized`关键字的使用方法和原理。`synchronized`关键字主要用于确保多个线程在访问共享资源时的互斥性和原子性。通过具体示例,如在一个类中使用`synchronized`修饰方法,展示了如何实现线程安全的代码块。此外,文章还讨论了`ReentrantLock`等其他同步工具的优缺点,并提供了实际应用场景中的最佳实践。 ... [详细]
  • ### 摘要`mkdir` 命令用于在指定位置创建新的目录。其基本格式为 `mkdir [选项] 目录名称`。通过该命令,用户可以在文件系统中创建一个或多个以指定名称命名的文件夹。执行此操作的用户需要具备相应的权限。此外,`mkdir` 还支持多种选项,如 `-p` 用于递归创建多级目录,确保路径中的所有层级都存在。掌握这些基本用法和选项,有助于提高在 Linux 系统中的文件管理效率。 ... [详细]
  • 如何撰写初级和高级前端开发者的专业简历
    如何撰写初级和高级前端开发者的专业简历 ... [详细]
  • 在Ubuntu系统中安装Android SDK的详细步骤及解决“Failed to fetch URL https://dlssl.google.com/”错误的方法
    在Ubuntu 11.10 x64系统中安装Android SDK的详细步骤,包括配置环境变量和解决“Failed to fetch URL https://dlssl.google.com/”错误的方法。本文详细介绍了如何在该系统上顺利安装并配置Android SDK,确保开发环境的稳定性和高效性。此外,还提供了解决网络连接问题的实用技巧,帮助用户克服常见的安装障碍。 ... [详细]
  • 在PHP中实现腾讯云接口签名,以完成人脸核身功能的对接与签名配置时,需要注意将文档中的POST请求改为GET请求。具体步骤包括:使用你的`secretKey`生成签名字符串`$srcStr`,格式为`GET faceid.tencentcloudapi.com?`,确保参数正确拼接,避免因请求方法错误导致的签名问题。此外,还需关注API的其他参数要求,确保请求的完整性和安全性。 ... [详细]
  • 成都服务器租赁适用于哪些网站业务部署——Vecloud专业解析
    成都,作为四川省的省会,不仅是西南地区唯一的副省级城市,也是国家重要的高新技术产业基地和商贸物流中心。Vecloud专业解析指出,成都服务器租赁服务特别适合各类网站业务的部署,尤其是需要高效、稳定和安全的在线应用。无论是电子商务平台、内容管理系统还是大数据分析,成都的服务器租赁都能提供强大的支持,满足不同企业的需求。 ... [详细]
  • 2018 HDU 多校联合第五场 G题:Glad You Game(线段树优化解法)
    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6356在《Glad You Game》中,Steve 面临一个复杂的区间操作问题。该题可以通过线段树进行高效优化。具体来说,线段树能够快速处理区间更新和查询操作,从而大大提高了算法的效率。本文详细介绍了线段树的构建和维护方法,并给出了具体的代码实现,帮助读者更好地理解和应用这一数据结构。 ... [详细]
  • 本文详细介绍了一种利用 ESP8266 01S 模块构建 Web 服务器的成功实践方案。通过具体的代码示例和详细的步骤说明,帮助读者快速掌握该模块的使用方法。在疫情期间,作者重新审视并研究了这一未被充分利用的模块,最终成功实现了 Web 服务器的功能。本文不仅提供了完整的代码实现,还涵盖了调试过程中遇到的常见问题及其解决方法,为初学者提供了宝贵的参考。 ... [详细]
  • 本文详细介绍了在Linux系统上编译安装MySQL 5.5源码的步骤。首先,通过Yum安装必要的依赖软件包,如GCC、GCC-C++等,确保编译环境的完备。接着,下载并解压MySQL 5.5的源码包,配置编译选项,进行编译和安装。最后,完成安装后,进行基本的配置和启动测试,确保MySQL服务正常运行。 ... [详细]
  • Gliffy Diagrams:高效实用的流程图绘制工具
    Gliffy Diagrams 是一款高效且易于使用的流程图绘制工具,能够显著提升工作效率。结合百度脑图等辅助工具,用户可以更加便捷地创建和管理各种图表。本文详细介绍了 Gliffy Diagrams 的核心功能和使用方法,帮助读者快速上手。 ... [详细]
  • 本文探讨了在使用 Outlook 时遇到的一个常见问题:无法加载 SAVCORP90 插件,导致软件功能受限。该问题通常表现为在启动 Outlook 时会收到错误提示,影响用户的正常使用体验。文章详细分析了可能的原因,并提供了多种解决方法,包括检查插件兼容性、重新安装插件以及更新 Outlook 版本等。通过这些步骤,用户可以有效解决这一问题,恢复 Outlook 的正常运行。 ... [详细]
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社区 版权所有