Tiêu đề với background là một icon
Cách thực hiện tiêu đề có icon, sử dụng image cũng tốt, tuy nhiên dùng background sẽ làm tối giản souce code html, giúp ích cho SEO.
Tiêu đề với icon
Tiêu đề có icon nằm trước.
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;
padding: 7px 10px 8px;
}
.headline img {
vertical-align: middle;
}
.headline span {
padding: 2px 0 0 10px;
vertical-align: middle;
}
</style>
</head>
<body>
<h2 class="headline"><img src="http://hocwebchuan.com/images/chuyende/ico_setting.gif" alt="Setting" /><span>Tiêu đề h2</span></h2>
</body>
</html>
Hiển thị trình duyệt:
Tiêu đề có link
Tiêu đề có icon nằm trước, link nằm bên phải.
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;
padding: 7px 10px 8px;
position: relative;
}
.headline h2 {
font-size: 160%;
font-weight: bold;
margin: 0;
}
.headline img {
vertical-align: middle;
}
.headline span {
padding: 2px 0 0 10px;
vertical-align: middle;
}
.headline p {
position: absolute;
right: 10px;
top: 0;
}
</style>
</head>
<body>
<div class="headline">
<h2><img src="http://hocwebchuan.com/images/chuyende/ico_setting.gif" alt="Setting" /><span>Tiêu đề h2</span></h2>
<p><a href="#">Chi tiết</a></p>
</div>
</body>
</html>
Hiển thị trình duyệt:
Tách link "Chi tiết" ra khỏi <hx>, vì link này không phải là dạng headline.
Tiêu đề với định dạng link
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;
padding: 7px 10px 8px;
position: relative;
}
.headline h2 {
font-size: 160%;
font-weight: bold;
margin: 0;
}
.headline img {
vertical-align: middle;
}
.headline span {
padding: 2px 0 0 10px;
vertical-align: middle;
}
.headline p {
position: absolute;
right: 15px;
top: 0;
}
.headline p a {
background: url(https://hocwebchuan.com/images/chuyende/ico_arrow08.gif) no-repeat left center;
color: #333;
font-size: 90%;
padding-left: 10px;
text-decoration: underline;
}
.headline p a:hover {
text-decoration: none;
}
</style>
</head>
<body>
<div class="headline">
<h2><img src="http://hocwebchuan.com/images/chuyende/ico_setting.gif" alt="Setting" /><span>Tiêu đề h2</span></h2>
<p><a href="#">Chi tiết</a></p>
</div>
</body>
</html>