基于CSS定义HR水平线的几种样式_文本链接特效

IceTeacher · 发表于 2019-10-19 11:24:56

本人初试网页制作，逐渐积累了一些自己的技术经验，也制作出了不少看起来似乎有模有样的特效，在此分享一下。

初试开发，技术薄弱，还请大家见谅。

IceTeacher · 发表于 2019-10-19 11:26:11

CSS定义HR水平线的几种样式_文本链接特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

[size=1em]

[size=1em]

<head>

[size=1em]

<title>

[size=1em]CSS定义HR水平线

</title>

[size=1em]

</style>

[size=1em]

</head>

[size=1em]

<body>

[size=1em]

[size=1em]

[size=1em]

[size=1em]

[size=1em]

[size=1em]

</body>

IceTeacher · 发表于 2019-10-19 11:27:39

效果图

Pancel · 发表于 2019-12-26 23:02:30

复制

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

[size=1em]

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

[size=1em]

<head>

[size=1em]

<title>

[size=1em]CSS定义HR水平线

</title>

[size=1em]

<style type="text/css">

<!--

.hr0{ height:1px;border:none;border-top:1px dashed #0066CC;}

.hr1{ height:1px;border:none;border-top:1px solid #555555;}

.hr2{ height:3px;border:none;border-top:3px double red;}

.hr3{ height:5px;border:none;border-top:5px ridge green;}

.hr4{ height:10px;border:none;border-top:10px groove skyblue;} -->

</style>

[size=1em]

</head>

[size=1em]

<body>

[size=1em]

<hr class="hr0" />

[size=1em]

<hr class="hr1" />

[size=1em]

<hr class="hr2" />

[size=1em]

<hr class="hr3" />

[size=1em]

<hr class="hr4" />

[size=1em]

</body>

代码更新，你也要与时俱进才对。

IceTeacher · 发表于 2019-12-26 23:51:06

Pancel 发表于 2019-12-26 23:02
代码更新，你也要与时俱进才对。

对于这部分的CSS样式都已经很久没有研究了，最近新实现的效果也已经体现在了论坛里，总的来说还不错。

帐号		自动登录	找回密码
密码			立即注册