CSS教程之用CSS属性挑选器把持链接款式

只看该作者 · 发表于 2015-1-16 00:14:09

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

你可以轻松地控制页面的布局。
偶然我们大概但愿外部链接与内部链接显现分歧的款式，如内部链接。我想在链接的中间加上一个小图标，以暗示其是一个内部的链接，来告知来访者，让他们来确认是在新窗口翻开仍是在本窗口翻开。我们大概会如许做：
.external
{
background:url(images/external.gif)no-repeatrighttop;
padding-right:12px;
}
然后给每个内部的链策应用该CSS，固然，如许做并非不成以，只是太烦琐。
那有无好的举措来完成呢？有。能够使用CSS3中的属性选择，可是在IE6及以下版本不撑持该办法，在FireFox中已完成了。
属性选择器的基础语法为：[att^=val]
比方：
a[href^="http://www.blueidea.com"]
{
background-image:none;
padding-right:0px;
}
会查找一切以http://www.blueidea.com开首的链接，而且扫除背景图片。有了下面的属性，就好办了。
<styletype="text/css">
a
{
background:url(external.gif)no-repeatrighttop;
padding-right:14px;
font-size:12px;
}
a[href^="http://www.blueidea.com"]
{
background-image:none;
padding-right:0px;
}
</style>
先给一切链接加上图标，然后往失落以http://www.blueidea.com开首的链接图标，如许就完成了内部链接显现图标，外部链接不显现图标了。
注：firefox中合用，IE就不可了
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>newdocument</title>
<metaname="generator"content="editplus"/>
<metaname="author"content=""/>
<metaname="keywords"content=""/>
<metaname="description"content=""/>
<styletype="text/css">
a
{
background:url(/articleimg/2007/05/4701/external.gif)no-repeatrighttop;
padding-right:14px;
font-size:12px;
}
a[href^="http://www.blueidea.com"]
{
background-image:none;
padding-right:0px;
}
</style>
</head>
<body>
<ahref="http://www.blueidea.com">BlueIdea</a><br/>
<ahref="http://www.lemongtree.com/">Lemongtree.Com</a><br/>
</body>
</html>
</p>
更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。

只看该作者 · 发表于 2015-3-16 10:40:42

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

只看该作者 · 发表于 2015-3-8 17:43:44

只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

只看该作者 · 发表于 2015-2-26 20:15:46

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

只看该作者 · 发表于 2015-2-9 03:17:33

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

只看该作者 · 发表于 2015-2-3 12:54:12

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

只看该作者 · 发表于 2015-1-25 18:00:06

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

只看该作者 · 发表于 2015-1-18 05:43:51

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] CSS教程之用CSS属性挑选器把持链接款式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子