css系列-看过之后让我~~~
昨天,lwh给我一个css的demo,让我看,刚开始看了之后,不屑,不就是一个js特效吗,但他给我说是纯粹的css样式,我吃了一惊,其中的内涵,还是请网友体会啊!,我就先把他给我的一个demo,给大家贴出来了..(难道真的是我功夫不到家,悲哀~~~~~~~~~)
<style>
body{
margin:0;
padding:0;
font-size:12px;
line-height:1.7;
font-family:Verdana, "宋体";
overflow:hidden;
}
#info{
width:600px;
background: #666666;
margin-left:auto;
margin-right:auto;
text-align:center;
border:1px solid #FFFFFF;
height:400px;
margin-top:20px;}
h1{
margin:20px 0 0 0;
color:#CC0000;
font-size:24px;
color:#FFF;
}
ul,li
{
list-style:none;
margin:0;
padding:0;
}
a:active,a:hover
{
cursor:pointer
}
#info #zs img
{
width:400px;
height:280px;
border:1px solid #FFF;
}
#zs
{
height:360px;
overflow: hidden;
text-align:left;
float:left;
width:450px;
margin-top:20px
}
#zs ul
{
margin:0 0 0 30px;
}
#zs span
{
display:block
}
#zs a
{
display:inline
}
#nav
{
padding-right:10px;
width:135px;
height:350px;
overflow:auto;
padding:0;
text-align:left;
float:left;
}
#nav a
{
display:block
}
.z{
width:80px;
height:56px;
display:block;
border:1px solid #FFFFFF;
margin:4px 0 4px 25px;
color:#FFF
}
.b1{ background:url(a1.jpg)}
.b2{ background:url(a2.jpg)}
.b3{ background:url(a3.jpg)}
.b4{ background:url(a4.jpg)}
.b5{ background:url(a5.jpg)}
#zs li{ display:block; height:400px;}
</style>
<div id="info">
<h1>42342314</h1>
<div id="zs">
<ul>
<li>
<a name="z1" id="z1"></a><img src="a1.jpg" alt="照片1" /><br />照片1
<span><a href="#" target="_blank">34214324432</a></span>
</li>
<li>
<a name="z2" id="z2"></a><img src="a2.jpg" alt="照片2" /><br />照片2
<span><a href="#" target="_blank">431234</a></span>
</li>
<li>
<a name="z3" id="z3"></a><img src="a3.jpg" alt="照片3" /><br />照片3
<span><a href="#" target="_blank">www.865171.cn</a></span>
</li>
<li>
<a name="z4" id="z4"></a><img src="a4.jpg" alt="照片4" /><br />照片4
<span><a href="#" target="_blank">2341414</a></span>
</li>
<li>
<a name="z5" id="z5"></a><img src="a5.jpg" alt="照片5" /><br />照片5
<span><a href="#" target="_blank">432141234213</a></span>
</li>
</ul>
</div>
<div id="nav">
<a href="#z1" class="b1 z" title="照片1"></a>
<a href="#z2" class="b2 z" title="照片2"></a>
<a href="#z3" class="b3 z" title="照片3"></a>
<a href="#z4" class="b4 z" title="照片4"></a>
<a href="#z5" class="b5 z" title="照片5"></a>
</div>
</div>
body{
margin:0;
padding:0;
font-size:12px;
line-height:1.7;
font-family:Verdana, "宋体";
overflow:hidden;
}
#info{
width:600px;
background: #666666;
margin-left:auto;
margin-right:auto;
text-align:center;
border:1px solid #FFFFFF;
height:400px;
margin-top:20px;}
h1{
margin:20px 0 0 0;
color:#CC0000;
font-size:24px;
color:#FFF;
}
ul,li
{
list-style:none;
margin:0;
padding:0;
}
a:active,a:hover
{
cursor:pointer
}
#info #zs img
{
width:400px;
height:280px;
border:1px solid #FFF;
}
#zs
{
height:360px;
overflow: hidden;
text-align:left;
float:left;
width:450px;
margin-top:20px
}
#zs ul
{
margin:0 0 0 30px;
}
#zs span
{
display:block
}
#zs a
{
display:inline
}
#nav
{
padding-right:10px;
width:135px;
height:350px;
overflow:auto;
padding:0;
text-align:left;
float:left;
}
#nav a
{
display:block
}
.z{
width:80px;
height:56px;
display:block;
border:1px solid #FFFFFF;
margin:4px 0 4px 25px;
color:#FFF
}
.b1{ background:url(a1.jpg)}
.b2{ background:url(a2.jpg)}
.b3{ background:url(a3.jpg)}
.b4{ background:url(a4.jpg)}
.b5{ background:url(a5.jpg)}
#zs li{ display:block; height:400px;}
</style>
<div id="info">
<h1>42342314</h1>
<div id="zs">
<ul>
<li>
<a name="z1" id="z1"></a><img src="a1.jpg" alt="照片1" /><br />照片1
<span><a href="#" target="_blank">34214324432</a></span>
</li>
<li>
<a name="z2" id="z2"></a><img src="a2.jpg" alt="照片2" /><br />照片2
<span><a href="#" target="_blank">431234</a></span>
</li>
<li>
<a name="z3" id="z3"></a><img src="a3.jpg" alt="照片3" /><br />照片3
<span><a href="#" target="_blank">www.865171.cn</a></span>
</li>
<li>
<a name="z4" id="z4"></a><img src="a4.jpg" alt="照片4" /><br />照片4
<span><a href="#" target="_blank">2341414</a></span>
</li>
<li>
<a name="z5" id="z5"></a><img src="a5.jpg" alt="照片5" /><br />照片5
<span><a href="#" target="_blank">432141234213</a></span>
</li>
</ul>
</div>
<div id="nav">
<a href="#z1" class="b1 z" title="照片1"></a>
<a href="#z2" class="b2 z" title="照片2"></a>
<a href="#z3" class="b3 z" title="照片3"></a>
<a href="#z4" class="b4 z" title="照片4"></a>
<a href="#z5" class="b5 z" title="照片5"></a>
</div>
</div>
大家只需要把他存为 *.html,,运行即可,但是图片需要大家该下哦!
结果今天,我与lwh 交流了一下,,原来是这个原因
这是我今天做的demo
<!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>
<style type="text/css">
body {
margin-right: auto;
margin-left: auto;
border-width: 0px;
}
ul,li{
list-style:none;
}
#main {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#left {
height: 200px;
width: 310px;
overflow: hidden;
float: left;
margin: 20px;
display: inline;
}
#left ul li {
height: 200px;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
}
#right {
float: left;
width: 100px;
padding-top: 25px;
}
#right ul li {
margin-top: 5px;
margin-bottom: 15px;
}
img{
display:block;
cursor:pointer;
border-width:0px;
}
</style>
</head>
<body>
<div id="main">
<div id="left">
<ul>
<li><img name="#link1" src="banner.jpg" alt="01" width="300" height="200" /></li>
<li><img name="#link2" src="hei_man.jpg" alt="02" width="300" height="200" /></li>
<li><img name="#link3" src="phone_img.jpg" alt="03" width="300" height="200" /></li>
</ul>
</div>
<div id="right">
<ul>
<li><a href="#link1"><img src="banner.jpg" alt="01" width="80" height="50" /></a></li>
<li><a href="#link2"><img src="hei_man.jpg" alt="02" width="80" height="50" /></a></li>
<li><a href="#link3"><img src="phone_img.jpg" alt="03" width="80" height="50" /></a></li>
</ul>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>练习</title>
<style type="text/css">
body {
margin-right: auto;
margin-left: auto;
border-width: 0px;
}
ul,li{
list-style:none;
}
#main {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#left {
height: 200px;
width: 310px;
overflow: hidden;
float: left;
margin: 20px;
display: inline;
}
#left ul li {
height: 200px;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
}
#right {
float: left;
width: 100px;
padding-top: 25px;
}
#right ul li {
margin-top: 5px;
margin-bottom: 15px;
}
img{
display:block;
cursor:pointer;
border-width:0px;
}
</style>
</head>
<body>
<div id="main">
<div id="left">
<ul>
<li><img name="#link1" src="banner.jpg" alt="01" width="300" height="200" /></li>
<li><img name="#link2" src="hei_man.jpg" alt="02" width="300" height="200" /></li>
<li><img name="#link3" src="phone_img.jpg" alt="03" width="300" height="200" /></li>
</ul>
</div>
<div id="right">
<ul>
<li><a href="#link1"><img src="banner.jpg" alt="01" width="80" height="50" /></a></li>
<li><a href="#link2"><img src="hei_man.jpg" alt="02" width="80" height="50" /></a></li>
<li><a href="#link3"><img src="phone_img.jpg" alt="03" width="80" height="50" /></a></li>
</ul>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
我这个代码,相信各位一看就知道其中的内涵了吧!
