仓酷云

标题: 来一发用CSS制造照片走廊 [打印本页]

作者: 再见西城    时间: 2015-1-16 00:22
标题: 来一发用CSS制造照片走廊
凡是和我讨论客户段效率的全是脑子有问题的,影响的全是图片和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
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
作者: 分手快乐    时间: 2015-1-23 10:56
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
作者: 灵魂腐蚀    时间: 2015-1-31 16:03
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
作者: 老尸    时间: 2015-2-6 21:56
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
作者: 爱飞    时间: 2015-2-19 00:36
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
作者: 简单生活    时间: 2015-3-6 12:08
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
作者: 仓酷云    时间: 2015-3-13 01:10
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
作者: 飘飘悠悠    时间: 2015-3-20 09:47
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。




欢迎光临 仓酷云 (http://ckuyun.com/) Powered by Discuz! X3.2