《网页设计与制作（HTML+CSS+JavaScript）》课件-CORE-06_第1页
《网页设计与制作（HTML+CSS+JavaScript）》课件-CORE-06_第2页
《网页设计与制作（HTML+CSS+JavaScript）》课件-CORE-06_第3页
《网页设计与制作（HTML+CSS+JavaScript）》课件-CORE-06_第4页
《网页设计与制作（HTML+CSS+JavaScript）》课件-CORE-06_第5页
已阅读5页，还剩54页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第六章CSS应用美化网页多样的超链接链接颜色的设置不同的链接颜色<html><head><title>不同的链接颜色</title><styletype="text/css"> <!-- a:link{color:red} a:visited{color:blue} a:hover{color:green} a:active{color:yellow} --></style></head><body><ahref="">天津迅腾滨海科技有限公司新闻网</a>（注意点击时的颜色变化）

</body></html>美化网页多样的超链接去除下划线的链接<html><head><title>无下划线的链接</title><styletype="text/css"> <!-- a{text-decoration:none} a:link{color:red} a:visited{color:blue} a:active{color:yellow} a:hover{color:green;font-size:18px} --></style></head><body><ahref="">天津迅腾滨海科技有限公司新闻网</a></body></html>美化网页华丽的滚动条立体滚动条的制作多彩的滚动条<html><head><title>多彩的滚动条</title><styletype="text/css"> <!-- body{scrollbar-face-color:lightgreen;scrollbar-shadow-color:purple; scrollbar-highlight-color:purple;scrollbar-track-color:red; scrollbar-3dlight-color:yellow;scrollbar-darkshadow-color:green; scrollbar-arrow-color:red} --></style></head><body><imgsrc="images/top.jpg"></body></html>美化网页炫目的光标取值样式取值样式取值样式取值样式auto同defaultpointer手伸食指nw-resize西北箭头s-resize向南箭头help问号move十字箭头n-resize向北箭头w-resize向西箭头crosshair“十”字e-resize向东箭头se-resize东南箭头text“工”字default默认ne-resize东北箭头sw-resize西南箭头wait沙漏<html><head><title>光标样式</title><styletype="text/css"> <!-- a:link{color:red} a:visited{color:blue} a:active{color:yellow} a:hover{color:green;cursor:help} --></style></head><body><ahref="">天津迅腾滨海科技有限公司新闻网</a></body></html>区域与层区域的概念在网页上划出特定的一块，在这个块可以包含文字、图片和表格等各种网页组件，这个块就是区域。区域的作用是划分网页——把密切相关的组件组织在一起，以便集体设置；并把它们同别的组件区分开来——各区域之间彼此独立。“<div></div>”标记就是区域标记。区域与层区域的概念区域的定义：制作3个相邻的区域区域的概念<html><head><title>区域的概念</title><styletype="text/css"><!-- #d1{background-color:red;width:400;height:100} #d2{background-color:blue;width:300;height:80}#d3{background-color:green;width:200;height:50} --></style></head><body><center><divid="d1">区域一</div><divid="d2">区域二</div><divid="d3">区域三</div></center></body></html>区域与层区域的概念区域的定位：区域的定位区域的位置<html><head><title>区域位置</title><styletype="text/css"> <!-- div{width:300;height:100} #d1{background-color:red;position:absolute;top:0;left:0} #d2{background-color:blue;position:absolute;top:50;left:50} #d3{background-color:green;position:absolute;top:100;left:100} --></style></head><body><center><divid="d1"></div><divid="d2"></div><divid="d3"></div></center></body></html>区域与层区域的概念区域的定位：区域的相对位置区域的相对位置<html><head><title>区域的相对位置</title><styletype="text/css"> <!-- div{width:150;height:50} #d1{background-color:red;position:relative;top:0;left:0} #d2{background-color:blue;position:relative;top:20;left:20} #d3{background-color:green;position:relative;top:50;left:50} --></style></head><body><center><divid="d1"></div><divid="d2"></div><divid="d3"></div></center></body></html>区域与层网页组件的分段管理分段显示不同的文字字体<html><head><title>区域的分段管理</title><styletype="text/css"> <!-- #d1{color:red;font-family:"宋体";font-size:18px;width:500;height:30} #d2{color:red;font-family:"幼圆";font-size:18px;width:400;height:35} #d3{color:red;font-family:"隶书";font-size:18px;width:300;height:40} --></style></head><body><center><divid="d1"><tableborder="1"><tr><td>

迅腾滨海科技有限公司（简称：迅腾科技）是天津滨海迅腾科技集团旗下一家以软件研发、软件外包为主导的科技型企业。

</td></tr></table></div><p><divid="d2"><tableborder="1"><tr><td>

迅腾滨海科技有限公司（简称：迅腾科技）是天津滨海迅腾科技集团旗下一家以软件研发、软件外包为主导的科技型企业。

</td></tr></table></div><p><divid="d3"><tableborder="1"><tr><td>

迅腾滨海科技有限公司（简称：迅腾科技）是天津滨海迅腾科技集团旗下一家以软件研发、软件外包为主导的科技型企业。

</td></tr></table> </div></center></body></html>区域与层层的概念层的定义：区域的重叠层的重叠<html><head> <title>层的重叠</title> <styletype="text/css"> <!-- #d1{background-color:red;width:300;height:250;position:absolute;top:30;left:30} #d2{background-color:blue;width:250;height:200;position:absolute;top:30;left:60} #d3{background-color:green;width:200;height:150;position:absolute;top:30;left:30} --></style></head><body><center><divid="d1"></div><divid="d2"></div><divid="d3"></div></center></body></html>

区域与层层的概念层的定义：改变区域的重叠顺序层得概念<html><head><title>层的概念</title><styletype="text/css"> <!-- #z1{background-color:red;width:300;height:250;position:absolute;top:30;left:30; z-index:1} #z2{background-color:blue;width:250;height:200;position:absolute;top:30;left:60; z-index:3} #z3{background-color:green;width:200;height:150;position:absolute;top:30;left:30; z-index:2} -->层得概念</style></head><body><center><divid="z1"></div><divid="z2"></div><divid="z3"></div></center></body></html>区域与层层的概念三维空间的建立：图片和文字层次的建立三维空间的建立<html><head><title>三维空间的建立</title><styletype="text/css"> <!-- #z1{position:absolute;top:25;left:45;z-index:1} #z2{position:absolute;top:30;left:50;font-family;楷书;font-size:30;color:red;z-index:3} #z3{position:absolute;top:40;left:60;font-family;隶书;font-size:40;color:blue;z-index:2} --></style></head><body><center><divid="z1"><imgsrc="images/top.jpg"></div><divid="z3">网<br>页<br>设<br>计</div><divid="z2">HELLO!CSS</div></center></body></html>CSS与HTML结合的方式HTML的内部定义对HTML标记直接定义：对HTML标记的直接定义<html> <head> <title>对HTML标记直接定义</title><styletype="text/css"> <!-- h1{font-family:"黑体";color:red} h2{font-family:"华文楷体";color:blue} --> </style> </head> </body><p><h1>此行文字为红色，字体为黑体</h1><p><h2>此行文字为蓝色，字体为华文楷体</h2> </body></html>CSS与HTML结合的方式HTML的内部定义在HTML标记内直接定义：HTML标记内的直接定义<html> <head> <title>HTML标记内的直接定义</title> </head> <body> <p><h1style="font-family:'黑体';color:red">

这字体被定义为红色黑体</h1></p> <p><h1style="font-family:'华文楷体';color:green">

这字体被定义为绿色华文楷体</h1></p> </body></html>CSS与HTML结合的方式HTML的内部定义利用class或id选择性定义：CLASS定义样式的使用<html> <head> <title>class定义样式的使用</title> <styletype="text/css"> <!-- p.a1{font-family:"华文楷体";color:#FF0000} *.a2{font-family:"黑体";color:#00FF00} --> </style> </head> <body> <pclass="a1">此行文字为红色华文楷体</p> <h3class="a2">此行文字为绿色黑体</h3> <h3class="a1">此行文字为浏览器默认</h3> </body></html>CSS与HTML结合的方式HTML的外部定义以嵌入方式调用CSS文件：嵌入外部样式表<html><head><title>嵌入外部样式表</title> <styletype="text/css"><!--@importurl("cs.css");--></style></head><bodybgcolor="lightyellow"><centerclass="text">

欢迎光临<i>迅腾科技</i>欢迎光临

</center><br/><br/><center> <imgsrc="images/top.jpg"></center></body></html>CSS与HTML结合的方式HTML的外部定义以链接方式调用CSS文件：链接外部样式表<html> <head> <title>链接外部样式表</title> <linktype="text/css"rel="stylesheet"href="cs.css"> </head> <bodybgcolor="lightyellow"> <centerclass="text">

欢迎光临<i>迅腾科技</i>欢迎光临

</center><br><br> <center><imgsrc="images/top.jpg"> </center> </body></html>CSS与HTML结合的方式CSS的调用顺序CSS的调用顺序<html><head><title>CSS的调用顺序</title><linktype="text/css"rel="stylesheet"href="cs.css"><styletype="text/css"><!--@importurl("cs2.css");--></style></head><bodybgcolor=lightyellow><centerclass="text">

欢迎光临<i>迅腾科技</i>欢迎光临

</center><br><br><center><imgsrc="images/top.jpg"></center></body></html>CSS与HTML结合的方式CSS的继承性质标记中的包含继承：包含继承

包含继承<html> <head> <title>CSS的包含继承</title> <styletype="text/css"> <!-- h1{color:blue} --> </style> </head> <body> <h1>欢迎光临<i>迅腾科技</i>欢迎光临</h1> </body></html>CSS与HTML结合的方式CSS的继承性质标记中的包含继承：定义冲突

CSS的定义冲突<html> <head> <title>CSS的定义冲突</title> <styletype="text/css"> <!-- h1{color:blue} i{color:red} --> </style> </head> <body> <h1>欢迎光

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论