<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'msn_layer.jsp' starting page</title>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
h1, h2, h3, h4, h5, h6 {
font-size: 12px;
font-weight: normal;
margin: 0;
/*margin-bottom: -11;*/
}
.article-block {
width: 660px;
height: 900px;
border: 1px solid #DAE0E1;
margin-left: 10px;
padding: 18px 0;
}
.artile-navtitle {
background: none repeat scroll 0 0 #CCCCCC;
display: inline-block;
height: 22px;
line-height: 22px;
margin-top: 20px;
padding: 0 15px;
width: 50px;
}
.clearfix {
}
.clearfix:after { // 在元素之后添加内容,控制ul不能给自动控制高度
clear: both;
content: "";
display: block;
height: 0;
}
.artile-navlist {
border: 1px solid #CCCCCC;
padding: 20px 0 20px 20px;
}
.artile-navlist li {
background: #f5f5f5;
opcity: 0.5;
float: left;
height: 27px;
line-height: 25px;
margin-right: 18px;
margin-top: 2px;
width: 260px;
}
.artile-navlist li span {
background: none repeat scroll 0 0 #CCCCCC;
display: block;
float: left;
height: 27px;
line-height: 27px;
text-align: center;
width: 55px;
}
.artile-navlist li a {
display: block;
float: left;
height: 27px;
line-height: 27px;
margin-left: 5px;
overflow: hidden;
width: 200px;
}
a {
color: #333333;
text-decoration: none;
}
a:link {
color:blue;
}
a:visited {
color:olive;
}
a:hover {
text-decoration: underline;
}
a:active {
font-size: 14px;
}
ul, li, p {
list-style: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="article-block">
<h3 class="artile-navtitle">文章导航</h3>
<ul class="artile-navlist clearfix">
<li>
<span>第1页</span>
<a href="#">面朝前方</a>
</li>
<li>
<span>第2页</span>
<a href="#">打开胸廓</a>
</li>
<li>
<span>第3页</span>
<a href="#">面朝前方</a>
</li>
<li>
<span>第4页</span>
<a href="#">面朝前方</a>
</li>
<li>
<span>第5页</span>
<a href="#">面朝前方</a>
</li>
<li>
<span>第6页</span>
<a href="#">面朝前方</a>
</li>
<li>
<span>第7页</span>
<a href="#">面朝前方</a>
</li>
</ul>
</div>
</body>
</html>
属性 描述 CSS :first-letter 向文本的第一个字母添加特殊样式。 1 :first-line 向文本的首行添加特殊样式。 1 :before 在元素之前添加内容。 2 :after 在元素之后添加内容。 2