<style>
/*全局*/
* {
margin: 0;
padding: 0;
}
/*身体结构*/
body {
/*背景*/
background: #000;
/*文字居中*/
text-align: center;
/*内容颜色*/
color: #fff;
/*字体大小*/
font-size: 25px;
}
p .p {
/*下边框*/
border-bottom: 1px solid green;
/*左浮动*/
float: left;
/*宽*/
width: 150px;
}
p.p a {
/*显示为块级*/
display: block;
/*内边距*/
padding: 5px 5px 0.5em;
/*无文本修饰*/
text-decoration: none;
/*左边框*/
border-left: 12px solid #090900;
/*右边框*/
border-right: 1px#111111;
}
p .p a:link,
p .p a:visited {
/*背景颜色*/
background-color: aqua;
/*内容颜色*/
color: bisque;
}
p .p a:hover {
/*背景颜色*/
background-color: bisque;
/*内容颜色*/
color: blue;
}
.box {
/*上外边距*/
margin-top: 200px;
}
.box li {
/* 列表项标记的类型为空*/
list-style-type: none;
/*外边距*/
margin: 30px;
}
.box li a {
/*无文本修饰*/
text-decoration: none;
/*内容颜色*/
color: #fff;
/*动画时长*/
transition: 0.3;
}
.box li a:hover {
/*字体大小*/
font-size: 50px;
/*内容颜色*/
color: red;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="#">第一章</a></li>
<li><a href="#">第二章</a></li>
<li><a href="#">第三章</a></li>
<li><a href="#">第四章</a></li>
<li><a href="#">第五章</a></li>
<li><a href="#">第六章</a></li>
<li><a href="#">第七章</a></li>
<li><a href="#">第八章</a></li>
</ul>
1495
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
