者：悦然网络工作室（悦然企业网站建设）

网页有静态有动态两种，目前公认的是静态网页更有利于网站SEO优化，同时对提升用户体验也有一定的好处。

?

动态页面与静态页面的区别

1. 动态页面一般由asp、php、jsp等结尾，而且中间还有大量的字符串，很长，让人一看就头大，而且会变动，虽然搜索引擎可以抓取，但用户可能会觉得这种链接是不是有问题。
2. 静态页面是由英文字母或数据结尾，链接是固定的，而且比较短，比较易容记忆，用户体验比较好。

为什么要设置伪静态

因为现在大多数网站程序都是动态的，如果不经处理，网站的页面就是动态页面。所以我们需要从技术上对原始的动态链接进行处理，让它以静态的方式显示，这就是伪静态。

如何设置伪静态

不同的网站程序和空间服务器，网站链接伪静态的设置方法都会有所不同，我们只能具体情况具体设置，下面悦然网络工作室以阿里云服务器+宝塔+wordpress制作的网站为例，教大家设置伪静态。

一、登陆网站后台。依次打开“设置”-“固定链接”，然后在右侧的窗口中选择链接结构，这里我们选“自定义结构”，可以根据自己的需要进行设置，这里提供两个参考设置：

/%category%/%post_id%.html。这种是目录加数字，以html文件结尾。

/%post_id%.html。这里是不显示目录，纯数字显示，以html文件结尾。

二、登陆宝塔后台，打开“网站”选项，然后在右边的网站列表中点“设置”。

三、在弹出的窗口中，选“伪静态”，然后再选“wordpress”，然后再点保存即可。此时你的网站链接就会经固定链接，静态的方式来显示，比如这个链接：www.zsxxfx.com/448.html

如果你的网站是使用saas类的H5模板建站系统来制作的，那一般是不用单独设置伪静态的，因为系统默认就是伪静态的，如上图所示。你也可以对伪静态链接进行单独设置。当然不同的系统可能会有不同，但只要不是太落后的一般都支持静态或伪静态。

总结

网站链接伪静态设置虽然只是网站SEO优化中的一个很小的细节，但它的作用却不容忽视，设置好伪静态还可以让你的网站链接看起来更漂亮，给用户更好的体验。如果你是使用的虚拟主机，那么伪静态设置又会有点不同，这个我们之后再介绍。

SS 伪元素用于向某些选择器设置特殊效果。

语法：

selector:pseudo-element {property:value;}

(1):first-line 伪元素

"first-line" 伪元素用于向文本的首行设置特殊样式。

在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化:

p:first-line

{

color:#ff0000;

font-variant:small-caps;

}

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，去年我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

(2):first-letter 伪元素

"first-letter" 伪元素用于向文本的首字母设置特殊样式：

p:first-letter

{

color:#ff0000;

font-size:xx-large;

}

(3)CSS2 - :before 伪元素

":before" 伪元素可以在元素的内容前面插入新内容。

下面的例子在每个 <h1> 元素前面插入一幅图片：

h1:before

{

content:url(images/logo.gif);

}

(4)CSS2 - :after 伪元素

":after" 伪元素可以在元素的内容之后插入新内容。

下面的例子在每个 <h1> 元素后面插入一幅图片：

h1:after

{

content:url(images/logo.gif);

}

————————————————

原文链接：https://blog.csdn.net/webxuexi168/article/details/104349252