1、

效果:

代码:

 <!DOCTYPE html>

 <html>

 <head>
<meta name="viewport" content="width=device-width" />
<title>首页</title>
<style>
* {
margin: 0;
padding: 0;
} div {
border: 1px solid black;
} #main {
position: relative;
width: 200px;
height: 200px;
} #top-left {
position: absolute;
top: 0%;
width: 50%;
height: 90%;
} #top-right {
position: absolute;
top: 0%;
left: 50%;
width: 50%;
height: 90%;
border-bottom: -1px;
} #bottom {
margin: 0 auto;
position: absolute;
top: 90%;
left: 0%;
width: 100%;
height: 10%
}
</style>
</head> <body>
<div id="main">
<div id="top-left">顶部左</div>
<div id="top-right">顶部右</div>
<div id="bottom">底部</div>
</div>
</body> </html>

div布局(持续更新)的更多相关文章

  1. 干货!IT小伙伴们实用的网站及工具大集合!持续更新!

    1.Git 还在担心自己辛辛苦苦写的代码被误删了吗?还在担心自己改错了代码不能挽回吗?还在苦恼于多人开发合作找不到一个好的工具吗?那么用Git就对 了,Git是一个开源的分布式版本控制系统,用以有效. ...

  2. 【持续更新】JavaScript常见面试题整理

    [重点提前说]这篇博客里的问题涉及到了了JS中常见的的基础知识点,也是面试中常见的一些问题,建议初入职场的园友Mark收藏,本文会持续更新~ 1. 引入JS的三种方式 1.在HTML标签中直接使用,直 ...

  3. html知识点汇总(持续更新中)

    本人从事前端行业三年多,打算从今天开始整理一些关于前端的一些比较经典的知识点,持续更新中...希望能对一些相关知识点有疑问的朋友有一些帮助! HTML篇: 1.常见的行内元素/块级元素/空元素有哪些? ...

  4. web前端面试题(持续更新)

    此文是我本人在面试的时候遇到的问题和一些同学遇到的问题加资料上面的问题的总结.(将会持续更新,因为未有满意工作) 面试时有几点需要注意: 1.面试题目:根据你的等级和职位的变化,入门级到大神级,广度和 ...

  5. BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js

    BAT 前端开发面经 —— 吐血总结   目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...

  6. 前端面试题总结——HTML(持续更新中)

    前端面试题总结--HTML(持续更新中) 1.什么是HTML? HTML:HyperText Markup Language超文本标记语言 2.XHTML和HTML有什么区别 HTML是一种基本的WE ...

  7. 兼容低版本IE浏览器的一些心得体会(持续更新)

    前言: 近期工作中,突然被要求改别人的代码,其中有一项就是兼容IE低版本浏览器,所以优雅降级吧. 我相信兼容低版本IE是许多前端开发的噩梦,尤其是改别人写的代码,更是痛不欲生. 本文将介绍一些本人兼容 ...

  8. css面试题汇总 (持续更新)

    前言:这篇随笔是为了准备后面的面试而整理的,网上各种面试题太多了,但是我感觉很多太偏了,而且实际开发过程中并不会遇到,因此这里我整理一些比较常用的,或者是相对比较重要的知识点,每个知识点都会由浅入深, ...

  9. 基于android studio的快捷开发(将持续更新)

    对于Android studio作为谷歌公司的亲儿子,自然有它的好用的地方,特别是gradle方式和快捷提示方式真的很棒.下面是我在实际开发中一些比较喜欢用的快速开发快捷键,对于基本的那些就不多说了. ...

  10. ( 译、持续更新 ) JavaScript 上分小技巧(三)

    最近家里杂事较多,自学时间实在少的可怜,所以都在空闲时间看看老外写的内容,学习之外顺便翻译分享~等学习的时间充足些再写写自己的一些学习内容和知识点分析(最近有在接触的:复习(C#,SQL).(学习)T ...

随机推荐

  1. js优先队列的定义和使用

    //队列,先入先出,FIFO function Queue() { this.items = []; } Queue.prototype = { constructor: Queue, enqueue ...

  2. Nginx数据结构之内存池

    基本结构 1. ngx_pool_t struct ngx_pool_s { ngx_pool_data_t d; size_t max; ngx_pool_t *current; ngx_chain ...

  3. 在debian下安装QT 5.10 32位

    准备工作: 在开始之前最好把GCC升级到5.0以上. 如果升级后出现“libstdc++.so.6: version `CXXABI_1.3.9' not found”错误,可以参考https://b ...

  4. 用Qt生成dll类库及调用方法

    空白工程新建DLL后,将DLL和LIB文件放入需要调用的“指定目录” 项目->属性->连接器->常规->附加库目录->添加“指定目录” 项目->属性->连接器 ...

  5. 在 bat 批处理中运行多次 mvn

    在 bat 中运行 mvn 命令会出现这种情况,构建命令执行完成后会停留在的 mvn.bat 中,必需手工输入 exit 后,才会回到原来的脚本中继续运行.这是怎么回事? 到 maven 的安装目录下 ...

  6. Android Studio NDK编程-环境搭建及Hello!

    一,下载 安装android-ndk开发包 NDK各个版本链接二,新建项目NDKDemo,选择空Activity就可以:(注:Android studio 2.2,可通过SDK Tools 添加LLD ...

  7. RabbitMQ学习之:(十二)在Node.js环境下使用RabbitMQ

    学,以致用.找了半天Node.js下RabbitMQ的库,看上去都不太趁手,直到最后找到了amqp库,看上去倒还不错,照着例子,写了第一个RabbitMQ的客户端. 首先,使用 npm install ...

  8. java web 能够实现整个文件夹的上传下载吗?

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...

  9. Spring + MyBatis 框架下处理数据库异常

    一.概述 使用JDBC API时,很多操作都要声明抛出java.sql.SQLException异常,通常情况下是要制定异常处理策略.而Spring的JDBC模块为我们提供了一套异常处理机制,这套异常 ...

  10. Linux学习—rpm包管理

    前言 在linux上,一个软件通常由二进制程序,库文件,配置文件和帮助文件组成.其中: 二进制程序一般都放在/bin,/sbin,/usr/bin,/usr/sbin,/usr/local/bin和/ ...