Tiêu đề với dòng text giải thích

Trở về

  • 2,918

Đôi lúc việc giải nghĩa thêm cho một tiêu đề là cần thiết, giúp cho user hiểu rõ nghĩa hơn nội dung cần nói về cái gì.

Tiêu đề với dòng text giải thích

Một tiêu đề chính và một dòng text ngắn gọn giải thích nội dung của tiêu đề.

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
.headline {
    background: url(https://hocwebchuan.com/images/chuyende/bg_head01.gif) repeat-x left bottom;
    border: 1px solid #ccc;
    border-top: 3px solid #f00;
    font-size: 160%;
    font-weight: bold;
    line-height: 0.8;
    padding: 10px 10px 8px;
}
.headline span {
    color: #666;
    font-size: 60%;
    font-weight: normal;
}
</style>
</head>
<body>
<h2 class="headline">Tiêu đề h2 <span>Dòng giải thích cho nội dung của tiêu đề</span></h2>
</body>
</html>

Hiển thị trình duyệt:

Download file để thực hành

Dòng giải thích cho tiêu đề được viết dưới dạng bên dưới tiêu đề chính.

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
.headline {
    background: url(https://hocwebchuan.com/images/chuyende/bg_head01.gif) repeat-x left bottom;
    border: 1px solid #ccc;
    border-top: 3px solid #f00;
    font-size: 160%;
    font-weight: bold;
    line-height: 0.8;
    padding: 10px 10px 8px;
}
.headline span {
    color: #666;
    font-size: 60%;
    font-weight: normal;
}
</style>
</head>
<body>
<h2 class="headline">Tiêu đề h2<br />
<span>Dòng giải thích cho nội dung của tiêu đề</span></h2>
</body>
</html>

Hiển thị trình duyệt:

Dòng giải thích cho tiêu đề được viết dưới dạng bên phải tiêu đề chính.

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
.headline {
    background: url(https://hocwebchuan.com/images/chuyende/bg_head01.gif) repeat-x left bottom;
    border: 1px solid #ccc;
    border-top: 3px solid #f00;
    font-size: 160%;
    font-weight: bold;
    line-height: 0.8;
    padding: 10px 10px 8px;
    position: relative;
}
.headline span {
    color: #666;
    font-size: 60%;
    font-weight: normal;
    position: absolute;
    right: 10px;
    top: 15px;
}
</style>
</head>
<body>
<h2 class="headline">Tiêu đề h2 <span>Dòng giải thích cho nội dung của tiêu đề</span></h2>
</body>
</html>

Hiển thị trình duyệt:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.