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. 整合pjax无刷新

    一:整合pjax的准备工作: 检查你的网站是否引入1.7.0版本以上的jquery.js,如果没有请全局引入 1.新浪CDN提速:<script type="text/javascri ...

  2. QT中为程序加入超级管理员权限

    QT的一些文件操作,注册表的操作等,有些操作会无效,主要是因为没有对C盘的相关权限. 解决方法: 1. mingw编译器 在pro工程文件中加入 RC_FILE=main.rc rc文件,之前一篇博客 ...

  3. [java] 将整数在千分位或万分位以逗号分隔表示

    简单使用DecimalFormat的功能就能做到了,代码如下: package com.testEmp; import java.text.DecimalFormat; public class Nu ...

  4. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_1-4.在线教育后台数据库设计

    笔记 4.在线教育后台数据库设计     简介:讲解后端数据库设计    ,字段冗余的好处,及常见注意事项 1.数据库设计:          er图:          实体对象:矩形        ...

  5. 编解码原理，Python默认解码是ascii

    编解码原理,Python默认解码是ascii 首先我们知道,python里的字符默认是ascii码,英文当然没问题啦,碰到中文的时候立马给跪. 不知道你还记不记得,python里打印中文汉字的时候需要 ...

  6. [转]html里a标签中href调用js的几种方法

    文章转自:https://blog.csdn.net/best_luxi/article/details/45062301 我们常用的在a标签中有点击事件: 1. a href=”javascript ...

  7. JavaScript中函数文档注释

    /** 方法说明 * @method 方法名 * @for 所属类名 * @param{参数类型}参数名 参数说明 * @return {返回值类型} 返回值说明 */

  8. Windows Server 2019远程桌面服务配置和授权激活

    参考Windows Server 2016远程桌面服务配置和授权激活方法可适用于Windows Server 2019     Server 2016默认远程桌面连接数是2个用户,如果多余两个用户进行 ...

  9. 【计算机视觉】OpenCV之GPU与OpenCL的相关内容说明

    1 扩展库简介OpenCV(Open Source Computer Vision Library)是一个致力于实时处理计算机视觉问题的开源库.它最初由Intel公司开发,以GPL许可协议发布,后来由 ...

  10. C学习笔记-字符串

    对于C语言来说,字符串其实就是最后一个元素为'\0'的char数组 字符数组的初始化 字符数组常见的有两种初始化方式 char str[] = "hello"; 或者 char s ...