仓酷云

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

[DIV+CSS] 来一发用CSS制造照片走廊

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

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

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

x
凡是和我讨论客户段效率的全是脑子有问题的,影响的全是图片和Flash,所以我一直建议一个提交按钮就不要用图片带代替了。
CSS代码
  1. 以下是援用片断:#info{position:relative;background:#fffurl(../../updata/pic1b.gif)175px44pxno-repeat;}#scrollbox{width:400px;height:80px;background:#f4f4f4;overflow:auto;border:1pxsolid#aaa;margin-left:175px;margin-top:70px;}a.gallery,a.gallery:visited{display:block;color:#000;ext-decoration:none;border:1pxsolid#000;width:75px;height:47px;margin:3px;float:left;}a.slidea{background:url(../../updata/thumb2.jpg);}a.slideb{background:url(../../updata/thumb3.jpg);}a.slidec{background:url(../../updata/thumb4.jpg);}a.slided{background:url(../../updata/thumb5.jpg);}a.slidee{background:url(../../updata/thumb6.jpg);}a.slidef{background:url(../../updata/thumb7.jpg);}a.slideg{background:url(../../updata/thumb8.jpg);}a.slideh{background:url(../../updata/thumb9.jpg);}a.slidei{background:url(../../updata/thumb10.jpg);}a.slidej{background:url(../../updata/thumb11.jpg);}a.galleryspan{display:block;position:absolute;left:150px;top:-1px;width:1px;height:1px;overflow:hidden;background:#efedec;z-index:100;}a.gallery:hover{white-space:normal;border:1pxsolid#fff;}a.gallery:hoverimg{border:1pxsolid#000;z-index:100;}a.gallery:activeimg,a.gallery:focusimg{border:1pxsolid#000;z-index:50;}a.gallery:hoverspan{display:block;position:absolute;width:402px;height:290px;top:39px;left:170px;padding:5px;font-style:italic;color:#000;background:#fff;z-index:100;}a.gallery:active{border:1pxsolid#eee;}a.gallery:activespan,a.gallery:focusspan{display:block;position:absolute;width:402px;height:290px;top:39px;left:170px;padding:5px;font-style:italic;color:#000;background:#fff;z-index:50;}#thumbs{width:840px;height:60px;}#pad{height:310px;width:100px;}
复制代码
针对IE6
  1. 以下是援用片断:<!--[iflteIE6]><style>#ads{display:none;}#adsie{clear:both;text-align:center;width:750px;margin-top:10px;}</style><![endif]-->
复制代码
XHTML部分
  1. 以下是援用片断:<divid="info"><divid="pad"></div><divclass="slidek"></div><divid="scrollbox"><divid="thumbs"><aclass="galleryslidea"href="#nogo"title="Fishes"><span><span><span><span><span><br/>pic11.jpg<br/>PhotographscourtesyofmorgueFile.com</span></a></div></div>
复制代码
  1. 检察效果:http://www.cssplay.co.uk/menu/scroll_gallery.html
复制代码
</p>
对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。
透明 该用户已被删除
沙发
发表于 2015-1-18 06:19:59 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
分手快乐 该用户已被删除
板凳
发表于 2015-1-23 10:56:21 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
灵魂腐蚀 该用户已被删除
地板
发表于 2015-1-31 16:03:09 | 只看该作者
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
老尸 该用户已被删除
5#
发表于 2015-2-6 21:56:51 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
爱飞 该用户已被删除
6#
发表于 2015-2-19 00:36:50 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
简单生活 该用户已被删除
7#
发表于 2015-3-6 12:08:04 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
8#
发表于 2015-3-13 01:10:29 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
飘飘悠悠 该用户已被删除
9#
发表于 2015-3-20 09:47:51 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-12-23 05:49

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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