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>

  • 相关阅读:
    bzoj3932 [CQOI2015]任务查询系统
    bzoj1901 Zju2112 Dynamic Rankings
    bzoj3524 [Poi2014]Couriers/2223 [Coci 2009]PATULJCI
    bzoj1529 [POI2005]ska Piggy banks
    bzoj1552 [Cerc2007]robotic sort
    bzoj2208 [Jsoi2010]连通数
    2016NOI冬令营day5
    A1035 Password (20)(20 分)
    1048 数字加密(20 分)
    福尔摩斯的约会
  • 原文地址:https://www.cnblogs.com/jiechen/p/4976206.html
Copyright © 2011-2022 走看看