AI专业者开发社区 1 号成员
  •  0 回帖  •  3 浏览  •  4 个月前
 

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>

 

 大家只需要把他存为 *.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>

 

 我这个代码, 相信各位一看就知道其中的内涵了吧!