尝试在我的标题下添加一个小标题,该标题与标题的左侧对齐

时间:2018-02-07 17:24:08

标签: html css

干杯!所以我有这个页面,你知道吗?我在业余时间练习一些 html / css 的东西,它看起来很有趣,我在头版上有这个标题,我想在它下面添加一个副标题,在标题的左边对齐,但我不知道,我无法在网络上的任何地方找到它。我已经筋疲力尽了,而且我已经没心情了。我标记了我要拍文本的地方。

<!DOCTYPE html>
<html lang="ro">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Anime-uri online, cu subtitrare în limba română." />
<meta name="author" content="Redd" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<title>Taciturn | 沈黙寡言</title>
<link rel="stylesheet" type="text/css" href="/assets/css/bss.css" />
</head>

<body>
    <section class="intro">
        <div class="inner">
            <div class="content">
                    <h1>沈黙寡言</h1>
                    <a class="button" href="/portal.php">Portal</a>
            </div>
        </div>
    </section>
</body>

@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Oswald');

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
.intro {
    height: 100%;
    width: 100%;
    margin: auto;
    background: url(/assets/img/biX0.jpg) no-repeat;
    display: table;
    top: 0;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
}
.intro .inner {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    max-width: none;
}
.content {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}
.content h1 {
    font-family: 'Raleway', sans-serif;
    color: #AE070A;
    text-shadow: 0px 0px 300px #000;
    font-size: 600%;
    -webkit-text-stroke: 0.5px #FFF;
}
.button {
    border-radius: 9px;
    font-family: 'Oswald', sans-serif;
    color: #036AB1;
    font-size: 140%;
    padding: 10px 20px;
    border: solid #036AB1 3px;
    text-transform: uppercase;
    text-decoration: none;
}
.button:hover {
    color: #AE070A;
    border: solid #AE070A 3px;
}
/* Paragraph 
p {
    font-size: 160%;
    line-height: 210%;
    text-align: justify;
    margin: 3%;
    font-family: sans-serif;
}
 Paragraph */
@media screen and (max-width: 768px) {
    .content h1 {
        font-size: 250%;
    }
    .button {
        font-size: 110%;
        padding: 7px 15px;
    }
    p {
        font-size: 100%;
        line-height: 160%;
    }
}

1 个答案:

答案 0 :(得分:0)

在CSS中左对齐,但你需要将你的子标题放在相同的代码块中。