来一发用CSS制造照片走廊

只看该作者 · 发表于 2015-1-16 00:22:31

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

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

x

凡是和我讨论客户段效率的全是脑子有问题的，影响的全是图片和Flash，所以我一直建议一个提交按钮就不要用图片带代替了。
CSS代码

以下是援用片断：#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

以下是援用片断：

复制代码

XHTML部分

以下是援用片断：<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>

复制代码

检察效果：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站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。