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. AVQueuePlayer

    想要视频一个接一个的无缝连续播放么? 还在用mpmovieplayercontroller么?out了! 介绍一个可以实现无缝连续播放视频的东西-------AVQueuePlayer ! AVQue ...

  2. 实现超简单的http服务器

    想在Linux下实现一个简单的web Server并不难.一个最简单的HTTP Server不过是一个高级的文件服务器,不断地接收客户端(浏览器)发送的HTTP请求,解析请求,处理请求,然后像客户端回 ...

  3. Qt编写数据可视化大屏界面电子看板2-配色方案

    一.前言 做完整个数据可视化大屏界面电子看板系统后,为了提升点逼格,需要提供好几套默认的风格样式以供选择,这样用户可以选择自己喜欢的配色方案来作为整个系统的颜色方案,去看了下市面上大部分的大屏电子看板 ...

  4. Mac下也能用抓包工具Fiddler

    一直以来都是在Windows底下工作,对于抓包工具,自然而然当属Fiddler最最出色.不过Fiddler是在.Net runtime环境下运行的,所以想要在Mac下使用,有些困难. 在试过了Char ...

  5. JAVA 基础编程练习题2 【程序 2 输出素数】

    2 [程序 2 输出素数] 题目:判断 101-200 之间有多少个素数,并输出所有素数. 程序分析:判断素数的方法:用一个数分别去除 2 到 sqrt(这个数),如果能被整除,则表明此数不是素数, ...

  6. Linux系统管理_主题02 :管好文件(1)_2.2 列出文件和文件属性_chmod_ls

     用户(user)是能够获取系统资源的权限的集合.Linux 中的用户可 以分为三类: 1. 根用户(root):具有系统全部权限的用户: 2. 普通用户:其使用系统的权限受到一定限制: 3. 系统 ...

  7. Linux0.11学习

    Linux 0.11虽然不是什么“珠穆朗玛峰”,但它肯定还是“华山”或“泰山”.虽然有路但你还是需要最基本的努力和花费一定的代价才能“攀登”上去.1. PC兼容机硬件工作原理(比如8259A,8253 ...

  8. 数组setArray和addObjectsFromArray的区别

    -setArray:用另一个数组中的所有对象来替换当前数组中的所有对象 -addObjectsFromArray:在原数组最后添加另一个数组的全部对象 NSArray *arr = @["] ...

  9. sudo: unable to execute ./xxx.py: no such file or directory

    $ ./mk_dataset.py -bash: ./mk_dataset.py: /home/ocean1101/anaconda3/bin/python^M: bad interpreter: N ...

  10. Redis4.0新特性 -Lazy Free

    Redis4.0新增了非常实用的lazy free特性,从根本上解决Big Key(主要指定元素较多集合类型Key)删除的风险.笔者在redis运维中也遇过几次Big Key删除带来可用性和性能故障. ...