zoukankan      html  css  js  c++  java
  • html 超链接标签 锚点 a标签伪类

    一个简易的连接

    <a href="01.html">01</a>

    <body>
    		<a href="01.html" target="_blank">01</a>
    		<a href="https://www.bilibili.com/?spm_id_from=666.7.primary_menu.1">
    		B站</a>
    		<a href="01.html" title="鼠标放上来">01</a>
    	</body>

    target="_blank" 可以另开一个网页

    title在光标放上时,会显示一个title

    <body>
    		<a name="p1"></a>
    		<p>p1</p>
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<a name="p2"></a>
    		<p>p2</p>
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<p>p3</p>
    	</body>
    

     在<p>中定义一个名字

    在<a>标签中 < a name="p">, 可以达到直接跳转地点的目的

    </head>
    	<body>
    		<a href="02.html#p1">p1锚点</a>
    		<a href="02.html#p2">p2锚点</a>
    		<a href="02.html#p3">p3锚点</a>
    		<a name="p1"></a>
    		<p>p1</p>
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<a name="p2"></a>
    		<p>p2</p>
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<br />
    		<a name="p3"></a>
    		<p>p3</p>
    		<br></br>
    		<br></br>
    		<br></br>
    		<br></br>
    		<br></br>
    		<br></br>
    		<br></br>
    		<br></br>
    

    <a name="p">先打一个锚点,之后用<a href="p">来跳转  

    <css>允许我们针对a标签的4种状态设置各自的css特性,叫做css伪类

    <style>
    	a:link {
    		color:gray;
    	}
    	a:hover {
    		color:orange;
    	}	
    	a:active {
    		color:black;
    	}
    	a:visited {
    		color:purple;
    	}
    </style>
    </head>
        <body>
    		<div>
    			<a href="#">空连接</a>
    			<a href="#">空连接</a>
    			<a href="#">空连接</a>
    			<a href="#">空连接</a>
    		</div>
    		<div>
    		</div>
    	</body>  

    a:link是连接最开始的颜色

    a:hover是光标在其上且没点击的颜色

    a:active是光标点击且没松手的时刻

    a:visited是访问过的

  • 相关阅读:
    15个让人惊讶的 CSS3 动画效果演示
    40免费的 jQuery & CSS3 图片热点特效
    分享35款最新出炉的免费个人博客模板
    美!视差滚动在图片滑块中的应用【附源码下载】
    让人惊叹的的创意404错误页面设计
    经典网页设计:10个响应式设计的购物网站
    20幅妙不可言的光涂鸦摄影作品
    值得一试的8个最佳云端集成开发环
    新入行程序员应知的十个秘密
    赞!超炫的页面切换动画效果【附源码下载】
  • 原文地址:https://www.cnblogs.com/abc23/p/9490584.html
Copyright © 2011-2022 走看看