3月31日 超级链接的使用
空链接
<a href="#">空链接</a>
左右：
<div style="display:flex;">< img src="图片1.jpg" style="width:200px;">< img src="图片2.jpg" style="width:200px;">
</div>
上下：
<div style="display: flex; flex-direction: column;">< img src="图片1.jpg" style="width:200px;">< img src="图片2.jpg" style="width:200px;">
</div>
2.设置不同样式的超链接
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/*超级链接的所有状态样式*/a{text-decoration: none;/*去掉下划线*/color: aquamarine;display: block;width:200px ;height:50px ;}/*超级链接鼠标经过时的样式*/a:hover{color: #FF0000;background-color: black;}</style></head><body><!--1.空链接--><a href=" ">空连接</a ></body>
</html>
3.行内代码块
块: display:block 行: display:inline 行内块:display:inline-block
1.空链接
<a href='#'>空链接</a>
空链接的作用：
占位
页面还没做好、链接地址没确定，先用空链接占位置，保证样式正常
触发交互（最常用）
点击不是跳转，而是：
- 弹出弹窗
- 展开 / 收起菜单
- 切换内容
- 执行 JS 动作
保留链接样式
让文字 / 按钮显示：手型光标、颜色、hover 效果。
临时返回顶部
#空链接点击时，页面会回到顶部。
2.网站同级内部跳转
<a href='xx.html'>同链接</a>
3.不同样式预览效果
方法一
<a href='#'class="n">点我下载</a>
<style>
.n{color:pink}
</style>
方法二
<h1 href='#'id='x'>外部链接</h1>
<style>h1#x{color:orange;background-color:aliceblue}
</style>
4.锚记
引入一个照片到img文件夹中
<a href='#top'>返回顶部<img src='img/top.png'></a>