Chia sẻ, Tin Tức

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

Posted on by 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é :

 

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 :

Chia sẻ Theme WordPress miễn phí chuẩn SEO làm trang du lịch
Hướng dẫn đếm và hiển thị số lượt xem của sản phẩm trong theme Flatsome không dùng plugin
Tiêu chuẩn E-A-T và 19 cách áp dụng thực tiễn trong SEO
Shandora Theme WordPress Web Nhà Đất Đẹp
AffMag – Theme WordPress làm trang tin tức chuẩn SEO
Chia sẻ theme wordpress bán hàng cực đẹp, cực chuyên nghiệp
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.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *