第7章 设计超链接样式_第1页
第7章 设计超链接样式_第2页
第7章 设计超链接样式_第3页
第7章 设计超链接样式_第4页
第7章 设计超链接样式_第5页
已阅读5页，还剩24页未读， 继续免费阅读

下载本文档

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

文档简介

第7章设计超链接样式掌握超链接的概念掌握内部链接、外部链接和锚点链接使用灵活使用CSS设置超链接样式学习目标010203本章任务任务1定义超链接任务2定义超链接样式任务3案例实现——几何图形的导航菜单任务1定义超链接任务描述

本任务是制作一个中国象棋游戏简介网页，当点击网页导航处的“中国象棋”、“游戏大厅”、“玩家登录”、“进入房间”、“棋手对弈”时，会跳转到当前网页中对应位置的详细内容介绍，而点击页面中的“返回顶部”时，页面又跳转回顶部导航处图8-1-1：中国象棋游戏布局代码样式代码任务分析为详细内容介绍处的知识点标题添加锚点在顶部导航处的“中国象棋”、“游戏大厅”、“玩家登录”、“进入房间”、“棋手对弈”添加指向各锚点的锚点链接在顶部导航处的添加锚点为页面中的“返回顶部”关键字添加指向顶部导航处锚点的锚点链接实现思路掌握超链接的概念布局代码样式代码基本语法常用属性<a>标签语法：<ahref="链接地址">链接内容</a>属性描述href链接的目标地址name给链接命名title添加提示文字target指定链接的目标窗口基本语法target常用窗口属性值描述_self在当前窗口中打开链接文档（默认打开方式）_blank在新窗口中打开链接文档_parent在父窗体中打开链接文档_top在当前窗体打开链接，并替换当前的整个窗体基础案例操作在同一个网站内部，通过内部链接来指向并访问属于该站点内的网页。用法1．内部链接左侧布局代码如下：<!DOCTYPEhtml><html><head><title>超链接</title></head><body><ahref="2.html">点击！链接到2.html页面</a></body></html>右侧布局代码如下：<!DOCTYPEhtml><html><head><title>超链接</title></head><body>欢迎访问本页面</body></html>基础案例操作在不同网站上，通过外部链接跳转并访问不属于该站点上的网页用法2．外部链接布局代码如下：<!DOCTYPEhtml><html><head><title>超链接</title></head><body><ahref="">点击！链接百度页面</a></body></html>基础案例操作浏览当前的网页时，如果页面过长，这时就可以创建锚点链接，即在网页上建立一个书签目录，点击目录上的项目就能自动跳转到相应内容上。用法3．锚点链接练一练任务实现<div><div><h3>  <ahref="#introduce"name="top">中国象棋</a>     <ahref="#hall">游戏大厅</a>   <ahref="#login">玩家登录</a>   <ahref="#room">进入房间</a>   <ahref="#play">棋手对弈</a>   <imgsrc="img/chess.jpg"width="700"></div><divclass="cont"><h2align="center"><aname="introduce"></a>中国象棋游戏简介</h2><p>  中国象棋是起源于中国的一种棋，属于二人对抗性游戏的一种，在中国有着悠久的历史。中国象棋是中国棋文化，也是中华民族的文化瑰宝，它源远流长，趣味浓厚，基本规则简明易懂。中国象棋使用方形格状棋盘，圆形棋子共有32个，红黑二色各有16个棋子，摆放和活动在交叉点上。双方交替行棋，先把对方的将（帅）“将死”的一方获胜。</p><h3><aname="hall">游戏大厅</a>>><ahref="#top">返回顶部</a></h3><p>  玩家选择了棋牌类型以后，即可进入游戏大厅，在游戏大厅中静等3秒，即可进入游戏登录界面。游戏大厅风格选用古式简约大方。之所以选择古式简约风，是因为棋牌类本就源于古代。</p><imgsrc="img/1.jpg"alt=""width="500"><h3><aname="login">玩家登录</a>>><ahref="#top">返回顶部</a></h3><p>  玩家初次登录中国象棋游戏时，需注册相关信息，包括用户名、密码等等信息，下次玩游戏时通过用户名和密码登录游戏即可。</p><imgsrc="img/2.jpg"alt=""width="500"><h3><aname="room">进入房间</a>>><ahref="#top">返回顶部</a></h3><p>  玩家玩游戏前，需要先进入房间，而玩家房间是根据玩家选择的游戏模式而创建的，其中人机匹配和随机对弈是系统自动创建的房间，而好友对战则通过双方其中一方创建房间，然后在邀请另一方，待另一方同意进入房间后，方可开始游戏。</p><imgsrc="img/3.jpg"alt=""width="500"><h3><aname="play">棋手对弈</a>>><ahref="#top">返回顶部</a></h3><p>  棋手对弈模块，主要分为三种对弈模式，分别是人机匹配、好友对战和随机对弈。人机匹配和随机对弈是根据玩家的当前水平（初级、中级、高级）匹配同等级的对手相互对弈。</p><imgsrc="img/4.jpg"alt=""width="500"></div></div>布局代码任务描述任务分析任务实现CSS代码/*页面整体布局*/div{width:1000px;margin:0auto;text-align:center;}/*删除超链接的下划线*/a{text-decoration:none;}/*设置文字标题和内容的对齐方式以及位置*/.contp,.conth3{text-align:left;padding:0150px;}p{font-size:20px;}样式代码任务描述任务分析任务2定义超链接样式任务描述本任务是制作一个商品秒杀活动页面，通过给展示的商品图片添加超链接，当点击某张图片时，弹出该商品的详细介绍页图8-2-1：商品秒杀活动页面布局代码样式代码任务分析实现思路1使用image标签添加4张图片，并通过CSS设置其位置。2给每张图片添加超链接，并设置其href属性。灵活使用CSS设置超链接样式布局代码样式代码基本语法伪类选择器设置超链接文本：a{属性：属性值}伪类选择器描述a:link{属性：属性值}设置超链接的默认样式，也即正常浏览时的样式a:visited{属性：属性值}设置超链接被点击访问过后的样式a:hover{属性：属性值}设置鼠标划过超链接时的样式a:active{属性：属性值}设置超链接被点击时，也即被激活时的样式，如鼠标单击之后，到鼠标被松开之间的这段时间的样式基础案例操作去除超链接自带的下划线，并设置超链接文本的字体颜色、大小等用法1.设置超链接基本样式布局代码如下：<body><div><ul><li><ahref="">点击！链接到百度首页</a></li><li><ahref="">点击！链接到搜狗首页</a></li><li><ahref="">点击！链接到腾讯首页</a></li></ul></div></body>CSS代码如下：a{text-decoration:none;font-size:30px;color:orange;}基础案例操作通过a:link、a:visited、a:hover、a:active4个伪类选择器设置超链接在不同链接状态下的样式。用法2、设置不同链接状态下的样式布局代码如下：<body><div><ul><li><ahref="">点击！链接到百度首页</a></li><li><ahref="">点击！链接到搜狗首页</a></li><li><ahref="">点击！链接到腾讯首页</a></li></ul></div></body>CSS代码如下：a{text-decoration:none;font-size:30px;}a:link{color:blue;}a:hover{color:red;}a:visited{color:black;}基础案例操作不仅可以给文本添加链接，还可以给图片添加链接，当点击该图片时，链接到目标地址文件。用法3、设置图像链接练一练任务实现布局代码<div><h2>活动秒杀</h2><!--添加图片，并且为图片添加超链接--><ahref="img/link1.png"><imgsrc="img/act11.png"alt=""></a><ahref="img/link2.png"><imgsrc="img/pic11.png"alt=""></a><ahref="img/link3.png"><imgsrc="img/computerArt11.png"alt=""></a><ahref="img/link4.png"><imgsrc="img/tel11.png"alt=""></a><palign="center">点击商品，进入商品详情</p></div>任务描述任务分析任务实现/*页面整体大小和位置*/div{width:1135px;margin:0auto;border:1pxsolidgray;}p{font-size:25px;}CSS样式代码任务描述任务分析任务3案例实现——几何图形的导航菜单任务描述结合列表，通过设置4种伪类样式代码，为文字的超链接添加好看的背景，使网页看起来更具有

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

温馨提示

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

最新文档

评论

0/150

提交评论