联系我们
加入收藏
设为首页
首页
网站编程
asp语言
php语言
java语言
.net语言
javascript
CSS+DIV
HTML
软件开发
.net开发
java开发
xml技术
批处理
数据库
access
sqlserver
mysql
oracle
其它
程序插件
编辑器插件
播放器插件
Jquery相关
其它插件
开发工具
编程工具
插件中心
其它工具
帮助教程
电脑百科
系统安全
应用技巧
电脑知识
电脑硬件
系统优化
WEB 经验
我要投稿
css制作一款相册 - CSS+DIV -
您当前的位置:
首页
>
网站编程
>
CSS+DIV
>
css制作一款相册
时间:2013-04-11 12:44:56 来源: 评论:
加载中...
点击:
加载中...
body{font:12pxGeorgia,'TimesNewRoman',Times,serif;text-align:center;background:#9c9a9c;}img{border:0;}h1{background:#638AAD;font-size:14px;color:#fff;font-weight:bold;padding:5px0;}#one{margin:10pxau...
body{font:12px Georgia, 'Times New Roman', Times, serif; text-align:center;
background:#9c9a9c;}
img{border:0;}
h1{background:#638AAD;
font-size:14px; color:#fff;
font-weight:bold;
padding:5px 0;}
#one{ margin:10px auto; list-style:none; background:url(../images/photo_06.jpg) no-repeat; width:595px; height:300px; overflow:auto; }
#one li{ float:left; display:block; border-right:1px solid #000; }
a{ display:block; text-decoration:none; cursor:default; margin:0; }
#one a:link,#one a:visited{ width:30px; height:300px; overflow:hidden; }
#one a:link img{ width:30px; height:300px; border:0;}
#one a:hover{ width:436px; height:300px; }
#one a:hover img{ width:436px;}
#two{ margin:10px auto; width:436px; height:425px; list-style:none; background:url(../images/photo_07.jpg); display:block;}#two li{ display:block; border-bottom:1px solid #000; margin-top:0 !important; margin-top:-3px; }#two a:link,#two a:visited{ width:436px; height:30px; overflow:hidden; }#two a:link img{ width:436px; height:30px; display:inline; }#two a:hover{ height:300px; width:436px; }#two a:hover img{ height:300px;}#back{ margin:10px auto;}#back a{ width:40px; cursor:pointer; padding:5px 0; margin: 0 0 0 480px !important; margin:0;}#back a:link,#back a:visited{ background:#dedfce; color:#4b648c; }#back a:hover{ color:#cc3300;}
列型
<
ul
id
="one"
><
li
><
a
href
="#"
>
<
img
src
="../images/photo_01.jpg"
alt
=""
/></
a
></
li
>
<
li
><
a
href
="#"
><
img
src
="../images/photo_02.jpg"
alt
=""
/></
a
></
li
>
<
li
><
a
href
="#"
><
img
src
="../images/photo_03.jpg"
alt
=""
/></
a
></
li
>
<
li
><
a
href
="#"
><
img
src
="../images/photo_04.jpg"
alt
=""
/></
a
></
li
>
<
li
><
a
href
="#"
><
img
src
="../images/photo_05.jpg"
alt
=""
/></
a
></
li
></
ul
>
树型
<
ul
id
="two"
><
li
><
a
href
="#"
><
img
src
="../images/photo_01.jpg"
alt
=""
/></
a
></
li
>
<
li
><
a
href
="#"
><
img
src
="../images/photo_02.jpg"
alt
=""
/></
a
></
li
>
<
li
><
a
href
="#"
><
img
src
="../images/photo_03.jpg"
alt
=""
/></
a
></
li
>
<
li
><
a
href
="#"
><
img
src
="../images/photo_04.jpg"
alt
=""
/></
a
></
li
>
<
li
><
a
href
="#"
><
img
src
="../images/photo_05.jpg"
alt
=""
/></
a
></
li
></
ul
>
相关热词搜索:
收
藏
到
网
摘
:
上一篇:
图片在已知大小容器中的水平垂直居中实例
下一篇:
创建自定义代码片段 提高CSS布局开发效率
收藏
将此文推荐给朋友
分享到:
推荐资讯
频道总排行
彻底弄懂CSS盒子模式之一
超级漂亮的表格:彩色背景
图片在显示一定的时间后消失
彻底弄懂CSS盒子模式之五
彻底弄懂CSS盒子模式之二
CSS实现当前页的滑动门菜单效果方法
彻底弄懂CSS盒子模式之三
Web标准化制作:利用CSS按比例缩小图片
问与答:CSS层叠样式表最佳入门教程
CSS实现导航条图片的翻转菜单
本频道月排行
网页设计基本配色参考色谱——热带
网页制作入门教程:关于css样式表
用CSS实现动态显示的五角星级效果
网页特效:随滚动条移动的DIV层
评论排行
zend studio 11.0.0 ...
(7)
Myeclipse 2013 注册破...
(2)
用户体验部门面临的问题
(1)
京东商城最新LOGO 是条狗
(1)
一纸文书责令关站:论坛...
(1)
利用ASP和Access数据库制...
(1)
小败局:“价格屠夫”尼...
(1)
高手传经:学习PHP重在坚持
(1)
“狗币”一炮走红:因笑...
(1)
Navicat Premium 11.0....
(1)