<html> <head> <style> body{ margin: 40px auto; /* 500px;*/ } .blog-alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } .blog-alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; } /* -------------------------------------- */ ol{ counter-reset: li; list-style: none; *list-style: decimal; font: 15px 'trebuchet MS', 'lucida sans'; padding: 0; margin-bottom: 4em; text-shadow: 0 1px 0 rgba(255,255,255,.5); width: 550px; } ol ol{ margin: 0 0 0 2em; } /* -------------------------------------- */ /* 第一个ol的标题样式 */ .rounded-list > li a{ color: #60497c; font-size: 18px; text-shadow: 0 -1px 5px rgba(0,0,0,0.4); } /* 第二个ol的标题样式 */ .rounded-list > li ol li a{ font-size: 16px; color: #415459; text-shadow: 0 -1px 5px rgba(0,0,0,0.4); font-weight: bold; line-height: 1.5; margin: 10px 0; } .rounded-list a{ position: relative; display: block; padding: .4em .4em .4em 2em; *padding: .4em; margin: .5em 0; background: #ddd; color: #444; text-decoration: none; -moz-border-radius: .3em; -webkit-border-radius: .3em; border-radius: .3em; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .rounded-list a:hover{ background: #eee; } .rounded-list a:hover:before{ -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } .rounded-list a:before{ content: counter(li); counter-increment: li; position: absolute; left: -2.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; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } </style> <style id="tsbrowser_video_independent_player_style" type="text/css"> [tsbrowser_force_max_size] { width: 100% !important; height: 100% !important; left: 0px !important; top: 0px !important; margin: 0px !important; padding: 0px !important; transform: none !important; } [tsbrowser_force_fixed] { position: fixed !important; z-index: 9999 !important; background: black !important; } [tsbrowser_force_hidden] { opacity: 0 !important; z-index: 0 !important; } [tsbrowser_hide_scrollbar] { overflow: hidden !important; } [tsbrowser_display_none] { display: none !important; visibility: hidden !important; opacity: 0 !important; } [tsbrowser_force_show] { display: black !important; visibility: visible !important; opacity: 0; }</style></head> <body> <div class="blog-alert blog-alert-success" role="alert"> MQ: 异步处理、应用解耦、流量削峰、日志处理、消息通讯 </div> <ol class="rounded-list"> <li><a href="javascript:void(0);">Kafka</a> <ol> <li><a href="#" target="_blank">List sub item</a></li> <li><a href="#" target="_blank">List sub item</a></li> <li><a href="#" target="_blank">List sub item</a></li> </ol> </li> <li><a href="javascript:void(0);">RocketMQ</a> <ol> <li><a href="#" target="_blank">List sub item</a></li> <li><a href="#" target="_blank">List sub item</a></li> <li><a href="#" target="_blank">List sub item</a></li> </ol> </li> <li><a href="javascript:void(0);">ZeroMQ</a> <ol> <li><a href="#" target="_blank">List sub item</a></li> <li><a href="#" target="_blank">List sub item</a></li> <li><a href="#" target="_blank">List sub item</a></li> </ol> </li> </ol> </body> </html>