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. FFmpeg之Linux下编译与调试

    注:下面的一切都是在 root 模式下进行的,可以不再 root 模式下进行 1. 安装linux的基础环境 基础环境就是编译代码的基础库,Ubuntu联网安装软件很简单,一个语句即可搞定,这里列出语 ...

  2. zabbix监控nginx+php-fpm，mysql+主从复制+高可用，tomcat，redis web状态

    zabbix监控对象区分 使用SNMP监控交换 使用IPMI监控服务器硬件 使用Agent监控服务器 使用JMX监控JAVA SNMP监控流程 交换机上开启snmp 在zabbix上添加监控(设置SN ...

  3. 2018网特招新题writeup

    沈永宁(周鸣振)这狗比,晚上才发现他隐姓埋名偷偷刷了分还刷到了第一名,不行我也刷...我刷刷刷

  4. List自定义对象的排序，根据对象的某一列进行排序

    在工作中,经常需要对List对象集合进行排序操作,下面总结下搞个通用排序对象,原理是使用JAVA的 Comparator    接口实现排序   不多说直接上“干货” 1.存在实体类: @Data @ ...

  5. Java商城秒杀系统的设计与实战视频教程（SpringBoot版）_汇总贴

    51CTO学院 Java商城秒杀系统的设计与实战视频教程(SpringBoot版) H:\BaiDu\微服务0830\2019最新 Java商城秒杀系统的设计与实战视频教程(SpringBoot版) ...

  6. Performance Analysis of Logs (PAL) Tool

    Performance Analysis of Logs (PAL) Tool 背景 在众多的独立项目中,我们如何快速了解数据库(SQL Server)服务器的性能,以及数据库的基线情况是怎样的,或者 ...

  7. Java日志体系（四）slf4j

    1.1 简介 与commons-logging相同,slf4j也是一个通用的日志接口,在程序中与其他日志框架结合使用,并对外提供服务. Simple Logging Facade for Java简称 ...

  8. 硬盘相关合集，以及LVM操作实践

    1. 机器装有两块硬盘,重装系统只找到一块盘,如何解决? 正常装完系统后,运行: a. lsblk查看硬盘信息,这里可以发现还没有使用的另一块盘. b. fdisk或parted给硬盘分区,取决于硬盘 ...

  9. 在HbuilderX的Uni-app中引入crypto-js md5

    在 hbuilderX的菜单“视图”中选择“显示终端”,在终端中把当前目录定位到uni-app的根目录,这样才可以把crypto-js库安装在正确的位置,在终端中键入:npm install cryp ...

  10. springboot-定时任务-单线程

    import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.scheduling.annot ...