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

Digitalnomad.vn : Thiết Kế Web đa cấu trúc, trải nghiệm viết blog đa nội dung, Koc Content truyền thông cho chính mình, xây dựng hệ thống kiếm tiền tự động online, đa dạng nguồn tài chính từ việc kiến tạo các thu nhập thụ động trên internet. Gia Bảo, Blogger viết vì đam mê, chia sẻ kỹ thuật giúp bạn biến các thiết bị công nghệ kết nối internet, thành cỗ máy MMO khai thác mỏ vàng trực tuyến, các thức giúp chúng ta chạm tay vào 'tự do tài chính'.

Chủ Đề Nổi Bật :


Sponsor

1. thotgo.asia
2. goghepthanh.com
3. dichvuketoannasa.com
4. remcuakimanh.vn