仓酷云

标题: 今天来学习第五天超链接伪类 [打印本页]

作者: 山那边是海 时间: 2015-1-16 10:33
标题: 今天来学习第五天超链接伪类
可以用display:inline的方法让两个子div并排,但是这样的话div的宽度设置将会失效（要把子div撑大只能考里面的元素）。

明天我们入手下手进修《十天学会web尺度(div+css)》超链接伪类，包括以下内容和常识点：

链接的四种款式
将链接转换为块状
用css制造按钮
首字下沉

1、超链接的四种款式

原本企图这节课放到第九章中解说，但下边的章节都触及到了，以是提早来进修一下，上节课解说的内容对照多，这节课就少讲些，只需了解了伪类，就轻松多了。
超链接能够说是网页开展史上一个巨大的创造，它使得很多页面互相链接从而组成一个网站。说到超链接，它触及到一个新的观点：伪类，我们先看下超链接的四种款式：

a:link{color:#FF0000}/*未会见的链接*/
a:visited{color:#00FF00}/*已会见的链接*/
a:hover{color:#FF00FF}/*鼠标挪动到链接上*/
a:active{color:#0000FF}/*选定的链接*/

以上分离界说了超链接未会见时的链接款式，已会见的链接款式，鼠标移上时链接款式和选定的链接款式。之以是称之为伪类，也就是说它不是一个实在的类，一般的类是以点入手下手，后边跟一个称号，而它是以a入手下手后边跟个冒号，再跟个形态限制字符；好比第三个a:hover的款式，只要当鼠标挪动到该链接上时它才失效，而a:visited只对已会见过的链接失效。伪类使得用户体验年夜年夜进步，好比我们能够设置鼠标移上时改动色彩或下划线等属性来告诉用户这个是能够点击的，设置已会见过的链接的色彩变昏暗或加删除线告诉用户这个链接的内容已会见过了。
上面来做一个默许形态下是蓝色，鼠标放上是白色加下划线，选定（按下）时为紫色，已会见过为灰色加删除线的实例来说解一下。起首拔出两个带超链接的内容：

<ahref="#">这里是链接</a>
<ahref="10.html">这里也是链接</a>

从上图中能够看出，拔出的超链接默许是蓝色来下划线的，这是标签的默许款式而至，上去我们在css款式中界说

设置完a:link的款式后，上面分离设置a:visited，a:hover，a:active的款式

天生的源代码以下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><styletype="text/css">a:link{color:#06F;text-decoration:none;}a:visited{color:#999;text-decoration:line-through;}a:hover{color:#F00;text-decoration:underline;}a:active{color:#F0F;}</style></head><body><ahref="#">这里是链接</a><ahref="10.html">这里也是链接</a></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
注重：四种形态的按次必定不克不及倒置，不然有些不失效
2、将链接转换为块级元素

链接在默许形态下是内联元素，转换为块级元素后能够取得更年夜的点击地区，能够设置宽度和高度，将链接转换为块状，只需增添一个display:block的css属性便可。

a{display:block;height:30px;width:100px;line-height:30px;text-align:center;background:#CCC;}

如许设置的了局是全局a都实行这个款式显现，上面设置一下鼠标划过期的形态，别的几种形态设置办法不异

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><styletype="text/css">a{display:block;height:30px;width:100px;line-height:30px;text-align:center;background:#CCC;}a:hover{color:#FFF;text-decoration:none;background:#333;}</style></head><body><ahref="#">这里是链接</a><ahref="10.html">这里也是链接</a></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
3、用css制造按钮

学会了把超链接转换为块级元素，想制造个css按钮几乎太复杂了，只需在上一步的基本上增添一个按钮的背景图片便可完成。上面以制造淘宝网首页的收费注册按钮来说解，设置最经常使用的默许款式和鼠标移上时的款式，以下图

起首必要筹办默许形态和鼠标划过形态的图片以下：

修正之前的html以下，然后从头界说css款式：

<ahref="#">收费注册</a>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><styletype="text/css">a{display:block;height:34px;width:107px;line-height:2;text-align:center;background:url(/upload/2010-08/14/014304_btn_bg.gif)no-repeat0px0px;color:#d84700;font-size:14px;font-weight:bold;text-decoration:none;padding-top:3px;}a:hover{background:url(/upload/2010-08/14/014304_btn_bg_hover.gif)no-repeat0px0px;}</style></head><body><ahref="#">收费注册</a></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
本例中使用到了背景图片，有关背景图片的具体使用将鄙人一节中解说，你也能够检察css款式表手册，起首懂得下大概进修以下视频教程http://www.ckuyun.com/div_css/895.shtml
4、首字下沉

首字下沉是css伪类上的又一个使用，它能够间接经由过程css款式表向某个选择器中的文本首字母增加特别的款式，而不必要把首字增加一个标签或经由过程程序来完成，明天以制造word里的首字下沉为例来说解，使用以下伪元素：

:first-letter

在页面中增加以下一段内容，只用设置款式就能够完成首字下沉了：
尺度之路[www.ckuyun.com]供应DIV+CSS教程,DIV+CSS视频教程,web2.0尺度,DIV+CSS结构进门教程,网页结构实例,css结构实例,div+css模板,div+css实例剖析,网站重构，网页代码,水晶图标,幻灯告白图片.教程合适初学者循规蹈矩进修!
为了便于察看效果，我们设置p的款式以下：

p{width:400px;line-height:1.5;font-size:14px;}

然后设置p:first-letter的款式

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><styletype="text/css">p{width:400px;line-height:1.5;font-size:14px;}p:first-letter{font-family:"microsoftyahei";font-size:40px;float:left;padding-right:10px;line-height:1;}</style></head><body>尺度之路[www.ckuyun.com]供应DIV+CSS教程,DIV+CSS视频教程,web2.0尺度,DIV+CSS结构进门教程,网页结构实例,css结构实例,div+css模板,div+css实例剖析,网站重构，网页代码,水晶图标,幻灯告白图片.教程合适初学者循规蹈矩进修!</body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
你可能会说，好多英文看不懂，不过我告诉你，很抱歉那三个英文你必须记住，而且是最重要的三个，你可以把这么个盒子看成一个DIV，而所有标签都带有这三个属性。

作者: 柔情似水 时间: 2015-1-16 20:00
标题: 今天来学习第五天超链接伪类
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

作者: 再现理想 时间: 2015-1-18 23:02
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 乐观 时间: 2015-1-27 22:13
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 兰色精灵 时间: 2015-2-5 15:44
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

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

作者: 仓酷云 时间: 2015-3-11 10:45
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

作者: 小魔女 时间: 2015-3-18 12:53
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

作者: 愤怒的大鸟 时间: 2015-3-26 05:52
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

欢迎光临仓酷云 (http://ckuyun.com/)