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. No Desktop License Servers available to provide a license

    远程桌面连接失败,提示:“no Remote Desktop License Servers available to provide a license” 原因:没有remote desktop l ...

  2. qt QTableView中嵌入复选框CheckBox 的四种方法总结

    第一种不能之前显示,必须双击/选中后才能显示,不适用. 第二种比较简单,通常用这种方法. 第三种只适合静态显示静态数据用 第四种比较适合扩展,它除了可以嵌入复选框,还可以通过paint()绘制其它控件 ...

  3. typescript简单的应用

    简单来说typescript就是新增一下方法,以及增加类型判断 一.普通的类型判断 1.布尔类型(boolean) let isDone: boolean = false let createdByB ...

  4. DockerFile 简单使用

    Dockerfile 是用来构建 Docker 镜像的构建文件,是由一系列命令和参数构成的脚本. 以 CentOS 为例(https://hub.docker.com/_/centos): FROM ...

  5. [MyBatis]向MySql数据库插入一千万条数据 批量插入用时6分 之前时隐时现的异常不见了

    本例代码下载:https://files.cnblogs.com/files/xiandedanteng/InsertMillionComparison20191012.rar 这次实验的环境仍然和上 ...

  6. 根据规则去掉List 对象数组中的重复元素

    package container.main; import java.util.ArrayList; import java.util.Comparator; import java.util.Li ...

  7. mysql大量locked的一个案例

    转自 http://cyxu2004.blog.163.com/blog/static/45768718201222133440986/

  8. Python 线程----线程方法,线程事件,线程队列,线程池,GIL锁,协程,Greenlet

    主要内容: 线程的一些其他方法 线程事件 线程队列 线程池 GIL锁 协程 Greenlet Gevent 一. 线程(threading)的一些其他方法 from threading import ...

  9. 短路与（&&）、短路或（||）

    昨晚上课,老师用了类似这样的语法 fn&&fn.call(obj) fn&&fn.call(obj)  这里的fn为回调函数.老师在课上也没过多解释这句是啥意思,然后我 ...

  10. dockerfile文件命令详解

    Dockerfile 一般分为四部分:基础镜像信息.维护者信息.镜像操作指令和容器启动时执行指令,’#’ 为 Dockerfile 中的注释: Dockerfile的指令根据作用可以分为两种:构建指令 ...