HTML+CSS Day06 超链接的样式与搭配

1.格式

  a:link    {}  普通的、未被访问的链接

  a:visited {}   用户已访问的链接

  a:hover  {}  鼠标指针位于链接的上方

   a:active{}  链接被点击的时刻

2.常用内嵌属性

  color

  text-decoration

  background-color

  font-family

  padding-top

  padding-right

  padding-bottom

    padding-left

  例1:

 1 <html>
 2     <head>
 3         <title>教育培训</title>
 4         <style type="text/css">
 5             h2{font-weight:normal;}
 6             p{margin:0px;padding:0px;font-size:16px;}
 7             p{margin-bottom:3px;}
 8             body{margin-left:15px;}
 9             p a:link{color:blue;}
10             p a:visited{color:blue;}
11             #p1 a{text-decoration:none;color:#666;}
12             #p1 a:hover{text-decoration:underline;}
13             #p1 span,#p1 span a{color:green;}
14             #p1 span a:hover{text-decoration:none;}
15             span{color:red;}
16             #p1{margin-bottom:20px;}
17             .class1{font-size:12px;}
18             
19         </style>
20     </head>
21     <body>
22         <h2>百度搜索结果页</h2>
23         <p><a href="http://www.cdrtvu.com.cn/" target="block"><span>教育培训</span>,招生进行中,严格执行三必须政策|网络教育</a></p>
24         <p class="class1"><span>教育培训</span>电大,严格执行三必须政策,招生进行中。成都广播电视大学创办于1979年,是教育部批准独立设置的成教高等学校。
25         </p>
26         <p id="p1" class="class1"><span><a href="#">www.cdrtvu.com.cn</a> 2016-03</span> - <a href="#">推广</a> - <a href="#">评价</a></p>
27         
28         <p ><a href="#">品牌<span>教育培训机构</span> 快速提分 首选卓越教育</a></p>
29         <p class="class1">成都<span>教育培训</span>18年成功教学+300名优质名师+50项实力认证,3个月可提高50到80分!成都<span>教育培训</span>补习,万千家长推荐认可品牌,价格合理,教学过硬,赶紧来预约吧!
30         </p>
31         <p id="p1" class="class1"><span><a href="#">cd.zy.com</a> 2016-03</span> - <a href="#">推广</a> - <a href="#">评价</a></p>
32         
33         <p><a href="#">四川<span>教育培训</span>加盟,教育加盟好项目,低风险,保盈利安全可回购。</a></p>
34         <p class="class1">四川<span>教育培训</span>加盟,投资安全可回购,全国多家加盟店全部盈利 8大全方位扶持助您轻松当校长四川教育培训加盟,标准化体系保障,一站式全程服务,360度运营支持。
35         </p>
36         <p id="p1" class="class1"><span><a href="#">bd.bj-guomao.com</a> 2016-03</span> -<a href="#"> 推广</a> - <a href="#">评价</a></p>
37         
38         <p><a href="#"><span>教育培训</span>--中国少儿口才考级2016招募分点</a></p>
39         <p class="class1">权威部门扛鼎!!全国青少儿普通话与口才培训考级项目2016全新上线。
40         </p>
41         <p id="p1" class="class1"><span><a href="#">zs.91pth.com</a> 2016-03</span> - <a href="#">推广</a> - <a href="#">评价</a></p>
42         
43         <p><a href="#"><span>教育培训</span>,<span>教育培训</span>低投入,网点遍布全国</a></p>
44         <p class="class1">热点: <span>教育培训</span>优势: 网点遍布全国 | 解决后顾之忧 | 7大保障<span>教育培训</span>全国知名品牌,免费领取内部加盟指南。教育培训,7年教学经验,网点遍布全..
45         </p>
46         <p class="class1"><span>教育培训</span>机构招商<span>教育培训</span>学校加盟教育培训加盟<span>教育培训</span>机构加盟</p>
47         <p id="p1" class="class1"><span><a href="#">www.51eduol.com</a> 2016-03</span> - <a href="#">推广</a> - <a href="#">评价</a></p>
48     </body>
49 </html>

  例2:

 1 <html>
 2     <head>
 3         <title>搜狐教育频道内容页</title>
 4         <style type="text/css">
 5         body{background-color:#efefef;}
 6             h2{font-weight:normal;margin-left:40px;}
 7             p{font-size:14px;}
 8             p span{color:blue;}
 9             p a span #p1{color:green;}
10             p a:link{text-decoration:none;}
11             #p1,.p2{font-size:18px;color:green;}
12             #p1{color:black;font-weight:bold;}
13             .p3{color:#3C9DD0;}
14             #p4{color:#999;}
15         </style>
16     </head>
17     <body>
18         <h2>搜狐教育频道内容页</h2>
19         <p><a href="#" id="p1">搜狐<span class="p2">教育</span></a>&gt <a href="#" class="p3">教育新闻</a>&gt <a href="#" class="p3">教育动态</a></p>
20         <hr size="4px" color="green"/>
21         <h2 align="center"><strong>南京一脑力培训机构称8天等于12年 学费12800元</strong></h2>
22         <p id="p4">&nbsp;&nbsp2012年07月31日07:19来源: <span class="p3">龙虎网-金陵晚报</span></p>
23         <p><strong>&nbsp;&nbsp“天价”学费 8天12800元</strong></p>
24         <p>&nbsp;&nbsp家长质疑价钱和效果能否成正比培训机构称:孩子教育无法用金钱衡量 物价部门表示:选择判断需谨慎</p>
25         <p><strong>&nbsp;&nbsp今日聚焦</strong></p>
26         <p>&nbsp;&nbsp“8天,12800元的学费。对于家长来说不是个小数目,是不是真的对孩子学习有帮助?”近日,市民杨先生
27         向金陵晚报热线反映,原本想给孩子报名一家为“新周知教育集团”的脑力培训机构,但是其堪称“天价”的收
28         费让他有些进退两难。“这家机构在广告上宣传的"8天等于12年,让孩子成绩飞起来"这样的宣传标语,作为
29         家长肯定会心动。”杨先生说,更在乎的还是效果。为此,金陵晚报记者也不禁好奇,到底是怎样的培训效果
30         才会有如此高的收费?(陈丹朱丽娟)</p>
31         <p><strong>8天一万多有用吗</strong></p>
32         <p>&nbsp;&nbsp“这样高价格的培训不禁让人咋舌。”杨先生告诉记者,6月中旬,他在报纸上看到了一家名为“新周知教
33         育(国际)特训班”科学记忆法的广告。该机构在广告中宣称,“通过训练的大脑2天可记忆1000个英语单词,
34         8天时间就让孩子成绩飞起来”。同时广告中还表示,该培训班由“世界记忆大师教练讲师团专家组,传授国
35         际脑力教育前沿成果及快速记忆方法”。短短的8天时间,难道真能达到这么神奇的效果?禁不住广告的诱惑,
36         杨先生给“新周知”打去了电话。</p>
37         <p>&nbsp;&nbsp“我打电话过去问了一下,他们告诉我是8天的封闭式集训,通过科学的记忆方法帮助孩子提高成绩,总
38         费用加起来一共是12800元,还说让我可以先去观摩会看看。”杨先生说。“我去观摩会看了下,感觉效果还挺
39         好的,就想给自己的小孩报名。可是他们8天就要收1万多元钱,我觉得有点贵了。”面对天价收费,杨先生
40         提出了质疑。“万一8天培训之后,孩子的成绩没有提高呢?到时候我又该找谁?”杨先生不免有些担忧。</p>
41         <p><strong>孩子的教育无法用金钱衡量</strong></p>
42         <p>&nbsp;&nbsp7月25日下午,金陵晚报记者以帮孩子报名参加培训为由,拨通了“新周知教育”脑力培训机构的电话。
43         记者表示自己的孩子是小升初,想咨询一下“新周知特训营”的相关情况。接电话的男性工作人员表示,现
44         在小学阶段的孩子已经有十几个人报名了,分为3个班,每个班大概有五六个人,分别由相应的生活老师
45         和培训老师负责。</p>
46     </body>
47 </html>
原文地址:https://www.cnblogs.com/kylyww/p/5240023.html