Chào các bạn hôm nay mình có tổng hợp 1 số tiêu đề đẹp cho website . Anh em ai có nhu cầu thì vào xem và sử dụng
Code html : Chọn tiêu đề bạn thích và thêm vào nhé :
Code 1 :
<div class="clearfix vi-header"> <h3 class="vi-left-title pull-left">BÁCH HÓA ONLINE</h3> <div class="vi-right-link pull-right"><a href="#">Khuyến mại và quà tặng</a><a href="#">Vệ sinh nhà cửa</a><a href="#">Chăm sóc cơ thể</a><a href="#">Thược phẩm khô</a><a href="#">Đồ uống</a><a class="vi-more" href="#">Xem tất cả »</a></div> </div>
Code 2 :
<div class="clearfix vi-header"> <h3 class="vi-left-title-1 pull-left"><a href="/danh-muc/do-da-cao-cap/"><i class="fa fa-address-card"></i> ĐỒ DA CAO CẤP </a></h3> <div class="vi-right-link pull-right"><a href="/danh-muc/do-da-cao-cap/that-lung-da-ca-sau">Thắt lưng da cá sấu</a><a href="/danh-muc/do-da-cao-cap/vi-da-ca-sau">Ví da cá sấu</a><a href="/danh-muc/do-da-cao-cap/vi-da-da-dieu">Ví da đà điểu</a><a class="vi-more" href="/danh-muc/do-da-cao-cap/">Xem tất cả</a></div> </div>
Code 3 :
Code css :
/* sangtaosacviet.com - code 1 */ .vi-header { border-bottom: solid 1px #0056a8; } .vi-left-title { width: auto; background: #0056a8; color: #fff; padding: 3px 10px; font-size: 18px; position: relative; margin: 0; } .pull-left { float: left; } .pull-left { margin-left: 0 !important; } .vi-left-title a { color: #fff; } .vi-left-title:after { border: 17px solid transparent; border-left-color: #0056a8; border-bottom-color: #0056a8; position: absolute; top: 0; left: 100%; content: ""; } .pull-right { float: right; } .pull-right { margin-right: 0 !important; } .vi-right-link a:first-child { margin-left: 0; } .vi-right-link a { color: #555; font-size: 14px; margin-left: 15px; } .vi-right-link a.vi-more, .vi-right-link a:hover { color: #0056a8; } .vi-right-link a.vi-more:after { content: "\f101"; font-family: FontAwesome; margin-left: 4px; } /* sangtaosacviet.com - code 2 */ .vi-left-title-1:after { border: 17px solid transparent; position: absolute; top: 0; left: 100%; content: ""; } .vi-left-title-1 { width: auto; background: #0056a8; color: #fff; padding: 3px 10px; font-size: 18px; position: relative; margin: 0; } .vi-left-title-1 a { color: #fff; } /* sangtaosacviet.com - code 3 */ #stsv-02 h3.tde { text-align: center; margin: 45px 0; font-size: 16px; line-height: 20px; text-transform: uppercase;} #stsv-02 h3.tde span { background: #8CC63F; height: 50px; line-height: 50px; padding: 0px 20px; color: white; position: relative; display: inline-block; margin: 0; z-index: 45; border-radius: 10px 10px 0px 0px; border: 1px solid #8bb54b;} #stsv-02 h3.tde :before,#stsv-02 h3.tde :after { content: ""; background: url(https://sangtaosacviet.com/wp-content/uploads/2017/09/hd-stsv.png); width: 87px; height: 50px; position: absolute; top: 19px; z-index: -1;} #stsv-02 h3.tde :before { left: -44px; } #stsv-02 h3.tde :after { transform: rotateY(180deg); right: -44px !important;} /* sangtaosacviet.com - code 4 */ .vi-left-title-2:after { border: 17px solid transparent; border-left-color: #0056a8; position: absolute; top: 0; left: 100%; content: ""; } .vi-left-title-2 { width: auto; background: #0056a8; color: #fff; padding: 3px 10px; font-size: 18px; position: relative; margin: 0; } .vi-left-title-2 a { color: #fff; } /* sangtaosacviet.com - code 5 */ .box-title-new { position: relative; margin: 50px 0; text-align: center;} .box-title-new .box-title-name-new { font-size: 24px; font-weight: 900; text-transform: uppercase; color: #fff; background: #00AA46; display: inline-block; vertical-align: top; position: relative; z-index: 1; padding: 10px 20px; marrgin-bottom: 20px; border-radius: 15px;} .box-title-new .box-title-name-new:before { content: ""; position: absolute; border-top: 10px solid #00aa46; border-left: 15px solid transparent; border-bottom: 7px solid transparent; border-right: 15px solid transparent; left: calc(50% - 40px); bottom: -25px; width: 50px;} .box-title-new .box-title-name-new:after { content: ""; position: absolute; z-index: 2; bottom: -18px; height: 9px; width: 200px; left: calc(50% - 100px); border-top: 2px solid #00aa46;} /* sangtaosacviet.com - code new */ div#nz-div { border-bottom: 2px solid red; margin-bottom: 40px; display: block; } #nz-div h3.tde { margin: 0; font-size: 16px; line-height: 20px; display: inline-block; text-transform: uppercase; } #nz-div h3.tde :after { content: ""; width: 0; height: 0; border-top: 40px solid transparent; border-left: 20px solid #EA3A3C; border-bottom: 0px solid transparent; border-right: 0 solid transparent; position: absolute; top: 0px; right: -20px; } #nz-div h3.tde span { background: #EA3A3C; padding: 10px 20px 8px 20px; color: white; position: relative; display: inline-block; margin: 0; } .sub-cat { display: inline-block; margin: 0; line-height: 45px; margin-left: 100px; float: right; } /* 2 ========================= */ #nz-div-2 h3.tde :after { content: ""; width: 0; height: 0; border-top: 19px solid transparent; border-left: 15px solid #EA3A3C; border-bottom: 19px solid transparent; border-right: 0 solid transparent; position: absolute; top: 0px; right: -15px; } #nz-div-2 h3.tde span { background: #EA3A3C; padding: 10px 20px 8px 20px; color: white; position: relative; display: inline-block; margin: 0; } #nz-div-2 h3.tde { margin: 15px 0; font-size: 16px; line-height: 20px; text-transform: uppercase; } #nz-div-2 hr { margin: -34px 0px 54px 0px; border: 1px solid red; } /* 3 ========================= */ #nz-div-3 h3.tde span { background: #EA3A3C; padding: 10px 20px 8px 20px; color: white; position: relative; display: inline-block; margin: 0; border-radius: 23px 23px 0px 0px; } #nz-div-3 h3.tde { margin: 15px 0; border-bottom: 2px solid #ea3a3c; font-size: 16px; line-height: 20px; text-transform: uppercase; } /* 4 ========================= */ #nz-div-4 h3.tde :after { content: ""; width: 0; height: 0; border-top: 40px solid transparent; border-left: 20px solid #EA3A3C; border-bottom: 0px solid transparent; border-right: 0 solid transparent; position: absolute; top: 0px; right: -20px; } #nz-div-4 h3.tde :before { content: ""; width: 0; height: 0; border-width: 40px 20px 0px 0px; border-style: solid; border-color: transparent; border-right-color: #EA3A3C; position: absolute; top: 0px; left: -20px; } #nz-div-4 h3.tde span { background: #EA3A3C; padding: 10px 20px 8px 20px; color: white; position: relative; display: inline-block; margin: 0; } #nz-div-4 h3.tde { text-align: center; margin: 45px 0; border-bottom: 2px solid #ea3a3c; font-size: 16px; line-height: 20px; text-transform: uppercase; } /* 5 ========================= */ #nz-div-5 { text-align: center; } #nz-div-5 h3.tde { display: inline-block; background: #ea3a3c; color: white; height: 50px; line-height: 50px; padding: 0 30px; width: auto; } #nz-div-5 h3.tde span:before { content: ''; background: url(http://web.ncnncn.com/wp-content/uploads/2017/06/bgh1l.png); width: 80px; height: 70px; z-index: -1; } /* ======================================= */ .title-comm { color: #fff; font-size: 18px; position: relative; margin-top: 30px; margin-bottom: 30px; font-weight: 700; background-color: #fff; text-align: center; } h3.title-comm:before { content: ''; position: absolute; top: 50%; left: 0; right: 0; margin-top: 0; border-top: 2px solid #d0d2d3; z-index: 1; display: block; } .title-comm .title-holder { min-width: 350px; height: 45px; background-color: #56bbe7; height: auto; line-height: 45px; padding: 0px 20px; position: relative; z-index: 2; text-align: center; display: inline-block; min-width: 280px; } .title-holder:before { content: ""; position: absolute; right: -15px; border-width: 0px; bottom: 0px; border-style: solid; border-color: #5c9efe transparent; display: block; width: 0; height: 0; border-top: 23px solid transparent; border-bottom: 22px solid transparent; border-left: 15px solid #56bbe7; } .title-holder:after { content: ""; position: absolute; left: -15px; border-width: 0px; bottom: 0px; border-style: solid; border-color: #5c9efe transparent; display: block; width: 0; height: 0; border-top: 23px solid transparent; border-bottom: 22px solid transparent; border-right: 15px solid #56bbe7; }
Bài viết liên quan :
Năm 2018 nên kinh doanh gì đây độc đáo, 9 cách kinh doanh mới nhỏ
Dựng landing page bán hàng chuyên nghiệp giá rẻ
9 Theme WordPress tạo website rao vặt tốt nhất 2017
Chia sẻ Theme WordPress bản quyền SpaLab v2.7.2 – Theme wordpress cho các thẩm mỹ viện, salon tóc
Ri Everest v1.2.4 – Theme WordPress làm trang bán hàng chuyên nghiệp
Nhúng chat Facebook Messenger vào web