Tiêu đề với dòng text giải thích
Đô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:
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>