Các mẫu tiêu đề website đẹp mình sưu tầm và hệ thống lại để tiện tra cứu sử dụng khi cần
Code
|
1 2 3 4 5 6 |
<div class="cf-header"><i></i> <h3 class="cf-left-title pull-left">BÁCH HÓA ONLINE</h3> <div class="cf-right-link pull-right"> <a href="#">Chăm sóc cơ thể</a><a href="#">Thược phẩm khô</a><a href="#">Đồ uống</a><a class="cf-more" href="#">Xem thêm</a> </div> </div> |
Css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
/* codfe.com - code 1 */ .cf-header { border-top:solid 1px #0056a8; } .cf-left-title { width:auto; background:#0056a8; color:#fff; line-height:42px; font-size:18px; position:relative; margin:0; padding-left:50px; } .pull-left { float:left; } .pull-left { margin-left:0 !important; } .cf-left-title a { color:#fff; } .cf-left-title:after { border: 17px solid transparent;<br /> border-left-color: #0056a8;<br /> border-bottom-color: #0056a8;<br /> position: absolute;<br /> top: 0;<br /> left: 100%;<br /> content: ""; } .pull-right { float:right; margin-right:0 !important; } .cf-right-link a:first-child { margin-left:0; } .cf-right-link a { color:#555; font-size:14px; margin-left:15px; } .cf-right-link a.cf-more,.cf-right-link a:hover { color:#0056a8; } .cf-right-link a.cf-more:after { content:"f101"; font-family:FontAwesome; margin-left: 4px; } .cf-header i { background: #3e2520 url(https://duan.codfe.com/2022/testcode/wp-content/uploads/2022/04/codfe-logo.png) top 5px left 5px no-repeat; background-size: 32px 32px; } .cf-header i { position: absolute; top: 0; left: 0; width: 40px; height: 42px; color: #fff; text-align: center; line-height: 42px; background-color: #3e2520; z-index:1; } |
MS01: BÁCH HÓA ONLINE
Code
|
1 2 3 4 5 6 |
<div class="cf-header"><i></i> <h3 class="cf-left-title pull-left">BÁCH HÓA ONLINE</h3> <div class="cf-right-link pull-right"> <a href="#">Chăm sóc cơ thể</a><a href="#">Thược phẩm khô</a><a href="#">Đồ uống</a><a class="cf-more" href="#">Xem thêm</a> </div> </div> |
Css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
/* codfe.com - code 1 */ .cf-header { border-top:solid 1px #0056a8; } .cf-left-title { width:auto; background:#0056a8; color:#fff; line-height:42px; font-size:18px; position:relative; margin:0; padding-left:50px; } .pull-left { float:left; } .pull-left { margin-left:0 !important; } .cf-left-title a { color:#fff; } .cf-left-title:after { position:absolute; content:""; right: -42px; border: 21px solid transparent; border-top: 21px solid #0056a8; border-left: 21px solid #0056a8; } .pull-right { float:right; margin-right:0 !important; } .cf-right-link a:first-child { margin-left:0; } .cf-right-link a { color:#555; font-size:14px; margin-left:15px; } .cf-right-link a.cf-more,.cf-right-link a:hover { color:#0056a8; } .cf-right-link a.cf-more:after { content:"f101"; font-family:FontAwesome; margin-left: 4px; } .cf-header i { background: #3e2520 url(https://duan.codfe.com/2022/testcode/wp-content/uploads/2022/04/codfe-logo.png) top 5px left 5px no-repeat; background-size: 32px 32px; } .cf-header i { position: absolute; top: 0; left: 0; width: 40px; height: 42px; color: #fff; text-align: center; line-height: 42px; background-color: #3e2520; z-index:1; } |
Code
|
1 2 3 4 5 6 |
<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> MS02: ĐỒ 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> |
Css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
/* codfe.com.com – code 2 */ .vi-header { border-bottom:solid 1px #0056a8; } .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; } .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; } |
MS03: SÁCH CÁC LOẠI
Code
|
1 2 3 4 5 6 |
<div class="clearfix vi-header"> <h3 class="vi-left-title-2 pull-left">SÁCH CÁC LOẠI</h3> <div class="vi-right-link pull-right"> <a href="#">Sách thiếu nhi</a><a href="#">Sách văn học</a><a href="#">Sách kinh tế</a><a href="#">Sách giáo khoa</a><a href="#">Sách tham khảo</a><a class="vi-more" href="#">Xem tất cả »</a> </div> </div> |
Css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
/* codfe.com - code 3 */ .vi-header { border-bottom:solid 1px #0056a8; } .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; } .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; } |
MS 04 Sáng Tạo Sắc Việt
Code
|
1 2 3 |
<div id='stsv-02'> <h3 class="tde"><span>Sáng Tạo Sắc Việt</span></h3> </div> |
Css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
#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(http://codfe.com/wp-content/uploads/2020/04/tp-background-300x68.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; } |
MS 05 – Sáng Tạo Sắc Việt 2017
Code
|
1 2 3 4 5 |
<div class="box-title-new"> <div class="box-title-name-new"> <span class="null">Sáng Tạo Sắc Việt 2017 </div> </div> |
Css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
.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; } |
THIẾT BỊ SỐ PHỤ KIỆN
THIẾT BỊ SỐ PHỤ KIỆN
THIẾT BỊ SỐ PHỤ KIỆN
THIẾT BỊ SỐ PHỤ KIỆN
THIẾT BỊ SỐ PHỤ KIỆN
THIẾT BỊ SỐ PHỤ KIỆN
Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div id='nz-div'> <h3 class="tde"><span class="null">THIẾT BỊ SỐ PHỤ KIỆN</span></h3> </div> <div id='nz-div-2'> <h3 class="tde"><span>THIẾT BỊ SỐ PHỤ KIỆN</span></h3> <hr> </div> <div id='nz-div-3'> <h3 class="tde"><span>THIẾT BỊ SỐ PHỤ KIỆN</span></h3> </div> <div id='nz-div-4'> <h3 class="tde"><span>THIẾT BỊ SỐ PHỤ KIỆN</span></h3> </div> <div id='nz-div-5'> <h3 class="tde"><span>THIẾT BỊ SỐ PHỤ KIỆN</span></h3> </div> <h3 class="title-comm"><span class="title-holder">THIẾT BỊ SỐ PHỤ KIỆN</span></h3> |
Css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 |
/* codfe.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(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; } |
