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 >

 

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