Chia sẻ code tạo list bài viết - danh mục, liên kết

Code tạo list bài viết dạng boder cạnh nhiều màu :

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

Minh họa Code tạo list bài viết dạng boder cạnh nhiều màu :
Code tạo list bài viết dạng Ascii mũi tên màu xanh :

<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://3.bp.blogspot.com/-iqPqAkSBMh0/WXdSEyG6qqI/AAAAAAAAAGc/HNrklKvbVk4Gs9IBguzz5ZURJM_WPMxJACLcBGAs/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>

Minh họa list bài viết dạng Ascii mũi tên màu xanh :
Code tạo list bài viết dạng check màu xanh :

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

Minh họa list check màu xanh :
  • Link 1
  • Link 2
  • Link 3
Code tạo list bài viết dạng image mũi tên :

<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://1.bp.blogspot.com/-RK4NLjwUzSI/YA-S5okzc2I/AAAAAAAAChg/7nylc-_Ab10xsRUqek-gvOTlY9hofWp9ACLcBGAsYHQ/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>

Minh họa  code tạo list bài viết dạng image mũi tên :

〇○°.:1 ᖰᖺú♈ ᕍàﬡᖺ ᑕᖺᗢ ᖳᘮảﬡᘐ ᙅáᗢ:.°○〇

Code tạo list bài viết dạng số thứ tự :

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

Minh họa  Code tạo list bài viết dạng số thứ tự : 

〇○°.:1 ᖰᖺú♈ ᕍàﬡᖺ ᑕᖺᗢ ᖳᘮảﬡᘐ ᙅáᗢ:.°○〇

Tham khảo :
  • 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

✨ Bài viết được thực hiện bởi Blogger Gia Bảo, Freelancer Marketing Online, có nhiệm vụ kết nối khách cần mua với nhà phân phối, công ty sản xuất. BLOG GIA BẢO không phải đơn vị trực tiếp bán hàng trên website mà chỉ là nơi giúp bên mua gặp gỡ bên bán.

✨ Nổi bật : Mô hình Freelancer Marketing Online Cùng Nhà Phân Phối / Công Ty Sản Xuất Triển Khai Kênh Bán Hàng Trực Tuyến Thông Qua Việc Mở Gian Hàng TMĐT : Xem thêm,....

Kem chống nắng Biore UV Aqua Rich Watery Essence/Gel SPF 50+/ PA++++ 50ml/90ml

Xem Giá Bán
Xem thêm : Chăm Sóc Cơ Thể
Mua ngay

Bộ bàn ăn gỗ cao su gấp gọn

Xem Giá Bán
Tìm hiểu thêm về : Gỗ ghép
Đặt Mua ngay