Embedded Files
Chia sẻ code thanh tiêu đề ngang đẹp bằng HTML kết hợp với CSS nhiều hiệu ứng đẹp. Bạn hãy chọn một mẫu dưới đây để thiết kế cho website mình nhé. Bạn có thể thay thế các chi tiết theo ý bạn ở phần CSS nhé (nếu bạn cho đoạn css vào file .css thì bạn bỏ cặp thẻ <style></style> nhé. Còn phần HTML dấu # bạn hãy thay thế bằng đường link của liên kết trang nào bạn muốn. Rồi bạn dán vào nơi muốn đặt thanh tiêu đề, đa số thì các trang web đặt ở thẻ _header (đầu trang). Demo mẫu thanh tiêu đề 1:
CSS:
<style>
.style1 {list-style-type:none;
padding:2px 2px;
clear:both;
overflow:hidden;
margin:auto;
max-width:700px;
text-align:center;
}
.style1 li {
transition:0.8s ease;
padding:10px 25px;
background:#528B8B;
color:#ffffff;
text-align:center;
float:left;
border:1px #ddd solid;
}
.style1 li:hover {background:#43CD80;
}
.style1 li a {color:#ffffff;
font-size:big;
font-weight:bold;
text-decoration:none;
transition:0.5s ease;
}
.style1 li a:hover {color:red;
text-shadow:1px 2px 3px blue, 1px 2px 3px green; }
</style>
HTML:
<center>
<ul class="style1">
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Introduce</a></li>
<li><a href="#">Game</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Entertainment</a></li>
</ul>
</center>
Demo mẫu thanh tiêu đề 2:
CSS:
<style>
.style2 {list-style-type:none;
padding:2px 2px;
clear:both;
overflow:hidden;
margin:auto;
max-width:700px;
text-align:center;}
.style2 li { margin:5px;
padding:10px 20px;
float:left;
background:#8B4513;
transition:0.8s ease;
border-radius:8px;
box-shadow:5px 5px 5px #999;
border:1px solid #cdcdcd;
}
.style2 li a {color:#fff;
font-size:big;
font-weight:bold;
text-decoration:none;
transition:0.5s ease;
}
.style2 li:hover{background:#FFE4C4;
}
.style2 li a:hover {color:#008000;
text-shadow:1px 2px 3px blue, 1px 2px 3px yellow;
}
</style>
HTML:
<center>
<ul class="style2">
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Introduce</a></li>
<li><a href="#">Game</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Entertainment</a></li>
</ul>
</center>
Demo mẫu thanh tiêu đề 3:
CSS:
<style>
.style3 {list-style-type:none;
clear:both;
overflow:hidden;
margin:auto;
max-width:700px;
text-align:center;
}
.style3 li{
background:#FAFAD2;
transition:0.8s ease;
padding:10px 20px;
color:#ffffff;
text-align:center;
float:left;
border:1px #ddd solid;
margin:3px 5px;
border-radius:5px;
box-shadow:inset 0px 0px 15px 5px #CD853F;
}
.style3 li a {color:#A0522D;
font-size:big;
font-weight:bold;
text-decoration:none;
transition:0.5s ease;
}
.style3 li:hover {background:#F0F8FF;
box-shadow:inset 0px 0px 15px 5px #8470FF;
}
.style3 li a:hover{color:#191970;
}
<style>
HTML:
<center>
<ul class="style3">
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Introduce</a></li>
<li><a href="#">Game</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Entertainment</a></li>
</ul>
<center>
Demo mẫu thanh tiêu đề 4:
CSS:
<style>
.ribbon {
display:inline-block;
color:white;
font-weight:bold;
}
.ribbon:after, .ribbon:before {
margin-top:0.5em;
content: "";
float:left;
border:1.5em solid #FFCC33;
margin-top:15px;
}
.ribbon:after {
border-right-color:transparent;
}
.ribbon:before {
border-left-color:transparent;
}
.ribbon a:link, .ribbon a:visited {
color:red;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
}
.ribbon span {
background:#FFCC33;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
-webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}
.ribbon a:hover span {
background:#CC0000;
margin-top:0;
color:yellow;
}
.ribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid #FFCC33;
}
.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid #FFCC33;
}
</style>
HTML:
<center>
<div class="ribbon">
<a href="http://utnhan.wap.sh/"><span>Trang Chủ</span></a>
<a href="http://utnhan.wap.sh/dien-dan"><span>Diễn Đàn</span></a>
<a href="http://utnhan.wap.sh/cong-cu"><span>Công cụ</span></a>
<a href="http://utnhan.wap.sh/kho-game"><span>Kho Game</span></a>
<a href="http://utnhan.wap.sh/giai-tri"><span>Giải Trí</span></a>
<a href="http://utnhan.wap.sh/upload"><span>Upload</span></a>
</div>
</center>
Google Sites
Report abuse