【分享】26个字母分类列表样式
26个字母分类列表样式
HTML+CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HEAD><TITLE>Example</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body {
background-color: #000000;
}
UL {
BORDER: 0px;
PADDING: 0px;
FONT-STYLE: inherit;
OUTLINE-STYLE: none;
OUTLINE-COLOR: invert;
OUTLINE-WIDTH: 0px;
FONT-FAMILY: inherit;
FONT-SIZE: 100%;
VERTICAL-ALIGN: baseline;
FONT-WEIGHT: inherit;
LIST-STYLE-TYPE: none;
LIST-STYLE-IMAGE: none
}
.alphabet_list {
MARGIN: 20px 0px 0px 20px;
WIDTH: 936px;
BACKGROUND: #292929;
FLOAT: left;
-pie-background: linear-gradient(#292929, #1a1a1a);
-webkit-box-shadow: #111 0px 2px 3px;
-moz-box-shadow: #111 0px 2px 3px;
box-shadow: #111 0px 2px 3px
}
.alphabet_list LI {
FLOAT: left;
HEIGHT: 32px;
OVERFLOW: hidden;
BORDER-RIGHT: #111 1px solid;
}
.alphabet_list LI A {
POSITION: relative;
TEXT-ALIGN: center;
PADDING-BOTTOM: 0px;
TEXT-TRANSFORM: uppercase;
PADDING-LEFT: 0px;
WIDTH: 35px;
PADDING-RIGHT: 0px;
DISPLAY: block;
FLOAT: left;
HEIGHT: 28px;
COLOR: #737373;
TEXT-DECORATION: none;
PADDING-TOP: 4px;
font-size: 17px;
}
.alphabet_list LI A SPAN {
POSITION: absolute;
TEXT-ALIGN: center;
PADDING-BOTTOM: 0px;
PADDING-LEFT: 0px;
WIDTH: 100%;
PADDING-RIGHT: 0px;
DISPLAY: block;
FONT: 10px Tahoma, Geneva, sans-serif;
HEIGHT: 22px;
COLOR: #fff;
TOP: -9000px;
PADDING-TOP: 10px;
LEFT: -9000px;
-pie-background: linear-gradient(#00a7ff, #006bff);
-webkit-box-shadow: inset #1d1d1d 0px 1px 2px;
-moz-box-shadow: inset #1d1d1d 0px 1px 2px;
box-shadow: inset #1d1d1d 0px 1px 2px;
background-color: #00a7ff;
}
.alphabet_list LI A:hover {
COLOR: #fff;
background-color: #000;
}
.alphabet_list LI A:hover SPAN {
TOP: 0px;
LEFT: 0px
}
.alphabet_list LI.active A {
COLOR: #fff;
-pie-background: linear-gradient(#eb008c, #ae066a);
background-color: #eb008c;
}
-->
</style>
</HEAD>
<BODY>
<DIV>
<UL class="alphabet_list">
<LI><A href="#">A<SPAN>A</SPAN></A></LI>
<LI class="active"><A href="#">B<SPAN>B</SPAN></A></LI>
<LI><A href="#">C<SPAN>C</SPAN></A></LI>
<LI><A href="#">D<SPAN>D</SPAN></A></LI>
<LI><A href="#">E<SPAN>E</SPAN></A></LI>
<LI><A href="#">F<SPAN>F</SPAN></A></LI>
<LI><A href="#">G<SPAN>G</SPAN></A></LI>
<LI><A href="#">H<SPAN>H</SPAN></A></LI>
<LI><A href="#">I<SPAN>I</SPAN></A></LI>
<LI><A href="#">J<SPAN>J</SPAN></A></LI>
<LI><A href="#">K<SPAN>K</SPAN></A></LI>
<LI><A href="#">L<SPAN>L</SPAN></A></LI>
<LI><A href="#">M<SPAN>M</SPAN></A></LI>
<LI><A href="#">N<SPAN>N</SPAN></A></LI>
<LI><A href="#">O<SPAN>O</SPAN></A></LI>
<LI><A href="#">P<SPAN>P</SPAN></A></LI>
<LI><A href="#">Q<SPAN>Q</SPAN></A></LI>
<LI><A href="#">R<SPAN>R</SPAN></A></LI>
<LI><A href="#">S<SPAN>S</SPAN></A></LI>
<LI><A href="#">T<SPAN>T</SPAN></A></LI>
<LI><A href="#">U<SPAN>U</SPAN></A></LI>
<LI><A href="#">V<SPAN>V</SPAN></A></LI>
<LI><A href="#">W<SPAN>W</SPAN></A></LI>
<LI><A href="#">X<SPAN>X</SPAN></A></LI>
<LI><A href="#">Y<SPAN>Y</SPAN></A></LI>
<LI><A href="#">Z<SPAN>Z</SPAN></A></LI>
</UL>
<DIV class="clear"></DIV>
</DIV>
</BODY></HTML>
