Hôm nay DOTNET GROUP -
Thiết kế web tại Đà Nẵng sẽ viết một bài thủ thuật khá thú vị mà nhiều bạn chưa nắm được, đó là kỹ xảo thuộc tính after và postion trong CSS
Ví dụ bạn muốn làm như hình dưới:
Bạn chỉ cần tạo các thẻ ul và li tương ứng, sau đó thêm các CSS vào
HTML:
<div class="page-nav">
<ul id="page-menu-nav" class="">
<li><a href="#tong-quan" title="Tổng quan" class="active">Tổng quan</a></li>
<li><a href="#noi-dung" title="Nội dung">Nội dung</a></li>
<li><a href="#hoc-phi" title="Học phí">Học phí</a></li>
<li><a href="#dang-ky" title="Đăng ký">Đăng ký</a></li>
</ul>
<div id="tong-quan" data-title="Tổng quan" class="entry-content">
<p>Khóa đào tạo SEO Online ra đời từ nhu cầu tìm hiểu về SEO của các bạn học viên đến từ Đà Nẵng, do không có điều kiện để tham gia <a title="Khóa học SEO tiêu chuẩn - Trung tâm đào tạo
thiết kế web chuẩn SEO DOTNET GROUP" href="/ChuyenMuc/Thiet-ke-Web-chuan-SEO-923.aspx" target="_blank">khóa học SEO tiêu chuẩn</a> của DOTNET GROUP. Khóa học SEO Online được Mr. Quang Le CEO của DOTNET GROUP trực tiếp hướng dẫn các bạn những phương pháp cần thiết để làm cho trang web của bạn thành công.</p>
<hr>
</div>
</div>
Dòng CSS:
#page-menu-nav {
list-style: none;
padding: 0;
margin: 0;
display: block;
}
.page-nav ul {
color: #fff;
margin: 0;
position: relative;
z-index: 9999;
}
#page-menu-nav li {
display: inline-block;
}
#page-menu-nav li a.active {
background: #ed1c24;
transition: 0.2s all;
}
#page-menu-nav li a {
padding: 0 10px;
display: block;
line-height: 36px;
text-decoration: none;
transition: 0.2s all;
position: relative;
}
.page-nav {
background: #47b64b;
}
#page-menu-nav li a.active:after {
position: absolute;
display: block;
content: '';
border-top: 6px solid #ED1C24;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
left: 30px;
}