lovecoding
/
J250913


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>按钮样式a标签</title>
  <style>
    /* 重置a标签默认样式：去掉下划线、统一字体 */
    a {
      text-decoration: none; /* 去掉超链接默认下划线 */
      font-family: "Microsoft YaHei", sans-serif; /* 统一字体，更美观 */
      font-size: 14px; /* 按钮文字大小 */
    }

    /* 核心：a标签转按钮样式 */
    a {
      display: inline-block; /* 关键：让行内的a标签支持宽高、内边距、外边距 */
      padding: 8px 16px; /* 按钮内边距：上下8px 左右16px，控制按钮大小 */
      margin: 5px; /* 按钮之间的外边距，避免挤在一起 */
      background-color: #4299e1; /* 按钮默认背景色（清新蓝，可自行修改） */
      color: #ffffff; /* 按钮文字颜色（白色） */
      border: none; /* 去掉默认边框 */
      border-radius: 4px; /* 按钮圆角，让边角更柔和（值越大越圆） */
      cursor: pointer; /* 鼠标悬浮时显示手型，符合按钮的交互习惯 */
      transition: background-color 0.2s ease; /* 背景色过渡动画，hover时更丝滑 */
    }

    /* 鼠标悬浮在按钮上的样式（交互效果） */
    a:hover {
      background-color: #3182ce; /* 悬浮时背景色加深，有视觉反馈 */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微阴影，提升立体感 */
    }

    /* 可选：鼠标点击按钮时的按下效果 */
    a:active {
      background-color: #2b6cb0;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    #a1{
      width: 1000px;
      height: 800px;
      background-color: red;
    }
    #a2{
      width: 1000px;
      height: 800px;
      background-color: yellowgreen;
    }

  </style>
</head>
<body>
<!--<a href="_01_hello.html">百度</a>-->
<!--<a href="http://www.baidu.com">百度</a>-->
<!--&lt;!&ndash;访问一个图片他可以是网上的一个链接 也可以本地的图片&ndash;&gt;-->
<!--<a href="https://so1.360tres.com/t017d6555a87fb13623.jpg">周杰伦</a>-->
<!--<a href="img/1.png">图片</a>-->
<!--<a href="https://www.renwuji.com/wp-content/uploads/images/2022/12/16/6cf8e9d3ddaa42109abc41284e56adc0~noop_1jlttp0cn4y-480x320.jpg">美女</a>-->

<!--<a href="http://www.baidu.com" target="_blank">百度一下</a>-->
<a href="#n1">第一章</a> <br>
<a href="#n2">第二章</a> <br>
<a id="a1" name="n1" href="#">第一章节内容</a><br>
<a id="a2" name="n2" href="#">第二章节内容</a>
</body>
</html>