<%@ 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样式...
综上所述，CSS伪元素`:after`和`:before`是强大的工具，能够帮助开发者在不破坏HTML结构的前提下，实现各种创意和功能。通过熟练掌握和灵活运用这些伪元素，我们可以创建出更加丰富、互动性和用户体验良好的网页。在...
`:after`是CSS中的一个伪元素选择器，用于在元素内容之后插入内容。本话题将深入探讨如何利用`:after`伪元素来实现分割线和气泡效果。 首先，让我们理解`:after`的基本语法。`:after`伪元素紧跟在选择器后面，然后...
【CSS伪类`:after`详解】 CSS中的`:after`伪类是一种非常实用的特性，它允许我们在元素内容之后插入额外的非元素内容。这在处理布局、清除浮动、添加装饰性内容等方面尤其有用。本文将深入探讨`:after`伪类的工作...
并且没有使用任何图片之类的东东，主要依靠CSS3代码中的::before ::after两个伪类 以前我还是比较忽视这两个家伙的，今天第一次见到原来伪类的好处这么多，以后会多多推荐CSS3伪类实现的效果 使用方法： 1...
CSS伪类是CSS（层叠样式表）中一种强大的工具，用于向特定状态或条件下的元素添加样式。这些伪类不需要额外的HTML标记，而是基于元素的状态或它们在文档中的位置来选择元素。在给定的文件中，我们讨论了几个关键的...
纯CSS3伪类实现icon标签效果.zip这个压缩包文件包含了一种使用纯CSS3来创建图标标签的方法。这种方法的优点在于，无需依赖JavaScript或者外部图像文件，仅通过CSS就能实现图标展示，从而提高网页加载速度并简化代码...
在本项目“穿搭速递-列表超链接CSS伪类”中，我们将深入探讨如何使用CSS（层叠样式表）来美化和控制HTML列表中的超链接元素。CSS伪类是实现这一目标的关键工具，它们允许我们根据元素的不同状态来应用特定的样式。...
前言 前两天看文档看到选择器那块儿的时候，前面4个基本都能理解：.class，#id，element，element, element，但后面两个::after和::before（文档中说，分别表示在view 组件的后面和...单冒号是CSS2的内容，双冒号是CSS3
特别地，CSS伪类中的`:before`和`:after`是生成内容的伪元素，它们能够在元素内容的前面或后面动态地添加额外的元素，让网页表现更加丰富和灵活。 ### CSS伪类:before和:after的基本概念 `:before`和`:after`被...
`:after`伪类通常与`content`属性一起使用，以在元素的常规内容后面插入文本、图像或其他类型的内容。 `:after`伪类的基本语法如下： ```css selector:after { content: "string or url or attr(attribute)"; /*...
在CSS中，`div`元素是最常用的块级元素之一，常用于布局和内容容器。`border`属性是CSS中用于定义元素边框样式的属性，包括`...需要注意的是，伪元素和伪类的使用应该遵循语义化原则，以确保代码的可读性和维护性。
CSS伪元素：before和after伪元素的使用和应用 CSS中的伪元素（Pseudo Element）是一种特殊的HTML元素，用于在文档树中添加虚拟元素，以便实现特定的样式或布局效果。在CSS中，有两种常用的伪元素：:before和:after...
在本文中，我们将深入探讨如何使用CSS3的`::before`和`::after`伪元素，结合`@keyframes`动画来实现一个鼠标悬停时的动态效果。这两个伪元素在网页设计中扮演着重要的角色，可以让我们在不增加额外HTML标记的情况下...
【CSS伪元素::before和::after的应用】 在CSS中，伪元素和伪类是两种不同的概念，它们在页面样式设计中扮演着重要角色。伪类是用于定义元素在特定状态下的样式，比如`:hover`表示鼠标悬停时的状态，`:focus`表示...
1. **伪类选择器**：CSS3提供了更多的伪类选择器，如`:before`和`:after`，它们可以用来添加内容到元素前后。在时间轴中，我们可以利用这些伪类来创建时间点的标记或者连接线。 2. **定位（Positioning）**：通过...
下面我们将详细探讨如何利用CSS伪元素实现3D按钮。 首先，让我们了解CSS伪元素。伪元素是CSS中的一种特殊选择器，用于在元素内部添加额外的内容或样式，而无需在HTML中实际编写这些内容。主要有两种伪元素：`:...
在网页设计中，CSS伪元素before和after非常强大且实用，它们允许我们在选定元素的内容之前或之后插入内容。这使得我们可以通过CSS来创建一些额外的视觉效果，而无需使用额外的HTML标记或图片。通过这种方式，设计师...
在使用CSS3创建圆形按钮时，我们可以通过使用CSS伪类选择器:before和:after来实现。这两个伪类选择器允许我们在元素内容之前和之后添加内容，通过这种方式，我们可以无需在HTML结构中直接添加额外内容来实现复杂的...