画一个微软标志

img

闲来无事,玩了会CSS,所以画一个微软标志展示我的信仰信仰田牌

  • index.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <link href="use.css" rel="stylesheet" type="text/css">
    <title>画一个微软标志</title>
    </head>
    <body>
    <div id="icon">
    <div class="text">Microsoft</div>
    <div class="zz">
    <div class="s1"></div>
    <div class="s2"></div>
    <div class="s3"></div>
    <div class="s4"></div>
    </div>
    </div>
    </body>
    </html>
  • use.css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    @CHARSET "UTF-8";
    #icon{
    height: 420px;
    width:1500px;
    }
    .text{
    width: 1000px;
    height: 420px;
    line-height:420px;
    font-size: 340px;
    float: right;
    font-family: "Microsoft YaHei"! important;
    font-weight:bold;
    letter-spacing: -10px;
    color: rgb(119,119,119);
    }
    .zz {
    width: 420px;
    height: 420px;
    }
    .s1 {
    width: 200px;
    height: 200px;
    background: rgb(243,100,34);
    float: left;
    }
    .s2 {
    width: 200px;
    height: 200px;
    background: rgb(141,197,62);
    float: right;
    }
    .s3 {
    width: 200px;
    height: 200px;
    background: rgb(0,173,239);
    float: left;
    margin-top: 20px;
    }
    .s4 {
    width: 200px;
    height: 200px;
    background: rgb(255,195,13);
    float: right;
    margin-top: 20px;
    }

后记

现在是2018年,再看此文,感觉当年真傻逼……

来自2018/10/29:“是啊,真幼稚。”