219

Thanh tiêu đề là phần quan trọng của một website. Nếu muốn nổi bật thanh tiêu đề, hãy tham khảo code HTML, CSS dưới đây nhé.

Bộ giao diện gồm 6 styles. Dưới đây là toàn bộ code.

HTML

<div id='nz-div'>
  <h3 class="tde">			
                <span class="null">Em là con gà con, bò lon ton, bơi nhong nhong</span>	
  </h3>
  <div class="sub-cat">
    <span>Abc Defgh</span>
    <span>Abc Defgh</span>
    <span>Abc Defgh</span>
    <span>Abc Defgh</span>
  </div>
</div>

<div id='nz-div-2'>
  <h3 class="tde">			
                <span>Gâu gâu gâu</span>
  </h3>
  <hr>
</div>


<div id='nz-div-3'>
  <h3 class="tde">			
                <span>Tò tí te tò tò tò te</span>			
  </h3>
</div>


<div id='nz-div-4'>
  <h3 class="tde">			
                <span>Sau cơn mưa thì trời vẫn tối</span>			
  </h3>
</div>


<div id='nz-div-5'>
  <h3 class="tde">			
                <span>Sau cơn mưa thì trời vẫn tối</span>			
  </h3>
</div>


<h3 class="title-comm"><span class="title-holder">CẨM NANG NỘI TRỢ</span></h3>

CSS

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(https://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;
}