网站CSS样式表不完全适用

时间:2018-02-18 18:12:45

标签: html css web

好的,有人帮我创建我的第一个网站。问题是样式表只适用于部分。

How its supposed to look/how it looks locally

How it actually looks 我的身体     

<div class="top1">
    <h1 align="left" class="1logo">La Di Da DI</h1> 
    <h1 align="left" class="2logo">we likes to party</h1></div>

</body>

我的样式表

html, body {
    margin: 0px;
    padding: 0px;
    outline-offset: 0px;
    background-color: #FFEAE5;
}
.mainTitle{
    display: inline;
}
.2logo {
    display: inline;
    color: #FFEAE5;
    font-size: 18px;
    font-style: italic;
}
.1logo {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: inline;
    color: #FFEAE5;
}
.top1 {
    padding: 5px;
    padding-top: 3px;
    padding-left: 25px;
    background-color: #F87666;
    }

样式表链接

<link href="main.css" content"text/css" rel="stylesheet">

1 个答案:

答案 0 :(得分:3)

section { perspective: 1600px; } .tiltview { position: absolute; left: 20%; top: 50%; margin-top: 10vh; display: flex; flex-wrap: wrap; justify-content: center; width: 100%; transform-style: preserve-3d; transform: translateY(-50%) rotateX(60deg) rotateZ(35deg); z-index: 0; } .fsm { margin: 1vw; display: flex; justify-content: center; align-items: center; flex-direction: column; transition: all 1s ease; transform-style: preserve-3d; outline: 1px solid yellow; &.growing { animation: modalAnimation 1s ease reverse; } &.full-screen { height: 100vh; z-index: 100; margin: 0; border-radius: 0; } &.shrinking { animation: modalAnimation 1s ease forwards; } } img { width: 100%; height: 100%; } @keyframes modalAnimation { to { transform: translate3d(10%, -30%, 0) rotateX(60deg) rotateZ(35deg); } } 开头使用数字不是一个好习惯,因为它采用不同的方法将css应用于那种类......

尝试从开头删除数字,并将其放在最后,如:

<强> HTML

class

<强> CSS

<div class="top1">
  <h1 align="left" class="logo1">La Di Da DI</h1>
  <h1 align="left" class="logo2">we likes to party</h1>
</div>
  

<强> If you are looking for a solution that how to apply css to class that starts from a number see this answer