CSS对吗? [英] Is the CSS right?

问题描述

下面是我的CSS文件和我所引用的图像.在图片中，它是第1天，但如果是第10天或任何其他两位数天，2013年还是没有?这是一个愚蠢的问题，我知道，但是我不确定整个边距，填充，位置和浮动因子.

Below is my CSS file and an image of what I'm referencing. In the picture, it's the 1st, but if it was the 10th, or any other 2-digit-day, would the 2013 or no? It's a dumb question, and I know, but I'm not sure about the whole margin, padding, position, and float factors.

重新回答的问题:我对填充和边距不太满意，所以也许我问的是错误的问题.图为2013年4月1日，太好了.但是我想知道4月10日(第2位数字的日期)是否会使2013年向右转移(我想要的)，与2013年重叠，还是走在那条线上之外的其他地方?我问的原因是由于我的边距，填充，浮点和位置，所以我不确定是否会影响它..

REPHRASED QUESTION: I'm not too good with padding and margins so maybe I'm asking the wrong question. The picture shows April 1 2013, great. But I'm wondering if April 10 (a 2nd-digit day) will make the 2013 shift RIGHT (what I want), overlap the 2013, or go somewhere else not on that line? Reason I'm asking is because of my margins, paddings, floats, and positions, I'm not sure if it's going to affect it..

@font-face {

    font-family: Walkway Bold;

    src: url('Fonts/WalkwayBold.ttf');
}


@font-face {

    font-family: Roboto;

    src: url('Fonts/Roboto.ttf');
}

@font-face {

    font-family: CaviarDreams;

    src: url('Fonts/CaviarDreams.ttf');
}

body {

    font-family: Roboto;
    margin: 0;
    padding:0;
    background: #000;
    background-size: 61%;
    color:#FFF;
    text-shadow:3px 3px 7px #000000;

}

div#content {
    position:absolute;
    -webkit-transform: rotate(0deg);
    left:75px;
    top:0px;
}

div#timecluster {
    font-family: Roboto;
    position:absolute;
    text-align:center;
    top:30px;
    left:-95px;
    color:#fff;
    clear:left;
    width:345px;
    opacity:.8;
}

div#hourbox {
    font-family: Roboto;
    text-align:right;
    color:#ffffff;
    position:relative;
    font-size:75px;
    letter-spacing:-5px;
    margin-right:3px;
    font-weight:bold;
}

div#minutebox {
    font-family: Roboto;
    position:relative;
    opacity: 0.2;
    font-size:75px;
    letter-spacing:-5px;
    margin-left:10px;
    font-weight:bold;
}

div#ampmbox {
    text-align:right;
    position:relative;
    font-size:75px;
    letter-spacing:-5px;
    font-weight:bold;
    margin-top:-5px;
    right: -5;
}

div#datecluster {
    position:absolute;
    top:90px;
    left:-130px;
    width:380px;
    height:180px;
}

div#dateinner {
    position:absolute;
    top:40px;
    left:40px;
    width:300px;
    height:90px;
}



div#monthbox {
    font-family: CaviarDreams;
    position:absolute;
    float:left;
    padding:0;
    font-size:20px;
    opacity:0.2;
    width:135px;
    text-align:right;
    top: -19px;
}

div#daybox {
    font-family: CaviarDreams;
    position:relative;
    float:left;
    padding:0;
    font-size:20px;
    opacity:0.2;
    width:135px;
    text-align:right;
    top: 1;
}

div#datebox {
    font-family: Roboto;
    position:relative;
    float:left;
    margin:-20px 4 0 10;
    font-size:40px;
    opacity:.8;
    text-align:center;
}

div#yearbox {
    font-family: Roboto;
    position:relative;
    float:none;
    margin:-20 0 0 0px;
    font-size:40px;
    opacity:.1;
top:0;
right: 0;
}

推荐答案

是的，但是在上下文中，您的问题是，某些浏览器默认不支持ttf前端，因此您可以将它们转换为支持更好的"woff"，

Yes, but in context your question is, some browser do not support the ttf fronts by default, so you may convert them to "woff" supports better,

免费使用Google字体，如果符合您的要求，请:)

use google fonts the are freely available, if that suits your requirements then :)

或在woff中转换您的ttf字体，有许多免费的在线转换器可用，

or convert your ttf fonts in woff, many free online converters are available,

然后，代码将如下所示..'Droid Serif'

then code will be like this.. for 'Droid Serif'

@font-face {
  font-family: 'Droid Serif';
  font-style: normal;
  font-weight: 700;
  src: local('Droid Serif Bold'), local('DroidSerif-Bold'), url(http://themes.googleusercontent.com/static/fonts/droidserif/v3/QQt14e8dY39u-eYBZmppwTqR_3kx9_hJXbbyU8S6IN0.woff) format('woff');
}

我希望这会对您有所帮助:)

I hope this will help you :)

有更新的问题

在剩余年份增加一些利润，

Add some margin to the year left,

更新后的答案.

div#yearbox {
font-family: Roboto;
position:relative;
float:left;
margin:-20 0px 0px 10px; 'this last element will represent margin left i.e. 10px
font-size:40px;
opacity:.1;
top:0;
}

这篇关于CSS对吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！