div布局（持续更新）
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布局（持续更新）的更多相关文章
- 干货！IT小伙伴们实用的网站及工具大集合！持续更新！
1.Git 还在担心自己辛辛苦苦写的代码被误删了吗?还在担心自己改错了代码不能挽回吗?还在苦恼于多人开发合作找不到一个好的工具吗?那么用Git就对 了,Git是一个开源的分布式版本控制系统,用以有效. ...
- 【持续更新】JavaScript常见面试题整理
[重点提前说]这篇博客里的问题涉及到了了JS中常见的的基础知识点,也是面试中常见的一些问题,建议初入职场的园友Mark收藏,本文会持续更新~ 1. 引入JS的三种方式 1.在HTML标签中直接使用,直 ...
- html知识点汇总（持续更新中）
本人从事前端行业三年多,打算从今天开始整理一些关于前端的一些比较经典的知识点,持续更新中...希望能对一些相关知识点有疑问的朋友有一些帮助! HTML篇: 1.常见的行内元素/块级元素/空元素有哪些? ...
- web前端面试题（持续更新）
此文是我本人在面试的时候遇到的问题和一些同学遇到的问题加资料上面的问题的总结.(将会持续更新,因为未有满意工作) 面试时有几点需要注意: 1.面试题目:根据你的等级和职位的变化,入门级到大神级,广度和 ...
- BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js
BAT 前端开发面经 —— 吐血总结 目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...
- 前端面试题总结——HTML(持续更新中)
前端面试题总结--HTML(持续更新中) 1.什么是HTML? HTML:HyperText Markup Language超文本标记语言 2.XHTML和HTML有什么区别 HTML是一种基本的WE ...
- 兼容低版本IE浏览器的一些心得体会（持续更新）
前言: 近期工作中,突然被要求改别人的代码,其中有一项就是兼容IE低版本浏览器,所以优雅降级吧. 我相信兼容低版本IE是许多前端开发的噩梦,尤其是改别人写的代码,更是痛不欲生. 本文将介绍一些本人兼容 ...
- css面试题汇总 （持续更新）
前言:这篇随笔是为了准备后面的面试而整理的,网上各种面试题太多了,但是我感觉很多太偏了,而且实际开发过程中并不会遇到,因此这里我整理一些比较常用的,或者是相对比较重要的知识点,每个知识点都会由浅入深, ...
- 基于android studio的快捷开发（将持续更新）
对于Android studio作为谷歌公司的亲儿子,自然有它的好用的地方,特别是gradle方式和快捷提示方式真的很棒.下面是我在实际开发中一些比较喜欢用的快速开发快捷键,对于基本的那些就不多说了. ...
- ( 译、持续更新 ) JavaScript 上分小技巧(三)
最近家里杂事较多,自学时间实在少的可怜,所以都在空闲时间看看老外写的内容,学习之外顺便翻译分享~等学习的时间充足些再写写自己的一些学习内容和知识点分析(最近有在接触的:复习(C#,SQL).(学习)T ...
随机推荐
- python排序之冒泡排序
def sort(list): for i in range(len(list)): for j in range(len(list) - i - 1): if list[j] < list[j ...
- centos7搭建hadoop-2.7.3,zookeeper-3.4.6,hbase-1.2.5(root用户)
环境:[centos7.hadoop-2.7.3.zookeeper-3.4.6.hbase-1.2.5] 两个节点:[主节点,主机名为Master,用户为root:从节点,主机名为Slave,用户为 ...
- LeetCode 240. 搜索二维矩阵 II（Search a 2D Matrix II）
题目描述 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target.该矩阵具有以下特性: 每行的元素从左到右升序排列. 每列的元素从上到下升序排列. 示例: 现有矩阵 m ...
- Resharper错误提示方法的命名
Resharper-->Options-->C#-->Naming Style
- backupAgent节点
在<application>节点中有一个非常重要的属性,那就是backupAgent. 1.backupAgent简介 Androidd:backupAgent用来设置备份代理.对于大部分 ...
- chrome调试笔记
F12启动调试 1.右键加载按钮可以清空缓存并重新加载,有时候浏览器有缓存,代码更新不会及时反映出来. 2.performance mointer实时查看performance 点击三个竖着的小点,选 ...
- RabbitMQ学习之：（五）Exchange Type （转贴+我的评论）
From: http://lostechies.com/derekgreer/2012/03/28/rabbitmq-for-windows-exchange-types/ RabbitMQ for ...
- WPF学习笔记 - 数据绑定（在代码中）
在程序代码里,有两种设置绑定的方法,一种是调用FrameworkElement或FrameContentElement对象的SetBinding实例方法. 例如: Public MainWindow( ...
- JAVA 基础编程练习题16 【程序 16 输入 9*9 表】
16 [程序 16 输入 9*9 表] 题目:输出 9*9 口诀. 程序分析:分行与列考虑,共 9 行 9 列,i 控制行,j 控制列. package cskaoyan; public class ...
- vue中自定义指令的使用
原文地址 vue中除了内置的指令(v-show,v-model)还允许我们自定义指令 想要创建自定义指令,就要注册指令(以输入框获取焦点为例) 一.注册全局指令: // 注册一个全局自定义指令 `v- ...