<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

目录
相关文章
|
3月前
|
缓存 JavaScript 前端开发
通过id给input框和div赋值,修改属性值。
通过id给input框和div赋值,修改属性值。
42 0
通过id给input框和div赋值,修改属性值。
|
3月前
|
JavaScript 前端开发 开发者
div 元素的 tab-index 属性被设置为 -1,意味着什么
div 元素的 tab-index 属性被设置为 -1,意味着什么
24 0
|
7月前
|
移动开发 HTML5
修改HTML5 input placeholder 颜色及修改失效的解决办法
修改HTML5 input placeholder 颜色及修改失效的解决办法
|
8月前
|
UED
HTML中a标签的target属性的取值和作用--详解(附加代码)
HTML中a标签的target属性的取值和作用--详解(附加代码)
149 0
|
JavaScript 前端开发
el-select样式两种修改方式index.html或popper-append-to-body加popper-class
el-select样式两种修改方式index.html或popper-append-to-body加popper-class
188 0
html中a标签属性parent和self的举例说明
html中a标签属性parent和self的举例说明
345 0
html中a标签属性parent和self的举例说明
|
移动开发 HTML5
Html5新属性Data-type的作用
Html5新属性Data-type的作用
347 0
Html5新属性Data-type的作用
|
JavaScript
使用 jQuery 查询属性不包含 disabled 的 input radio
使用 jQuery 查询属性不包含 disabled 的 input radio
使用 jQuery 查询属性不包含 disabled 的 input radio