<%@ 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
分享到：
相关推荐
关键在于CSS的伪类after中的content，它可以直接指定当前样式标签里的内容 废话不多说，仔细看代码你就懂啦(什么？你一点CSS基础都没有，额，抱歉，这个我也难办了) 使用方法： 1、将head中的.tooltip样式...
用伪元素:after实现分割线和气泡
伪元素实现tooltip，nav导航栏的炫酷效果以及计数器
而且CSS里不光有伪类，还有伪元素，比如：:first-letter，:first-line，:before和:after。 本文中其它伪元素暂且不表，单说:after伪元素。 after顾名思义是在元素后面的意思，实质是在元素之后添加内容。 这个伪元素...
并且没有使用任何图片之类的东东，主要依靠CSS3代码中的::before ::after两个伪类 以前我还是比较忽视这两个家伙的，今天第一次见到原来伪类的好处这么多，以后会多多推荐CSS3伪类实现的效果 使用方法： 1...
主要介绍了CSS中的伪类after,是CSS入门学习中的基础知识,需要的朋友可以参考下
两个伪类对象只有在清楚浮动clearfix的时候会用到哈，最近在研究css3的时候觉得它两个的搭配不仅能够减少代码量并且能整出很巴适的效果
本教程简单的介绍一下关于CSS伪类:before, :after详解:before 伪元素在元素之前添加内容;after 伪元素在元素之后添加内容;有需要了解的朋友可以参考一下
纯css3before和after伪元素结合animation鼠标悬停动画效果
TailwindCSS插件，添加伪元素的变体（ ::before ， ::after ， ::first-letter等）。 用法 安装 NPM npm install tailwindcss-pseudo-elements --save-dev 纱 yarn add tailwindcss-pseudo-elements -D 配置 const...
利用CSS伪元素 ：before 和 ：after 可以在文档前后插入内容而不改变文档原有结构，再配合 box-shadow 可以实现很炫的效果, 下面就展示三个例子： 1、利用 :before 和 :after 添加背景，比如给一段文字前后打引号...
本篇重点介绍CSS中的:befor、:after创建的伪元素几种使用场景，如填充文本、作为iconfont、进度线、时间线以及几何图形。 1. 介绍 1.1 说明 CSS中的:befor、:after都会创建一个伪元素，其中:befor创建的伪元素是所选...
最近遇到一个需要改变:before,:after 伪类的样式，发现css中并不能直接选择某一个元素的:before和:after伪类元素，所以特总结了使用javascript和jQuery改变元素的:before和:after伪类样式的方法。 类如如下的html及...
国外这两个伪类应用相当的普及以及兴盛，不过貌似我们这边前端er们普遍缺乏使用这两个伪类的意识，要使用顶多也就是跟风的“清除浮动”应用。 1.基本用法 :before和:after的作用就是在指定的元素内容（而不是元素...
before 伪元素在元素之前添加内容
主要介绍了使用before和:after伪类制作css3圆形按钮,需要的朋友可以参考下