网站建设有哪些要素-十天学会web标准div+css 网页

2021-04-18 19:12

--------

网站建设有哪些要素

------- 十天学会web规范div+css 超连接伪类 点一下:168 摘要:十天学会web规范div+css 超连接伪类,包括以下內容和专业知识点:一、连接的四种款式 二、将连接变换为块状 三、用css制作按钮 四、首字下沉 一、超连接的四种款式 原本方案这节课放到第...
十天学会web规范DIV+CSS 超连接伪类,包括以下內容和专业知识点:
 一、连接的四种款式
 二、将连接变换为块状
 三、用css制作按钮
 四、首字下沉
一、超连接的四种款式 原本方案这节课放到第九章中解读,但下边的章节都涉及到到了,因此提早来学习培训一下,上节课解读的內容比较多,这节课就少讲些,要是了解了伪类,就轻松多了。 超连接能够说是网页页面发展趋势史上一个杰出的创造发明,它使得很多网页页面互相连接从而组成一个网站。说到超连接,它涉及到到一个新的定义:伪类,大家先看下超连接的四种款式: a:link {color: #FF0000} /* 未浏览的连接 */ a:visited {color: #00FF00} /* 已浏览的连接 */ a:hover {color: #FF00FF} /* 电脑鼠标挪动到连接上 */ a:active {color: #0000FF} /* 选定的连接 */ 以上各自界定了超连接未浏览时的连接款式,已浏览的连接款式,电脑鼠标移上时连接款式和选定的连接款式。之因此称之为伪类,也就是说它并不是一个真正的类,一切正常的类是以点刚开始,后面跟一个名字,而它是以a刚开始后面跟个冒号,再跟个情况限制标识符;例如第三个a:hover的款式,仅有当电脑鼠标挪动到该连接上时它才起效,而a:visited只对已浏览过的连接起效。伪类使得客户体验大大提升,例如大家能够设定电脑鼠标移上时更改色调或下划线等特性来告之客户这个是能够点一下的,设定已浏览过的连接的色调变昏暗或加删掉线告之客户这个连接的內容已浏览过了。 下面来做一个默认设置情况下是蓝色,电脑鼠标放上是鲜红色加下划线,选定(按下)时为紫色,已浏览过为灰色加删掉线的案例来说解一下。最先插进两个带超连接的內容: p a href="#" 这里是连接 /a /p p a href="10.HTML" 这里也是连接 /a /p 从上图中能够看出,插进的超连接默认设置是蓝色来下划线的,这是标识的默认设置款式引发,下来大家在css款式中界定 设定完a:link的款式后,下面各自设定a:visited ,a:hover ,a:active的款式

转化成的源码以下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=gb2312" / style type="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 p a href="#" 这里是连接 /a /p " 这里也是连接 /a /p /body /html 留意:四种情况的次序一定不可以错乱,不然有些不起效 二、将连接变换为块级元素 连接在默认设置情况下是内联元素,变换为块级元素后能够得到更大的点一下地区,能够设定宽度和高宽比,将连接变换为块状,只需提升一个display:block的css特性便可。


a { display: block; height: 30px; width: 100px; line-height: 30px; text-align: center; background: #CCC; } 这样设定的結果是全局性a都实行这个款式显示信息,下面设定一下电脑鼠标划落伍 的情况,其它几种情况设定方式同样

编码以下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=gb2312" / style type="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 p a href="#" 这里是连接 /a /p " 这里也是连接 /a /p /body /html 三、用css制作按钮 学会了把超连接变换为块级元素,想制作个css按钮真是太简易了,只需在上一步的基本上提升一个按钮的情况照片便可完成。下面以制作淘宝网的完全免费申请注册按钮来说解,设定最常见的默认设置款式和电脑鼠标移上时的款式,以下图 最先需要提前准备默认设置情况和电脑鼠标划过情况的照片以下:
改动之前的html以下,随后再次界定css款式: p a href="#" 完全免费申请注册 /a /p

编码以下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=gb2312" / style type="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-repeat 0px 0px; 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-repeat 0px 0px;} /style /head body p a href="#" 完全免费申请注册 /a /p /body /html 本例中应用到了情况照片,相关情况照片的详尽应用将在下一节中解读 四、首字下沉 首字下沉是css伪类上的又一个应用,它能够立即根据css款式表向某个挑选器中的文字首字母加上独特的款式,而不需要把首字加上一个标识或根据程序来完成,今日以制作word里的首字下沉为例来说解,运用以下伪元素: :first-letter 在网页页面中加上以下一段內容,只用设定款式便可以完成首字下沉了: p 规范之路[]出示DIV+CSS实例教程,DIV+CSS视頻实例教程,web2.0规范,DIV+CSS合理布局入门实例教程,网页页面合理布局案例,css合理布局案例,div+css模版,div+css案例分析,网站重构,网页页面编码,水晶标志,幻灯广告宣传照片.实例教程合适初学者由浅入深学习培训! /p 以便便于观查实际效果,大家设定p的款式以下: p { width: 400px; line-height: 1.5; font-size: 14px; } 随后设定p:first-letter的款式

编码以下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=gb2312" / style type="text/css" p { width: 400px; line-height: 1.5; font-size: 14px; } p:first-letter { font-family: "microsoft yahei"; font-size: 40px; float: left; padding-right: 10px; line-height: 1; } /style /head body p 规范之路[]出示DIV+CSS实例教程,DIV+CSS视頻实例教程,web2.0规范,DIV+CSS合理布局入门实例教程,网页页面合理布局案例,css合理布局案例,div+css模版,div+css案例分析,网站重构,网页页面编码,水晶标志,幻灯广告宣传照片.实例教程合适初学者由浅入深学习培训! /p /body /html

<

---------

网站建设有哪些要素

------------


扫描二维码分享到微信

在线咨询
联系电话

020-66889888