<a> href属性--记录八

简介:

1.去掉<a>标签的下划线

复制代码
<ul style=" list-style-type:none; margin:0;color:Gray; font-size:11px;margin-top:30px">
    <li style=" float:left; position:relative; margin-left:380px; "><a href="#">关于我们</a></li>
    <li style=" float:left; position:relative; margin-left:20px"><a href="#">关于我们</a></li>
    <li style=" float:left; position:relative; margin-left:20px"><a href="#">联系我们</a></li>
    <li style=" float:left; position:relative; margin-left:20px"><a href="#">人才招聘</a></li>
    <li style=" float:left; position:relative; margin-left:20px"><a href="#">商家入驻</a></li>
    <li style=" float:left; position:relative; margin-left:20px"><a href="#">友情链接</a></li>
    <li style=" float:left; position:relative; margin-left:20px"><a href="#">冬冬购物社区</a></li>
</ul>

a
{
text-decoration: none;
}
a:hover
{
text-decoration: underline;
color:Red;
}
复制代码

 其中的text-decoration: none可以去掉其下划线。使用文本默认样式。

 

2.text-decoration

例子:

复制代码
<html>
<head>
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration:blink}
a {text-decoration: none}
</style>
</head>

<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<p><a href="http://www.w3school.com.cn/index.html">这是一个链接</a></p>
</body>

</html>
复制代码

效果:

虽然<a>设置了text-decoration: none;但是字体默认颜色依旧有。

 

<a>这是一个链接</a>

href属性去掉后:下划线颜色全都消失。

 

 

 

3.<a>的target的属性有四个特殊值:

  • target='_blank'  浏览器总是打开一个新的网页
  • target='_self'  它使得目标文档载入并显示在相同的框架或者窗口中
  • target='_parent'  这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效
  • target='_top'  如果有多层父框架,直接去掉所有父框架,并刷新页面

4.<a>的href属性:

href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScript 代码段。如果用户选择了 <a> 标签中的内容,那么浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档,或者执行 JavaScript 表达式、方法和函数的列表。

  • 绝对 URL - 指向另一个站点

比如 

<a href="http://www.example.com/index.htm"></a>

 

  • 相对 URL - 指向站点内的某个文件
<a href="/index.htm"></a>

<a href="http://www.w3school.com.cn/index.html">

 

  • 锚 URL - 指向页面中的锚(href="#top")
复制代码
<a href="#p">点击去有锚P锚的地方</a>
<pre>zqzzqzzqzzqzzqz
    zqzzqzzqzzqzzqz
    zqzzqzzqzzqzzqz
    zqzzqzzqzzqzzqz
    zqzzqzzqzzqzzqz
    zqzzqzzqzzqzzqz
    .....                  <!--省略很多行,直到右侧产生滚动条 -->
    zqzzqzzqzzqzzqz
    zqzzqzzqzzqzzqz

</pre>
<p id="p">#锚指向的位置</p>    
复制代码
  • 传递参数
复制代码
//href
zqz.aspx?a=1&b=2&c=3

//后台
string a=Request.QueryString["a"];
string b=Request.QueryString["b"];
string c=Request.QueryString["c"];
复制代码



转载:http://www.cnblogs.com/zqzjs/p/4550182.html

目录
相关文章
|
7月前
|
机器人 Docker 容器
【傻妞+青龙+MairARK安装教程】
【傻妞+青龙+MairARK安装教程】
354 0
|
12月前
|
存储 运维 监控
带你读《存储漫谈:Ceph原理与实践》——序
带你读《存储漫谈:Ceph原理与实践》——序
|
11月前
|
Java Maven
Maven项目打包版本号管理——Maven Project Version插件
Maven项目打包版本号管理——Maven Project Version插件
797 0
|
存储 机器学习/深度学习 算法
DeepRec 大规模稀疏模型训练推理引擎
本文将以下三个方面展开介绍:DeepRec 背景(我们为什么要做 DeepRec)、DeepRec 功能(设计动机和实现)以及DeepRec 社区(最新发布的 2206 版本主要功能)
DeepRec 大规模稀疏模型训练推理引擎
|
JavaScript 数据可视化 前端开发
推荐收藏|10个炫酷的数据可视化作品含源码
推荐收藏|10个炫酷的数据可视化作品含源码
282 0
推荐收藏|10个炫酷的数据可视化作品含源码
|
Android开发
NestedScrollView + ExpandableListView 显示不全问题和滑动冲突问题 。
NestedScrollView + ExpandableListView 显示不全问题和滑动冲突问题 。
|
Web App开发 监控 前端开发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><meta http-equiv="Cont
已发现2个内存错误,应用名称(kernel:),日志内容(hangzhou-jishuan-DDS0248 kernel: sbridge: HANDLING MCE MEMORY ERROR hangzhou-jis...
820 0
|
存储 缓存 Java
01.Android线程池实践基础
01.Android线程池实践基础
1941 0
01.Android线程池实践基础
|
弹性计算 关系型数据库 MySQL
使用PolarDB和ECS搭建门户网站
创建PolarDB数据库账号,连接ecs,安装LAMP环境,搭建门户网站即可完成
637 0
使用PolarDB和ECS搭建门户网站

热门文章

最新文章