用户名: 密码: 验证码:           网站地图  高级搜索  RSS订阅  收藏本站
您的位置:主页 > 网页制作 > DIV+CSS >

子鼠相册-V3.0 -DIV CSS

[ 来源:中国设计秀 | 作者: | 更新日期:2008-3-21 09:47:50 | 人气: | 评论 0 条 ]
这又是一个相册的效果,比起前两个似乎是好看了一样!这一次作的这个本来是想多作几页了,但作到第二页时,发现CSS这样写有问题,所

以这次只有二页,有空时我再重写一下CSS,就可以支持无数页之间的切换了。



首先,我先用FW简单画了一张效果图,这样,我就可以看全局效果,和第一处的颜色了,而且尺寸我都是在画图是计算好了。

按此在新窗口打开图片

<b>以下是全部的CSS</b>

程序代码
<style> 文章来源于www.hot007.com
/*初始化几个要用的标签*/
*{ padding:0; margin:0; list-style:none;}
body{ line-height:1.7; font-size:12px; font-family:Verdana, Arial, "宋体"; margin:10px; color:#6F9C21}
h1,h3{font-size:14px; font-family:"黑体"; color:#517317;}
h1{line-height:45px; background:#84B726; padding-left:14px; color:#517317;}
h2{font-size:12px;color:#fff; text-align:center;background:#95CC2D; border-bottom:1px solid #84B726;}
img{display:block;}

/*全局链接样式*/
a:link,a:visited{color:#6D9C1F;text-decoration:none;}
a:hover,a:active{color:#fff;text-decoration:none;}

/*常用的三个样式*/
.l{ float:left;}
.r{ float:right; }
.c{ clear:both; overflow:hidden; height:0;}

/*全局框架用*/
#pic{ background:#B5DF63; width:600px; height:450px; border-left:3px solid #3B8C54; border-right:3px solid #8CC128;

overflow:hidden}
.main{width:365px; }
.sidebar{width:210px; float:right;height:360px;overflow:hidden}
.pager{clear:both;}
文章来源于www.hot007.com


/*第一页的非凡处理*/
#yan{ padding:160px 0 0 50px;}
#kai{background:#3B8C54; width:150px;margin:160px 0 0 70px; padding-left:10px; overflow:hidden}
#kai img{ display:block; border-left:2px solid #B5DF63; padding:20px;}

/*相册正式开始*/
.pic{height:450px;}
.main li { text-align:center; float:left; width:120px; margin-top:10px;}
.main li span{padding:5px;display:block; margin:auto}
.main li img{ width:90px; height:65px; display:block;border:1px solid #A5D845;; padding:5px; margin:0 auto;

background:#FFFFFF}
/*照片上的链接样式*/
a:link span,a:visited span{border:1px solid #B5DF63; background:#B5DF63}
a:hover span,a:active span{ background:#95CC2D; border:1px solid #84B726; border-top:1px solid #FFF;border-left:1px

solid #FFF}

.sidebar img{padding:5px;}
.sidebar p{padding:5px 15px;}
.sidebar span{background:#95CC2D;display:block;border-top:1px solid #fff;}
.sidebar li{ height:600px;}
.sidebar{ border:1px solid #A5D845; border-top:none; padding:0 1px 1px 1px;background:#Fff; margin:15px 5px; } 复制于hot007.com

</style>




点击下边的运行就可以看到效果了!

www.jc567.cn


文章来源于www.jc567.cn

·用户发表意见仅代表其个人意见,并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯,提倡就事论事,杜绝漫骂和人身攻击等不文明行为