CSS教程之网页殊效：用CSS完成的一个字符显现效果

只看该作者 · 发表于 2015-1-16 07:39:52

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

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

x

Table布局灵活性不大，你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。
<!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"/><title>网页殊效代码|http://homepage.yesky.com/|---用CSS完成的一个字符显现效果</title><style>body{font-size:12px;line-height:22px;}#infospan{position:absolute;width:523px;height:275px;top:115px;left:10px;background-image:url(http://www.jscode.cn/Uploadfile/200682485616973.GIF);visibility:hidden;}a:link,a:visited{cursor:default;}a:active,a:hover{cursor:auto;}#hi{visibility:hidden;height:1px;overflow:hidden;}#w01a:hoverspan,#w02a:activespan{background-position:0px0px;visibility:visible;}#w02a:hoverspan,#w03a:activespan{background-position:0px-275px;visibility:visible;}#w03a:hoverspan,#w04a:activespan{background-position:0px-550px;visibility:visible;}#w04a:hoverspan,#w05a:activespan{background-position:0px-825px;visibility:visible;}#w05a:hoverspan,#w06a:activespan{background-position:0px-1100px;visibility:visible;}#w06a:hoverspan,#w07a:activespan{background-position:0px-1375px;visibility:visible;}#w07a:hoverspan,#w08a:activespan{background-position:0px-1650px;visibility:visible;}#w08a:hoverspan,#w09a:activespan{background-position:0px-1925px;visibility:visible;}#w09a:hoverspan,#w10a:activespan{background-position:0px-2200px;visibility:visible;}#w10a:hoverspan,#w11a:activespan{background-position:0px-2475px;visibility:visible;}#w11a:hoverspan,#w12a:activespan{background-position:0px-2750px;visibility:visible;}#w12a:hoverspan,#w13a:activespan{background-position:0px-3025px;visibility:visible;}#infoa{width:44px;height:100px;display:block;background:#cc0000;float:left;}</style></head><body><divid="info"><divid="w01"><ahref="http://homepage.yesky.com/"target="_blank"><span></span></a></div><divid="w02"><ahref="http://homepage.yesky.com/"target="_blank"><span></span></a></div><divid="w03"><ahref="http://homepage.yesky.com/"target="_blank"><span></span></a></div><divid="w04"><ahref="http://homepage.yesky.com/"target="_blank"><span></span></a></div><divid="w05"><ahref="http://homepage.yesky.com/"target="_blank"><span></span></a></div><divid="w06"><ahref="http://homepage.yesky.com/"target="_blank"><span></span></a></div><divid="w07"><ahref="http://homepage.yesky.com/"target="_blank"><span></span></a></div><divid="w08"><ahref="http://homepage.yesky.com/"target="_blank"><span></span></a></div><divid="w09"><ahref="http://homepage.yesky.com/"target="_blank"><span></span></a></div><divid="w10"><ahref="http://homepage.yesky.com/"target="_blank"><span></span></a></div><divid="w11"><ahref="http://homepage.yesky.com/"target="_blank"><span></span></a></div><divid="w12"><ahref="http://homepage.yesky.com/"target="_blank"><span></span></a></div></div><p>鼠标移到白色上边动一动</p><divid="hi"><imgsrc="http://www.jscode.cn/Uploadfile/200682485616973.GIF"alt=""/></div></body></html>
</p>
所有的设计第一步就是构思，构思好了。

只看该作者 · 发表于 2015-1-18 06:46:16

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

只看该作者 · 发表于 2015-1-25 13:49:24

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

只看该作者 · 发表于 2015-2-2 22:20:46

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

只看该作者 · 发表于 2015-2-8 15:06:51

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

只看该作者 · 发表于 2015-2-25 20:19:31

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

只看该作者 · 发表于 2015-3-8 05:10:44

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

只看该作者 · 发表于 2015-3-22 16:54:19

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] CSS教程之网页殊效：用CSS完成的一个字符显现效果

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

相关帖子