web随笔04

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>
空链接的作用：

  1. 占位

    页面还没做好、链接地址没确定，先用空链接占位置，保证样式正常

  2. 触发交互（最常用）

    点击不是跳转，而是：

    • 弹出弹窗
    • 展开 / 收起菜单
    • 切换内容
    • 执行 JS 动作

  3. 保留链接样式

    让文字 / 按钮显示：手型光标、颜色、hover 效果。

  4. 临时返回顶部

    # 空链接点击时，页面会回到顶部。

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>
posted @ 2026-04-06 21:06  今今日晴  阅读(7)  评论(0)    收藏  举报