zoukankan      html  css  js  c++  java
  • 用三或四个个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{150px;height:50px;margin-left:-75px;}
            #top{margin-top: -75px}
            #bottom{margin-top: 25px;}
            #middle{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%;150px;height:150px;margin:-75px 0 0 -75px;}
            #top,#bottom,#middle{background: #f00;}
            #top,#bottom{150px;height:50px;}    
            #middle{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>

  • 相关阅读:
    yarn安装ant-报错
    Linux扩展分区记录
    转载--tomcat调优
    转发:tomcat的acess_log打印post请求参数,分析日志
    经纬度差和米单位的换算
    loadrunner 11 安装与使用
    前端知识图谱
    linux-nc命令介绍
    双网卡设置(转:https://www.cnblogs.com/visionfeng/p/5825078.html)
    网络设备介绍
  • 原文地址:https://www.cnblogs.com/jiechen/p/4976206.html
Copyright © 2011-2022 走看看