Chia sẻ code tạo list bài viết - danh mục, liên kết
🔥 Hot Topics :
<style>
ul {
margin-bottom: 14px;
list-style: none;
}
li { width: 300px; height: 30px; margin: 0 0 7px 0; }
li a {
display: block;
width: 300px;
height: 30px;
margin: 0 0 7px 0;
background: #F7F5F2 url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAcCAYAAACQ0cTtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAcVJREFUSEvtVtFNxDAM7QiMwAiMwAiMwAhs4PZSic8bgRFuhI5wI3QERjjyYjuJrnaagoSExElRT4njZzvPLxmG/99vVIBofhrHcB6neYnjM46bfBfME4XnH8cBJwIA5zoAqKOaD+u3QSUTdjaGD6LTixU95rGeg4mZHsqybO6PNpV6ClcNrguQpjBylOFKRA9dm8QI9hVgO0OOjg/fA6LT/IqA8LXLWgCbZ6hkaBlVhFm8rIVYCNq2IXp/lKxcJ3DeAyZ2F/hDtTZB0TS/pUWnPLqhFyyxFP5iyTdgykBk2CKFBeadr1spdWIB1cy8B1MGOvtW89zaYKUVarCa6jYYK822jCxBN2eTyBKaVhqX7RMJGvugowYYC63JHpCm0sZaJ9N/i1ScdQrksmWjOAQrzWZ1AE22RQcaoOmvRBJWt1mzlMkNEAXYsy0C4bA709/JLjWrKnwDSHsMtm4bSXY41KiNRuer4DYaX/RVfLR7dshR7QDaIpyEPN3ke0qU99fs8whwDyZydwxInUiG8t4Iq/XWgLozSFzXq2lHW5tnKJepgOZ3yKbX+Omwc0Yt0a3XkKkAQzWSDKVLFPMHb/RezL9l9wWuQAy9JbrovAAAAABJRU5ErkJggg==) 97% center no-repeat;
font-size: 18px;
color: #333;
padding: 5px 0 0 20px;
text-decoration: none;
}
li a:hover { background-color: #EFEFEF; }
.orange { border-left: 5px solid #F5876E; }
.blue{ border-left: 5px solid #61A8DC; }
.green{ border-left: 5px solid #8EBD40; }
.purple { border-left: 5px solid #988CC3; }
.gold { border-left: 5px solid #D8C86E; }
</style>
<ul>
<li class="orange"><a href="#">Download</a></li>
<li class="blue"><a href="#">Download</a></li>
<li class="green"><a href="#">Download</a></li>
<li class="purple"><a href="#">Download</a></li>
<li class="gold"><a href="#">Download</a></li>
</ul>
<style>
#vietthuequangcao{float:left;margin-bottom:10px;margin-top:0px;}
#vietthuequangcao ul{margin:0px;float:left;margin-left:20px;padding:0px;}
#vietthuequangcao li{vertical-align:middle;list-style:disc outside url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMF031MoXMO8KSxHIM4T9XP5MO8HmNB-Id3KFgyQTc4TDPqzuxv1-sTReOffY_BbI_1Ix3IwTPTmYEz5cWFN78c0QOGwwWcqV0eONgdn9eQlG-VhxePErrZlC8wb3coxQxsUefoAsWG1bK/s1600/b1.png"); margin-bottom:0;width:auto;margin-top:0;padding:10px 0;}
#vietthuequangcao a{color:#333;text-decoration:none;font-size:14px}
#vietthuequangcao a:visited {text-decoration: none;color:#333;}
#vietthuequangcao a:hover{color:#f90}
</style>
<div id="vietthuequangcao">
<ul>
<li>
<a href="https://dumuckythuatso.blogspot.com/2021/01/gia-cong-go-oem-thot-go-khay-go-do-choi-thanh-rut-go-ban-ghe-cafe-ban-ghe-hoc-sinh-giuong-go-cau-thang-go-xu-huong-hop-tac-quoc-te-trong-thoi-dai-cong-nghiep-4.0-N5X2.html">
Gia công gỗ OEM ( thớt gỗ, khay gỗ, đồ chơi thanh rút gỗ, bàn ghế cafe, bàn ghế học sinh, giường gỗ, cầu thang gỗ,... ) Xu hướng hợp tác quốc tế trong thời đại công nghiệp 4.0 </a>
</li>
<li>
<a href="https://dumuckythuatso.blogspot.com/2021/01/bat-mi-bi-quyet-kiem-tien-online-giup-cac-soi-gia-du-muc-ky-thuat-so-thoa-man-dam-me-du-lich-trai-nghiem-kham-pha-the-gioiS8Z8.html">
Bật mí bí quyết kiếm tiền online giúp các sói già du mục kỹ thuật số thoả mãn đam mê du lịch, trải nghiệm & khám phá thế giới. </a>
</li>
<li><a href="https://dumuckythuatso.blogspot.com/2021/01/gia-cong-say-go-rong-cat-ghep-cha-nham-go-tu-nhien-go-cong-nghiep-O5Y8.html">
Gia công sấy gỗ, rong, cắt ghép, chà nhám gỗ tự nhiên, gỗ công nghiệp là gì ?
</a>
</li>
</ul>
</div>
- Gia công gỗ OEM ( thớt gỗ, khay gỗ, đồ chơi thanh rút gỗ, bàn ghế cafe, bàn ghế học sinh, giường gỗ, cầu thang gỗ,... ) Xu hướng hợp tác quốc tế trong thời đại công nghiệp 4.0
- Bật mí bí quyết kiếm tiền online giúp các sói già du mục kỹ thuật số thoả mãn đam mê du lịch, trải nghiệm & khám phá thế giới.
- Gia công sấy gỗ, rong, cắt ghép, chà nhám gỗ tự nhiên, gỗ công nghiệp là gì ?
<style>
#list-checkin-xanh{
border: 1px solid #aaa;
margin: -20px 0;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-moz-box-shadow: 0 5px 5px -5px #999;
-webkit-box-shadow: 0 5px 5px -5px #999;
box-shadow: 0 5px 5px -5px #999;
background: #f6f6f6;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));
}
#list-checkin-xanh li{
background: url(http://i.imgur.com/d2qDDPf.png) no-repeat 12px;
border-bottom: 1px solid #ccc;
font-family: cambria;
font-size: 12pt;
list-style-type:none;
margin:0;
padding:6px 10px 10px 3em !important;
height: 44px;overflow:hidden;
line-height: 1.5em;
}
</style>
<div id='list-checkin-xanh'>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
- Link 1
- Link 2
- Link 3
<style>
/* css list style with arrow images -------------- */
.imglist ul{
margin:0px;
}
.imglist li{
font-size:14px;
margin-left:25px;
padding:0px;
list-style:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji4VSfrR7e1XNT_PPasv8Txnweq6LQ-Ch4oHiYsyZG7ygk-HGZLZLbdE220J2v4TkABagIMlTgRvF9uV_323JWyVjyV4xE2qI4KBbKKmCJk1eCPUNUSQNMMMcAU5FcEGnQsk8HizG_-8c/s16000/arrow-N3x1.png");
line-height:30px;
}
.imglist li a:link, .imglist li a:visited{
color:#1e598e;
text-decoration:none;
}
.imglist li a:hover{
color:#0A7CAF;
padding:2px;
-moz-box-shadow: 0px 0px 12px #9e9ea3;
-webkit-box-shadow: 0px 0px 12px #9e9ea3;
box-shadow: 0px 0px 12px #9e9ea3;
border:none 0px #000000;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
/* End css list style with arrow images -------------- */
</style>
<!--CSS list style with arrow images -->
<p><strong> 〇○°.:1 ᖰᖺú♈ ᕍàﬡᖺ ᑕᖺᗢ ᖳᘮảﬡᘐ ᙅáᗢ:.°○〇</a></strong></p>
<div class="imglist">
<ul>
<li><a href="#">Link số 1</a></li>
<li><a href="#">Link số 2</a></li>
<li><a href="#">Link số 3</a></li>
</ul>
</div>
〇○°.:1 ᖰᖺú♈ ᕍàﬡᖺ ᑕᖺᗢ ᖳᘮảﬡᘐ ᙅáᗢ:.°○〇
<style>
/* css list with numeber circle background -------------- */
.numberlist{
width:450px;
}
.numberlist ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 15px 'trebuchet MS', 'lucida sans';
padding: 0;
margin-bottom: 4em;
}
.numberlist ol ol{
margin: 0 0 0 2em;
}
.numberlist a{
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
background: #FFF;
color: #444;
text-decoration: none;
-moz-border-radius: .3em;
-webkit-border-radius: .3em;
border-radius: .3em;
}
.numberlist a:hover{
background: #cbe7f8;
text-decoration:underline;
}
.numberlist a:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background: #87ceeb;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
border-radius: 2em;
color:#FFF;
}
/* End css list with numeber circle background -------------- */
</style>
<!--CSS list style with number cicles background -->
<p><strong> 〇○°.:1 ᖰᖺú♈ ᕍàﬡᖺ ᑕᖺᗢ ᖳᘮảﬡᘐ ᙅáᗢ:.°○〇</a></strong></p>
<div class="numberlist">
<ol>
<li><a href="#">Liên kết số 1</a></li>
<li><a href="#">Liên kết số 2</a></li>
<li><a href="#">Liên kết số 3</a></li>
</ol>
</div>
〇○°.:1 ᖰᖺú♈ ᕍàﬡᖺ ᑕᖺᗢ ᖳᘮảﬡᘐ ᙅáᗢ:.°○〇
- https://freshdesignweb.com/css-list-style-example
- http://www.jquery2dotnet.com/2013/02/windows-8-style-download-link-css.html
- https://www.artishock.net/coding/css-list-styling-using-ascii-special-characters
- https://www.geeksforgeeks.org/how-to-decorate-list-bullets-in-arrow-using-css
- https://web.dev/css-marker-pseudo-element/
Từ khóa tìm kiếm : list bullets in arrow using CSS | list bài viết - danh mục, liên kết