CSS:CSS基础之六
2008-03-28 17:17
465 查看
PHOTO.HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>装潢图片展览</title>
<link href="photos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="info">
<h3>装潢图片展览</h3>
<div id="zs">
<ul>
<li><a href="#" title="照片1" target="_blank" class="b1 z"><span><img src="jpg/zh0001.jpg" alt=="照片1" /><br/>
这是照片1</span></a>
</li>
<li><a href="#" title="照片2" target="_blank" class="b2 z"><span><img src="jpg/zh0002.jpg" alt=="照片2"/><br/>
这是照片2</span></a>
</li>
<li><a href="#" title="照片3" target="_blank" class="b3 z"><span><img src="jpg/zh0003.jpg" alt=="照片3"/><br/>
这是照片3</span></a>
</li>
<li><a href="#" title="照片4" target="_blank" class="b4 z"><span><img src="jpg/zh0004.jpg" alt=="照片4"/><br/>
这是照片4</span></a>
</li>
<li><a href="#" title="照片5" target="_blank" class="b5 z"><span><img src="jpg/zh0005.jpg" alt=="照片5"/><br/>
这是照片5</span></a>
</li>
<li><a href="#" title="照片6" target="_blank" class="b6 z"><span><img src="jpg/zh0006.jpg" alt=="照片6"/><br/>
这是照片6</span></a>
</li>
</ul>
</div>
</div>
</body>
</html>
PHOTO.CSS
* {
margin:0;
padding:0;
}
body{
font-size:12px;
line-height:1.7;
font-family:Verdana, "宋体";
overflow:hidden;
background-color: #004200;
}
#info{
width:600px;
margin-left:auto;
margin-right:auto;
text-align:center;
border:1px solid #FFFFFF;
height:450px;
margin-top:20px;
background-color: #003300;
}
h3{ margin:30px 0 0 0; color:#CC0000; font-size:16px;color:#FFF}
a span{visibility:hidden; position:absolute; overflow:hidden;}
a:active,a:hover{ cursor:pointer}
a:hover span,a:active span{position:absolute; top:90px; z-index:20px; visibility: visible; margin-left:-500px;}
ul,li{ list-style:none; margin:0; padding:0;}
#info img{
width:400px;
height:280px;
border:5px solid #FFFFFF;
padding: 1px;
}
/*可能出现垂直滚动条*/
#zs{ height:340px; overflow: auto; width:140px; float:right; margin-top:20px; margin-bottom:50px;}
/*将类Z与B1等分离*/
.z{ width:80px; height:56px;display:block; border:1px solid #FFFFFF; margin:4px 0 4px 25px;color:#FFF;}
.b1{
background-image: url(jpg/zh0001z.jpg);
}
.b2{
background-image: url(jpg/zh0002z.jpg);
}
.b3{
background-image: url(jpg/zh0003z.jpg);
}
.b4{
background-image: url(jpg/zh0004z.jpg);
}
.b5{
background-image: url(jpg/zh0005z.jpg);
}
.b6{
background-image: url(jpg/zh0006z.jpg);
}
效果演示如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>装潢图片展览</title>
<link href="photos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="info">
<h3>装潢图片展览</h3>
<div id="zs">
<ul>
<li><a href="#" title="照片1" target="_blank" class="b1 z"><span><img src="jpg/zh0001.jpg" alt=="照片1" /><br/>
这是照片1</span></a>
</li>
<li><a href="#" title="照片2" target="_blank" class="b2 z"><span><img src="jpg/zh0002.jpg" alt=="照片2"/><br/>
这是照片2</span></a>
</li>
<li><a href="#" title="照片3" target="_blank" class="b3 z"><span><img src="jpg/zh0003.jpg" alt=="照片3"/><br/>
这是照片3</span></a>
</li>
<li><a href="#" title="照片4" target="_blank" class="b4 z"><span><img src="jpg/zh0004.jpg" alt=="照片4"/><br/>
这是照片4</span></a>
</li>
<li><a href="#" title="照片5" target="_blank" class="b5 z"><span><img src="jpg/zh0005.jpg" alt=="照片5"/><br/>
这是照片5</span></a>
</li>
<li><a href="#" title="照片6" target="_blank" class="b6 z"><span><img src="jpg/zh0006.jpg" alt=="照片6"/><br/>
这是照片6</span></a>
</li>
</ul>
</div>
</div>
</body>
</html>
PHOTO.CSS
* {
margin:0;
padding:0;
}
body{
font-size:12px;
line-height:1.7;
font-family:Verdana, "宋体";
overflow:hidden;
background-color: #004200;
}
#info{
width:600px;
margin-left:auto;
margin-right:auto;
text-align:center;
border:1px solid #FFFFFF;
height:450px;
margin-top:20px;
background-color: #003300;
}
h3{ margin:30px 0 0 0; color:#CC0000; font-size:16px;color:#FFF}
a span{visibility:hidden; position:absolute; overflow:hidden;}
a:active,a:hover{ cursor:pointer}
a:hover span,a:active span{position:absolute; top:90px; z-index:20px; visibility: visible; margin-left:-500px;}
ul,li{ list-style:none; margin:0; padding:0;}
#info img{
width:400px;
height:280px;
border:5px solid #FFFFFF;
padding: 1px;
}
/*可能出现垂直滚动条*/
#zs{ height:340px; overflow: auto; width:140px; float:right; margin-top:20px; margin-bottom:50px;}
/*将类Z与B1等分离*/
.z{ width:80px; height:56px;display:block; border:1px solid #FFFFFF; margin:4px 0 4px 25px;color:#FFF;}
.b1{
background-image: url(jpg/zh0001z.jpg);
}
.b2{
background-image: url(jpg/zh0002z.jpg);
}
.b3{
background-image: url(jpg/zh0003z.jpg);
}
.b4{
background-image: url(jpg/zh0004z.jpg);
}
.b5{
background-image: url(jpg/zh0005z.jpg);
}
.b6{
background-image: url(jpg/zh0006z.jpg);
}
效果演示如下:
相关文章推荐
- 通用基础CSS代码
- HTML&CSS&DIV基础<2>
- html+css+js基础学习
- Web前端开发基础 第四课(CSS文字和段落排版)
- 在慕课上学习的,HTML和CSS基础学习笔记8
- CSS里的各种水平垂直居中基础写法心得总结
- CSS 基础
- HTML&CSS基础学习笔记1.22-表单的文本域和下拉列表
- DAY50 CSS基础2
- 从基础开始:CSS实用教程(三)
- CSS基础
- CSS基础学习:不同色链接和其下划线
- CSS基础—表格的样式
- HTML基础:DIV+CSS常见面试题
- div+css基础知识(1)
- 网页开发基础知识 HTML + CSS
- CSS基础学习:样式表CSS简明教程
- (1)CSS基础
- CSS基础
- CSS里的各种水平垂直居中基础写法心得分享(附内联元素,块级元素的基本概念)