用三或四个个div标签实现工字效果
使用重构的方式制作出一个如下图的水平、垂直都居中，短边为50px，长边为150px的红色“工”字。
a) 使用3个div完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{margin:0;}
#top,#bottom,#middle{background: #f00;position:absolute;left:50%;top:50%;}
#top,#bottom{width:150px;height:50px;margin-left:-75px;}
#top{margin-top: -75px}
#bottom{margin-top: 25px;}
#middle{width:50px;height:150px;margin:-75px 0 0 -25px;}
</style>
</head>
<body>
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
</body>
</html>
b) 使用4个div完成;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{margin:0;}
#wrap{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;}
#top,#bottom,#middle{background: #f00;}
#top,#bottom{width:150px;height:50px;}
#middle{width:50px;height:50px;margin:0 auto;}
</style>
</head>
<body>
<div id="wrap">
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
</div>
</body>
</html>
用三或四个个div标签实现工字效果的更多相关文章
- 金三银四求职季,前端面试题小梳理(HTML、CSS、JS)
好久没写学习记录,最近太多事,又到一年求职季,都说金三银四求职季,自己也做一下最近学习的一些前端面试题梳理,还是个小白,写的不对请指正,不胜感激. HTML篇 html语义化 用语义化的代码标签书写, ...
- 一个页面多图表展示（四个div的方式）
效果如图所示,一个页面四个div,每个div里面展示相应的数据,因为这种效果会有点麻烦,而且不太雅观我就换了一种写法,一个div里面用四个图表,共用一个图例,先放上这个方式的效果图和源码,后期会再发布 ...
- 金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）上
金三银四,磨砺锋芒:剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)上 引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待! ...
- 一个div，包含三个小的div,平均分布的样式
从11月份开始,自学前端开发,写静态页面中,经常用到一个大的div下包含三个小的div,平均分布div大小样式,写过多次,也多次忘记,每次都要现找资料,不想之后,在这么麻烦,索性今天自己记录一下,方便 ...
- 盒子模型/div标签/益出处理
/* <div></div>没有任何功能,不属于功能标签 可以放文字,图片以及各种元素的块标签 常常用来布局 span标签属于行内标签,无法设置宽高 */ <!docty ...
- CSS单元的位置和层次-div标签
我们都知道,在网页上利用HTML定位文字和图象是一件“令人心痛”的事情.我们必须使用表格标签和隐式GIF图象,即使这样也不能保证定位的精确,因为浏览器和操作平台的不同会使显示的结果发生变化. 而CSS ...
- Java开发笔记（一百三十四）Swing的基本对话框
桌面程序在运行过程中,时常需要在主界面之上弹出小窗,把某种消息告知用户,以便用户及时知晓并对症处理.这类小窗口通常称作对话框,依据消息交互的过程,可将对话框分为三类:消息对话框.确认对话框.输入对话框 ...
- Three.js中的div标签跟随(模型弹框)
目录 Three.js中的div标签跟随(模型弹框) 参考官方案例 核心渲染器 用法 注意事项 Three.js中的div标签跟随(模型弹框) 参考官方案例 核心渲染器 three.js-master ...
- 从a标签为什么不能包含div标签-了解HTML5元素分类与内容模型
我们知道按新的 HTML 规范,已经不按 inline 和 block 来区分元素类型了.所以我们在a标签里面使用div标签时候会发现a标签并不能通过改变css盒子模型的方式将div元素包含. 元素分 ...
随机推荐
- 对tomcat来说，每一个进来的请求(request)都需要一个线程，直到该请求结束。
这段时间折腾了哈java web应用的压力测试,部署容器是tomcat 7.期间学到了蛮多散碎的知识点,及时梳理总结,构建良好且易理解的知识架构把它们组织起来,以备忘.对web应用开发者来说,我们很关 ...
- WPF DataGrid 合并单元格
在网上搜索wpf合并单元格,一直没搜索到,没办法,只能自己想办法搞定了.其实就是DataGrid套DataGrid,为了方便支持Column拖动,在合并的DataGridColumn那一列的Heade ...
- NYOJ 38 布线问题_(解法2 Prim算法)
时间限制:1000 ms | 内存限制:65535 KB 难度:4 描写叙述 南阳理工学院要进行用电线路改造.如今校长要求设计师设计出一种布线方式.该布线方式须要满足下面条件: 1.把全部的楼都供 ...
- MYSQL学习笔记3--mysql 2PC二阶段协义 与 日志闪回
mysql两份日志: binlog :server innodb redo log:engine 两份日志顺序一致性:否则主备不一致 两份日志:原子性,同时都有,同时都无 2PC二阶段协义: 第一阶段 ...
- 一个类搞定UIScrollView那些事
前言 UIScrollView可以说是我们在日常编程中使用频率最多.扩展性最好的一个类,根据不同的需求和设计,我们都能玩出花来,当然有一些需求是大部分应用通用的,今天就聊一下以下需求,在一个categ ...
- 二分图的判定hihocoder1121 and hdu3478
这两个题目都是二分图的判定,用dfs染色比较容易写. 算法流程: 选取一个没有染色的点,然后将这个点染色,那么跟他相连的所有点一定是不同颜色的,所以,如果存在已经染过颜色的,如果和这个颜色相同的话,就 ...
- Gym 100187B-A Lot of Joy
题意:给一个字符串,将每个字符分开放进两个口袋,每次从两个口袋分别拿出一个字符,如果相同则开心,问开心的次数期望是多少. 分析:数学期望题,然而这是我最不拿手的...最后答案是每个字符在字符串出现的次 ...
- （转）Spring 读书笔记-----使用Spring容器（一）
Spring有两个核心接口:BeanFactory和ApplicationContext,其中ApplicationContext是BeanFactory的子接口.他们都可代表Spring容器,Spr ...
- 日志记录组件[Log4net]详细介绍
转载:http://www.cnblogs.com/liwei6797/archive/2007/04/27/729679.html 因为工作中有要用到Log记录,找到一篇不错的文章,就转了过来. 一 ...
- NSdate 时间格式
NSdate 时间格式 NSTimeInterval 时间间隔 基本单位 秒 NSDateFormatter 时间格式器 用于日期对象的格式化或字符串解析为日期对象 日期格式如下: y 年 M 年 ...