[已收纳]CSS之超链接

15195775117 · 发表于 2019-11-12 17:31:37

登录后查看更多精彩内容~

您需要登录才可以下载或查看，没有帐号？立即注册

x

本帖最后由 15195775117 于 2021-2-13 18:20 编辑

URL的组成：协议、主机IP（端口号）、资源在主机上的位置
协议的写法：http:// ftp:// mailto: file://
超链接的3类：内部链接、锚点链接、外部链接

对图片添加超链接，并在新标签打开：
<a href="https://www.baidu.com" target="_blank">
<img src="http://bbs.06climate.com/data/attachment/album/201911/06/103331k16e7q5x1f6ekhhq.jpg" />
</a>

15195775117 · 发表于 2019-11-13 09:42:13

本帖最后由 15195775117 于 2019-11-13 09:50 编辑

锚点链接

跳至网页上下任意位置，或其他网页任意位置的链接，例如常见的“回到顶部”，百度百科的目录，图片新闻的“下一页”
目标地址以id标记，链接以#使用之，如果是其他网页的，则使用“网页名.html#ID名”使用之

案例.html与烟云.html放在同一目录下

案例.html：

<!DOCTYPE html>
<html dir ="ltr" xml:lang="zh-CN">
<meta charset="UTF-8">
<style type="text/css">
p{font-size:2em;color:red}
</style>
<title>锚点链接</title>
<a href="#fig1">（1）透光高积云</a>
<a href="#fig2">（2）蔽光高积云</a>
<a href="#fig3">（3）妖云</a>
<a href="烟云.html#fig1" target="_blank">（4）烟云</a>

透光高积云：
<img src="http://bbs.06climate.com/data/attachment/album/201909/30/093243edc2kj377dksgnl1.jpg"
width=400px />
<img src="http://bbs.06climate.com/data/attachment/album/201909/30/093243edc2kj377dksgnl1.jpg"
width=400px />
<img src="http://bbs.06climate.com/data/attachment/album/201909/30/093243edc2kj377dksgnl1.jpg"
width=400px />
蔽光高积云：
<img src="http://bbs.06climate.com/data/attachment/album/201909/30/092953c88881g1cadgchag.jpg"
width=400px />
<img src="http://bbs.06climate.com/data/attachment/album/201909/30/092953c88881g1cadgchag.jpg"
width=400px />
<img src="http://bbs.06climate.com/data/attachment/album/201909/30/092953c88881g1cadgchag.jpg"
width=400px />
妖云：
<img src="http://bbs.06climate.com/data/attachment/album/201909/30/093317tkv2gv52kpee5fly.jpg"
width=400px />
<img src="http://bbs.06climate.com/data/attachment/album/201909/30/093317tkv2gv52kpee5fly.jpg"
width=400px />
<img src="http://bbs.06climate.com/data/attachment/album/201909/30/093317tkv2gv52kpee5fly.jpg"
width=400px />
</html>

烟云.html：

<!DOCTYPE html>
<html dir ="ltr" xml:lang="zh-CN">
<meta charset="UTF-8">
<title>烟云</title>
烟云：
<img src="http://bbs.06climate.com/data/attachment/album/201910/15/154647y3cjak4aaaa534nh.jpg"
width=400px />
</html>

15195775117 · 发表于 2019-11-13 10:39:11

本帖最后由 15195775117 于 2019-11-13 10:47 编辑

丰富的超链接类型

超链接如果是一个位置，就是锚点链接
超链接可以是个文件夹：
打开文件夹.jpg

可以是浏览器可以打开的视频、图片、pdf
打开视频.jpg

如果浏览器不能打开就会提示下载
不能打开exe

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