使用重构的方式制作出一个如下图的水平、垂直都居中，短边为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标签实现工字效果的更多相关文章

  1. 金三银四求职季,前端面试题小梳理(HTML、CSS、JS)

    好久没写学习记录,最近太多事,又到一年求职季,都说金三银四求职季,自己也做一下最近学习的一些前端面试题梳理,还是个小白,写的不对请指正,不胜感激. HTML篇 html语义化 用语义化的代码标签书写, ...

  2. 一个页面多图表展示（四个div的方式）

    效果如图所示,一个页面四个div,每个div里面展示相应的数据,因为这种效果会有点麻烦,而且不太雅观我就换了一种写法,一个div里面用四个图表,共用一个图例,先放上这个方式的效果图和源码,后期会再发布 ...

  3. 金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）上

    金三银四,磨砺锋芒:剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)上 引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待! ...

  4. 一个div，包含三个小的div,平均分布的样式

    从11月份开始,自学前端开发,写静态页面中,经常用到一个大的div下包含三个小的div,平均分布div大小样式,写过多次,也多次忘记,每次都要现找资料,不想之后,在这么麻烦,索性今天自己记录一下,方便 ...

  5. 盒子模型/div标签/益出处理

    /* <div></div>没有任何功能,不属于功能标签 可以放文字,图片以及各种元素的块标签 常常用来布局 span标签属于行内标签,无法设置宽高 */ <!docty ...

  6. CSS单元的位置和层次-div标签

    我们都知道,在网页上利用HTML定位文字和图象是一件“令人心痛”的事情.我们必须使用表格标签和隐式GIF图象,即使这样也不能保证定位的精确,因为浏览器和操作平台的不同会使显示的结果发生变化. 而CSS ...

  7. Java开发笔记（一百三十四）Swing的基本对话框

    桌面程序在运行过程中,时常需要在主界面之上弹出小窗,把某种消息告知用户,以便用户及时知晓并对症处理.这类小窗口通常称作对话框,依据消息交互的过程,可将对话框分为三类:消息对话框.确认对话框.输入对话框 ...

  8. Three.js中的div标签跟随(模型弹框)

    目录 Three.js中的div标签跟随(模型弹框) 参考官方案例 核心渲染器 用法 注意事项 Three.js中的div标签跟随(模型弹框) 参考官方案例 核心渲染器 three.js-master ...

  9. 从a标签为什么不能包含div标签-了解HTML5元素分类与内容模型

    我们知道按新的 HTML 规范,已经不按 inline 和 block 来区分元素类型了.所以我们在a标签里面使用div标签时候会发现a标签并不能通过改变css盒子模型的方式将div元素包含. 元素分 ...

随机推荐

  1. GWT事件处理

    package com.zly.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.event.do ...

  2. Android开发之点九图的制作说明

    总结: 左边的点代表垂直拉伸的区域, 上边的点代表水平拉伸的区域. 右边的点代表文字等的垂直可可显示区域. 下边的点代表文字等的水平可显示区域. 左上重合的区域就是拉伸区域. 右下重合的区域就是显示区 ...

  3. 部分 CM11 系统 Android 平板执行植物大战僵尸 2 黑屏的解决的方法

    原文 http://forum.xda-developers.com/showthread.php?t=2755197 部分 CM11 系统的 Android 平板(比如三星 GT-P5110 )执行 ...

  4. [AngularJS] Extract predicate methods into filters for ng-if and ng-show

    Leaking logic in controllers is not an option, filters are a way to refactor your code and are compa ...

  5. java 流程执行 循环 foreach循环

    一. if分支 1. 结构  if  else if   else 2.执行原则 if  if  if 结构  会一直去执行()里的判断语句 if else if  else if 结构  只要一条( ...

  6. 正则表达式工具类，正则表达式封装，Java正则表达式

    正则表达式工具类 正则表达式封装 Java正则表达式 >>>>>>>>>>>>>>>>>>& ...

  7. 第五篇：web之前端之float的几种清除浮动方式

    前端之float的几种清除浮动方式   前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.flo ...

  8. 11.10 noip模拟试题

    1．第K小数 (number.cpp/c/pas) [问题描述] 有两个正整数数列,元素个数分别为N和M.从两个数列中分别任取一个数 相乘,这样一共可以得到N*M个数,询问这N*M个数中第K小数是多少 ...

  9. Codeforces Round #310 (Div. 2)--A(简单题)

    http://codeforces.com/problemset/problem/556/A 题意:给一个01字符串,把所有相邻的0和1去掉,问还剩下几个0和1. 题解:统计所有的0有多少个,1有多少 ...

  10. 【锋利的jQuery】学习笔记03

    第三章 jQuery中的DOM操作 一.DOM操作的分类 DOM(document object model)是一种与浏览器.平台.语言无关的接口,使用该接口可以访问页面中的·所有组件.DOM的操作可 ...