Question

这就是它的样子。

enter image description here

.rectangle{
    position: absolute;
    top:61px;
    left:116px;
    width: 2px;
    height: 210px;
    background-color: rgba(255,255,255,0.4);
}

这就是我所拥有的，做错了什么？无论我改变什么，大小都保持不变。

    html{background-color:#272a32;}
{
    margin: 0;
    padding: 0;
}
.container{
    width: 320px;
    height: 568px;
    color:white;
}
.container div:not(.line):not(.pm):not(.month){
    position: absolute;
    height: 60px;
    width: 80px;
    text-align: right;
    font-size: 70px;
    font-family: 'bold';
}
.line{
    position: absolute;
    top:61px;
    left:116px;
    width: 2px;
    height: 210px;
    background-color: rgba(255,255,255,0.4);
}

.rectangle{
    position: absolute;
    top:61px;
    left:116px;
    width: 2px;
    height: 210px;
    background-color: rgba(255,255,255,0.4);
}

.pm{
    position: absolute;
    text-align: left;
    width: 80px;
    font-family: 'light';
    top:86px;
    left:123px;
}
.month{
    position: absolute;
    text-align: right;
    font-family: 'light';
    width: 80px;
    top:248px;
    left:31px;
}
.hour{
    top:64px;
    left:31px;
}
.minute{
    top:125px;
    left:31px;
}
.date{
    top:187px;
    left:31px;
}

@font-face{
    font-family: 'bold';
    src:url('BebasBold.otf');
}
@font-face{
    font-family: 'light';
    src:url('BebasLight.otf');
}

欲望结果围绕整个时钟

<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <script src="js/lang.js"></script>
    <script src="js/sjs.js"></script>
    <script src="js/clock.js"></script>
</head>
<body>
<section class="container">
    <div class="hour">12</div>
    <div class="minute">30</div>
    <div class="date">20</div>
    <div class="month">may</div>
    <div class="pm">am</div>
    <div class="line"></div>
    <div class="rectangle"></div>
</section>
<script>

/* User Settings */
var highlight = "#c2332c";
var twentyfour = false;
var padzero = true;
/* End User Settings */

$$('.hour').set(clock.hour(twentyfour,padzero));
$$('.minute').set(clock.minute());
$$('.date').set(clock.date());
$$('.pm').set(clock.am());
$$('.month').set(month[clock.month()]);
$$('.minute').color(highlight);
$$('.hour').color(highlight);
$$('.pm').color(highlight);

</script>
<script src="js/sizing.js"></script>
</body>
</html>

矩形形状改变大小与CSS中提供的大小相关

0 个答案: