仓酷云

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

[DIV+CSS] 来看看:CSS翻页效果,鼠标放上时变更,无需JS

[复制链接]
柔情似水 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:17:27 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
每个声明内只能有一个属性,如果属性值中含有空格用双引号括起来例,在一个声明块内可以有多个声明,每个声明用分号隔开。
破洛洛文章简介:!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtmlxmlns=http://www.w3.org/1999/xhtmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312/titleDIVCSS实例:一款不错
<!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>DIVCSS实例:一款不错的CSS翻页效果(DIGG)</title><styletype="text/css">BODY{FONT-SIZE:12px;FONT-FAMILY:Verdana,Arial,Helvetica,sans-serif;WIDTH:60%;PADDING-LEFT:25px;}DIV.digg{PADDING-RIGHT:3px;PADDING-LEFT:3px;PADDING-BOTTOM:3px;MARGIN:3px;PADDING-TOP:3px;TEXT-ALIGN:center}DIV.diggA{BORDER-RIGHT:#aaaadd1pxsolid;PADDING-RIGHT:5px;BORDER-TOP:#aaaadd1pxsolid;PADDING-LEFT:5px;PADDING-BOTTOM:2px;MARGIN:2px;BORDER-LEFT:#aaaadd1pxsolid;COLOR:#000099;PADDING-TOP:2px;BORDER-BOTTOM:#aaaadd1pxsolid;TEXT-DECORATION:none}DIV.diggA:hover{BORDER-RIGHT:#0000991pxsolid;BORDER-TOP:#0000991pxsolid;BORDER-LEFT:#0000991pxsolid;COLOR:#000;BORDER-BOTTOM:#0000991pxsolid}DIV.diggA:active{BORDER-RIGHT:#0000991pxsolid;BORDER-TOP:#0000991pxsolid;BORDER-LEFT:#0000991pxsolid;COLOR:#000;BORDER-BOTTOM:#0000991pxsolid}DIV.diggSPAN.current{BORDER-RIGHT:#0000991pxsolid;PADDING-RIGHT:5px;BORDER-TOP:#0000991pxsolid;PADDING-LEFT:5px;FONT-WEIGHT:bold;PADDING-BOTTOM:2px;MARGIN:2px;BORDER-LEFT:#0000991pxsolid;COLOR:#fff;PADDING-TOP:2px;BORDER-BOTTOM:#0000991pxsolid;BACKGROUND-COLOR:#000099}DIV.diggSPAN.disabled{BORDER-RIGHT:#eee1pxsolid;PADDING-RIGHT:5px;BORDER-TOP:#eee1pxsolid;PADDING-LEFT:5px;PADDING-BOTTOM:2px;MARGIN:2px;BORDER-LEFT:#eee1pxsolid;COLOR:#ddd;PADDING-TOP:2px;BORDER-BOTTOM:#eee1pxsolid}</style><body><p><ahref="/"_fcksavedurl="/">DiggStyle-websbook.com</a><divclass="digg"><spanclass="disabled"><</span><spanclass="current">1</span><ahref="#?page=2"_fcksavedurl="#?page=2">2</a><ahref="#?page=3"_fcksavedurl="#?page=3">3</a><ahref="#?page=4"_fcksavedurl="#?page=4">4</a><ahref="#?page=5"_fcksavedurl="#?page=5">5</a><ahref="#?page=6"_fcksavedurl="#?page=6">6</a><ahref="#?page=7"_fcksavedurl="#?page=7">7</a>...<ahref="#?page=199"_fcksavedurl="#?page=199">199</a><ahref="#?page=200"_fcksavedurl="#?page=200">200</a><ahref="#?page=2"_fcksavedurl="#?page=2">></a></div></p></body></html>
提醒:您能够先修正部分代码再运转
</p>
样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。
透明 该用户已被删除
沙发
发表于 2015-1-17 21:29:23 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
若相依 该用户已被删除
板凳
发表于 2015-1-25 10:47:22 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
小女巫 该用户已被删除
地板
发表于 2015-2-2 21:54:52 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
5#
发表于 2015-2-8 08:22:13 | 只看该作者
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
兰色精灵 该用户已被删除
6#
发表于 2015-2-25 06:58:36 | 只看该作者
每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。
爱飞 该用户已被删除
7#
发表于 2015-3-7 19:58:23 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
冷月葬花魂 该用户已被删除
8#
发表于 2015-3-15 13:53:28 | 只看该作者
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
谁可相欹 该用户已被删除
9#
发表于 2015-3-22 02:08:59 | 只看该作者
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-12-29 23:58

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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