仓酷云

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

[DIV+CSS] 来一发ul分离CSS制造网页相册滑动扫瞄效果

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

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

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

x
最新版本html5+CSS3与2014年10月29日,万维网联盟宣布,经过几乎8年的艰辛努力,该标准规范终于最终制定完成。
英文原文:SlidingPhotographGalleries
翻译收拾:西米CC-www.ximicc.com
效果
运转代码框
<!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>别具一格纯CSS完成相册预览ximicc.com</title><styletype="text/css">body{font-size:12px;color:#CC0000;}p{background-color:#F1FAFE;}#gallery{width:495px;height:240px;border:1pxsolid#888;margin:0auto;padding:0;list-style:none;background:#fffurl(/files/080628/1_133958.gif);}#galleryli{float:left;}#gallerylia{display:block;width:28px;height:240px;border-right:#fff1pxsolid;overflow:hidden;cursor:default;}#galleryliaimg{border:0;}#gallerylia:hover{width:320px;}#gallery2{margin:0auto;padding:0;list-style-type:none;overflow:hidden;width:572px;height:238px;border:1pxsolid#000;background:#fffurl(/files/080628/1_134055.gif);}#gallery2li{float:left;}#gallery2lia{display:block;height:30px;width:572px;float:left;overflow:hidden;text-decoration:none;border-bottom:1pxsolid#000;cursor:default;}#gallery2liaimg{border:0;}#gallery2lia:hover{background:#eee;height:144px;}#gallery2lia:hoverimg{height:144px;}--></style></head><body><ulid="gallery2"><li><ahref="http://ximicc.com"><p><br/><strong>原文地点:<ahref="http://www.cssplay.co.uk/menu/gallery3l"target="_blank">SlidingPhotographGalleries</a></strong><br/><br/><strong>翻译收拾:<ahref="http://ximicc.com"target="_blank">西米CCwww.ximicc.com</a></strong><br/><br/></p><br/></div><ulid="gallery"><li><ahref="http://ximicc.com"></a></li>
</ul>
在ul中我们只使用了一个名为gallery的款式,接上去的CSS都将针对#gallery及其上级元素举行界说。本例中的相册图片都有不异的尺寸320
海妖 该用户已被删除
沙发
发表于 2015-1-18 05:31:53 | 只看该作者
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
乐观 该用户已被删除
板凳
发表于 2015-1-25 21:31:48 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
蒙在股里 该用户已被删除
地板
发表于 2015-2-4 07:09:54 | 只看该作者
可以使用 CSS 检查工具进行设计。
因胸联盟 该用户已被删除
5#
发表于 2015-2-9 18:42:32 | 只看该作者
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
透明 该用户已被删除
6#
发表于 2015-2-27 17:35:21 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
分手快乐 该用户已被删除
7#
发表于 2015-3-9 12:38:23 | 只看该作者
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
不帅 该用户已被删除
8#
发表于 2015-3-17 00:07:54 | 只看该作者
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
小女巫 该用户已被删除
9#
发表于 2015-3-23 09:24:39 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-12-29 07:34

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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