css伪类after使用

impress 2013-12-25 

<%@ 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
impress

impress

相关推荐

MVVM WPF 简化 类的开发

{. private string name;public string Name. {. get { return name; }. set { this.SetProperty(ref name, value); }. }

88473166 / 0评论 2020-05-14

MongoDB操作类封装

最近接到一个需求，要做MongoDB打点数据的统计，在学习过MongoDB的操作之后，封装了一个MongoDB的操作类，分为两部分，基本思想是参照了自己写过的mysql的操作类。一个是基本的操作类，包括所有基本操作的静态方法，还有一个是mongoobjec

moguibeijing / 0评论 2019-11-04

String类 (二) ~正则表达式

正则表达式本质就是一个 字符串，用于进行数据格式的验证。通常情况下，正则表达式使用 ^ 开头，使用$ 结尾。可以省略，但是推荐写上。[a-zA-Z] -表示可以出现a到z 和 A到Z之间的任意字符。X+ -表示X可以出现一次或多次，相当于 1-n次；X{

qidu / 0评论 2019-10-27

java 序列化 serialVersionUID

序列化到硬盘后，又为该类新加了一个String类型的成员变量，这时在反序列化时就可能会抛出Exception，但如果引入了。serialVersionUID，eclipse检查出已经序列化的对象中的serialVersionUID和当前类的serialVe

shebaopen / 0评论 2011-12-01

最常用的hibernate的接口和实现类

import java.util.List;public E get(String id);public E load(String id);public E loadBy(String name, Object value);public E loadB

longxx / 0评论 2010-11-08

jQuery datatables使用 ( 封装类实现前台分页 二 续...)

*数组的数组，表格中的实际数据.

愚盦 / 0评论 2011-10-12

Android入门：封装一个HTTP请求的辅助类

经过自己的研究，封装了一个HTTP的get和post的辅助类，能够更好的使用；模拟文件上传请求；发送GET请求public static URLConnection sendGetRequest. headers：需要设置的HTTP请求头；发送XML数据p

88263417 / 0评论 2012-07-08

连接Oracle数据库帮助类

连接Oracle数据库帮助类，就是把连接Oracle数据库的方法封装起来，只需要在其它页面调用就可，不需要重复写。

idiot00 / 0评论 2015-05-15

python实现的用于搜索文件并进行内容替换的类实例

本文实例讲述了python实现的用于搜索文件并进行内容替换的类。分享给大家供大家参考。具体实现方法如下：。- search_string can be a re.compile() object -> use re.sub for replacing

Haopython / 0评论 2015-06-28

DataFrame:通过SparkSql将scala类转为DataFrame的方法

//***重点***：将临时表中的suuid和自定函数中Json数据，放入UserTag中。sqlContext.sql(" select distinct(suuid) AS suuid,taginfo(suuid) from suuidTab

woxiaozhi / 0评论 2019-01-29

.net连接Mysql封装类代码 可直接调用

微软的visual studio没有自带连接Mysql的驱动，要去网上下载一个mysql-connector-net-6.4.3驱动，然后安装就可以使用。下面是我封装好的连接数据库的类，直接调用即可。string connectionString = &q

风之羽翼 / 0评论 2013-07-26

Asp.net XMLHTTP封装类(GET,Post发送和接收数据)

* XMLHTTP.ST_Param st = new XMLHTTP.ST_Param(); //创建参数数组

homehttp / 0评论 2008-11-10

ASP.NET 数据访问类

usingSystem; usingSystem.Data; usingSystem.Data.SqlClient; namespaceSysClassLibrary { ///<summary> ///DataAccess的摘要说明。 ///

道行尚浅老道 / 0评论 2006-08-23

019.2 map集合类

Map<k，v>Map：双列集合，一次存一对，键值对，类似于python的字典。共性功能：1、添加 v put //返回key的旧值 putAll;2、删除 void clear(); v remove; //删除该键并返回值3、判断 bool

你好C / 0评论 2018-04-08

C#通用邮件发送类分享

此类的功能包括发送邮件，邮箱格式是否正确，和在不发送邮件的情况下判断邮箱用户名和密码是否正确，鉴于POP检查邮箱用户名和密码出现错误情况返回结果的延迟，用异步线程解决此问题，见代码：

微软信仰中心 / 0评论 2017-12-07

C#中string与byte[]的转换帮助类-.NET教程,C#语言

代码中出现的sidle是我的网名。///hexbin:二进制数据用ascii字符表示例字符1的hex是0x31表示为hexbin是31

软件设计 / 0评论 2017-06-01

JavaScript学习-js中的数组/Boolean类/字符串String类

元素的顺序称为下标，通过下标查找对象元素。① 字面量声明：var arr1 = [];b.数组的length：声明一个指定长度的数组，但是数组的长度随时可变可追加；最大长度为0~；② 增删：delete arr[n]；删除数组的第N+1个值，但数组长度不变

软件设计 / 0评论 2017-04-22

Java初始化方法：类、容器

put是PrefixTrie的方法：public void put ;private static final Set<String> myset = new HashSet<String>();第一层括弧实际是定义了一个内部匿名类

软件设计 / 0评论 2017-03-26

ASP.NET 数据访问类

///<description>数据处理基类,调用方式：DataAccess.DataSet;或者DataAccess.DataSet;</description>

ASP编程 / 0评论 2016-10-11

[javaSE] 反射-获取类的成员属性和构造方法

; ; ; ;public ;static ;void ;main ;{. ; ; ; ; ; ; ; ;printClassFields;; ; ; ; ; ; ; ;System.out.println;; ; ; ; ; ; ; ; ; ; ; ;C

编程爱好者联盟 / 0评论 2018-12-15