仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 694|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来一发CSS实例:鼠标滑过笔墨超等链接背景变色

[复制链接]
飘灵儿 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 07:37:54 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
有了CSS,我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题,改变字体颜色,字体样式等等
破洛洛文章简介:CSS实例:鼠标滑过笔墨超等链接背景变色.
效果以下图



要完成这个效果。很复杂。界说CSS款式

a:hover{
background:#f29901;
}


这段代码的显现效果以下图


明显,如许太丑了。

只必要再加上一句
a:hover{
background:#f29901;
display:block;
}

便可如最终效果所示,当鼠标挪动到超链接上的时分,全部li元素背景变色。

但是如许另有一个成绩,鼠标必需挪动到笔墨下面才干触发a:hover效果。
假如想要鼠标挪动到元素li上的时分,就触发a:hover效果。能够如许写

a{
width:130px;
/*li元素的宽度,也就是相称于界说了一个宽度局限,当鼠标挪动到下面的局限的时分就触发a:hover效果*/
}

a:hover{
background:#f29901;
display:block;
}

上面附上完全例子代码:

html代码:
<ulid="content">
<li><ahref="javascript:;">导航菜单1</a></li>
<li><ahref="javascript:;">导航菜单2</a></li>
<li><ahref="javascript:;">导航菜单3</a></li>
<li><ahref="javascript:;">导航菜单4</a></li>
<li><ahref="javascript:;">导航菜单5</a></li>
<li><ahref="javascript:;">导航菜单6</a></li>
</ul>

css代码:
#content{}
#contentli{
line-height:30px;
text-align:center;
color:#fff;
display:block;
background:#333;
width:100px;
}
#contentlia{
display:block;
float:right;
background:#333;
width:100px;
color:#fff;
text-decoration:none;
}
#contentlia:hover{
color:#000;
background:#fff;
}


成绩固然小,可是经由本人研讨办理印象加倍深入

最新版本html5+css3与2014年10月29日,万维网联盟宣布,经过几乎8年的艰辛努力,该标准规范终于最终制定完成。
金色的骷髅 该用户已被删除
沙发
发表于 2015-1-18 06:42:30 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
飘飘悠悠 该用户已被删除
板凳
发表于 2015-1-25 17:00:32 | 只看该作者
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
地板
发表于 2015-2-3 12:03:21 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
谁可相欹 该用户已被删除
5#
发表于 2015-2-8 22:45:13 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
精灵巫婆 该用户已被删除
6#
发表于 2015-2-26 13:36:34 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
灵魂腐蚀 该用户已被删除
7#
发表于 2015-3-8 15:29:42 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
不帅 该用户已被删除
8#
发表于 2015-3-16 04:55:40 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
海妖 该用户已被删除
9#
发表于 2015-3-22 20:12:50 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 17:40

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表