我的磨文件列表设置样式 - 心录历程(心程网)

此代码仅供参考

代码说明

添加说明文字

CSS代码（样式一）

代码演示

CSS代码（样式二）

代码演示

CSS代码（样式三）

代码演示

CSS代码（样式四）

代码演示

CSS代码（样式五）

代码演示

CSS代码（样式六）

代码演示

CSS代码（样式七）

代码演示

CSS代码（样式八）

代码演示

CSS代码（样式九）

.file_list a{
display:block;padding:5px;margin:2px 1px;line-height:1.3em;height:2.6em;;border-radius:2px;word-wrap:break-word;word-break:break-all;border:1px solid grey;box-shadow:0px 1px 5px grey;overflow:hidden;
}

.file_list li{
margin:7px 0 0 0;padding:0px;
}

/*文件列表添加数字序号*/
.file_list{
text-align:left;
counter-reset:section;
margin:0;
padding:5px 0 5px 0;
}
.file_list li{
counter-increment:section;
}
.file_list li:before{
content:"" counter(section) ".";
background: grey;
color: yellow;
padding: 2px 4px;
font:1.1em bold italic;
border-radius:.8em;
} /*数字序号添加背景*/
.file_list li:nth-child(-1n+9):before{
content:"0" counter(section) ".";
}

/*文件列表实现隔行换色*/
.file_list>li:nth-of-type(odd) a{
background:#97CBFF;
} /*奇数行背景色*/
.file_list>li:nth-of-type(even) a{
background:#F0F0F0;
} /*偶数行背景色*/
.file_list>li>a:hover{
opacity:0.6;color:#000;
} /*鼠标悬浮在上的链接不透明度颜色*/

.file_list li span:before{content:".";color:black;} /*文件扩展名前缀*/

.file_list span{
color:black;
font-weight:bolder;font-size:100%;
float:right;
padding:0 5px;
position:relative;bottom:35px; /*文件扩展名下移*/
} /*文件扩展名*/

代码演示

CSS代码（样式十）

.file_list a{
display:block;padding:5px;margin:2px 1px;line-height:1.3em;height:2.6em;;border-radius:2px;word-wrap:break-word;word-break:break-all;border:1px solid grey;box-shadow:0px 1px 5px grey;overflow:hidden;
}

.file_list li{
margin:7px 0 0 0;padding:0px;
}

/*文件列表添加数字序号*/
.file_list{
text-align:left;
counter-reset:section;
margin:0;
padding:5px 0 5px 0;
}
.file_list li{
counter-increment:section;
}
.file_list li:before{
content:"" counter(section) ".";
background: grey;
color: yellow;
padding: 2px 4px;
font:1.1em bold italic;
border-radius:.8em;
} /*数字序号添加背景*/
.file_list li:nth-child(-1n+9):before{
content:"0" counter(section) ".";
}

/*文件列表实现隔行换色*/
.file_list>li:nth-of-type(odd) a{
background:#97CBFF;
} /*奇数行背景色*/
.file_list>li:nth-of-type(even) a{
background:#F0F0F0;
} /*偶数行背景色*/
.file_list>li>a:hover{
opacity:0.6;color:#000;
} /*鼠标悬浮在上的链接不透明度颜色*/

.file_list>li>a:hover{
-webkit-animation-name: fontbulger;
-webkit-animation-duration: 1s;/*表示动画持续的时间*/
-webkit-animation-iteration-count:3;/*表示动画要重复几次*/
-webkit-animation-direction: alternate;/*表示动画的方向*/
-webkit-animation-timing-function: ease-out;/*表示动画使用的时间曲线*/
-webkit-animation-delay: 5;/*表示开始动画之前的延时*/
}

@-webkit-keyframes fontbulger {
0% {
-webkit-transform: translate(-50px, 0px);
}/*動畫位移開始位置*/
100% {
-webkit-transform: translate(0px, 0px);
}/*動畫位移結束位置*/
}

.file_list li span:before{content:".";color:black;} /*文件扩展名前缀*/

.file_list span{
color:black;
font-weight:bolder;font-size:100%;
float:right;
padding:0 5px;
position:relative;bottom:35px; /*文件扩展名下移*/
} /*文件扩展名*/

代码演示

CSS代码（样式十一）

代码演示