使用重构的方式制作出一个如下图的水平、垂直都居中，短边为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. 更改Sublimetext3的主题文件，改变某些不喜欢的颜色

    使用的主题是Monokai(SL),主题很好看,但是注释和内容选中的颜色看起来跟没有一个样,看起来很淡,所以稍微改一下主题文件的颜色.

  2. Hive sql 语法解读

    一. 创建表 在官方的wiki里,example是这种: Sql代码   CREATE [EXTERNAL] TABLE [IF NOT EXISTS] table_name [(col_name d ...

  3. Cloud Foundry中gorouter对StickySession的支持

    Cloud Foundry作为业界出众的PaaS平台,在应用的可扩展性方面做得很优秀. 详细来讲,在一个应用须要横向伸展的时候,Cloud Foundry能够轻松地帮助用户做好伸展工作,也就是创建出一 ...

  4. Android SDK无法更新问题解决

    1.在SDK Manager下Tools->Options打开了SDK Manager的Settings,选中“Force https://… sources to be fetched usi ...

  5. 底部菜单栏（三）Fragment+FragmentTabHost实现仿新浪微博底部菜单栏

    一.实现效果图 二.项目工程结构 三.详细代码编写 1.主tab布局界面,main_tab_layout: 双击代码全选 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...

  6. careercup-数组和字符串1.7

    1.7 编写一个算法,若M*N矩阵中某个元素为0,则将其所在的行与列清零. 类似于leetcode中的 Set Matrix Zeroes C++实现代码: #include<iostream& ...

  7. javascript、jsp

    1.javascript:简称js 在<body>与 </body>之间 加入<script> </script>即可 最好在<head>与 ...

  8. js常用笔记

    此文仅为笔记,代码来源自网络 网络技术文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript 1.使用||和&&简化语句, ...

  9. “System.Transactions.Diagnostics.DiagnosticTrace”的类型初始值设定项引发异常。

    今天在项目中用log4net,App.config文件中增加了configSections节点,程序运行报错“System.Transactions.Diagnostics.DiagnosticTra ...

  10. Java静态变量，常量，成员变量，局部变量

    类变量(也叫静态变量)是类中独立于方法之外的变量,用static 修饰.(static表示“全局的”.“静态的”,用来修饰成员变量和成员方法,或静态代码块(静态代码块独立于类成员,jvm加载类时会执行 ...