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 ...
随机推荐
- matlab gui界面设计记录
我们要进行的程序是彩色图像处理试验示例,用这个程序来练习我们的gui前台设计. 程序功能介绍:具有彩色图像处理及保存和音乐播放功能效果如下图 2 在MATLAB的命令窗口中输入guide命令,打开gu ...
- highcharts 代码都对,但是不显示图片
$('#container').highcharts({ chart: { zoomType: 'xy' }, title: { text: 'Average Monthly Temperature ...
- leetcode1284 转化为全零矩阵的最少反转次数
m == mat.length n == mat[0].length 1 <= m <= 3 1 <= n <= 3 mat[i][j] 是 0 或 1 . BFS, 代码来自 ...
- vscode 设置 eclipse 快捷键
点击安装之后,默认就是要ecliplse快捷键了 注意:部分快捷键可能会由于和原来的冲突而失效,例如快速在“下面插入行” ,我还是不能使用ecliplse的Shift+Enter,而要用Ctrl+En ...
- GitHub代码下载和同步
1.下载git客户端https://git-scm.com/ssh-keygen -C "your@email.address" -t rsa 2. 把下面文件的内容复制到 htt ...
- 15.kubernetes认证及serviceaccount
kubernetes认证及serviceaccount 认证 授权:RBAC(目前的主流授权方式) 准入控制:了解即可 --> 认证 授权 准入控制 客户端 -->api-server: ...
- 小D课堂 - 新版本微服务springcloud+Docker教程_5-04 feign结合hystrix断路器开发实战下
笔记 4.Feign结合Hystrix断路器开发实战<下> 简介:讲解SpringCloud整合断路器的使用,用户服务异常情况 1.feign结合Hystrix ...
- 公式test
- node 笔记整理
node 合并多个请求的数据 function getList1(num) { var url= "netease/search?keyword=独孤天下&type=song& ...
- CAN总线多节点通信异常分析及解决
一.CAN物理层特征 CAN收发器的作用是负责逻辑电平和信号电平之间的转换.即从CAN控制芯片输出逻辑电平到CAN收发器,然后经过CAN收发器内部转换将逻辑电平转换为差分信号输出到CAN总线上,CAN ...