facebook-icon
Chia sẻ, Tin Tức

Tạo tiêu đề đẹp cho wordpress , blog với html và css – menu danh mục đẹp

Đã đăng trên bởi admin

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é :

erererereree

 

luu ban nhap tu dong 7568

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;
}

 

5/5 - (100 bình chọn)

Bài viết liên quan :

Dịch vụ in túi giấy Hà Nội giá rẻ thiết kế túi giấy theo yêu cầu
Adventure Us v1.0.0 – Theme WordPress chủ đề về Blog du lịch tốt nhất
5 ý tưởng khởi nghiệp kinh doanh với 50 triệu đồng
55+ Cách trang trí tiệm nails thu hút khách hàng nhất hiện nay
Chia sẻ 17 theme WordPress làm Blog tin tức tuyệt vời đây...
Code nút like, chia sẻ bài viết facebook cho website
admin

CÔNG TY TNHH CÔNG NGHỆ SỐ THÁI BÌNH Công Ty TNHH Công Nghệ Số Thái Bình - đội ngũ chuyên nghiệp, sáng tạo nội dung, quản trị nội dung, tạo nên giá trị tốt nhất cho khách hàng.