Tiêu đề với background là một icon

Trở về

  • 3,441

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:

Download file để thực hành

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>

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.