锚接 css,css锚点链接简单实现点击更换内容的方法

原文 http://www.sharedblog.cn/?post=65

CSS代码

*{

margin: 0;

padding: 0;

}

.box{

width: 360px;

height: 140px;

border: 10px solid #a7a6a6;

}

.box_one{

width: 300px;

height: 140px;

float: left;

overflow: hidden;

background: #fff;

}

.box_two{

width: 60px;

height: 140px;

float: right;

z-index: 2;

text-align: center;

}

.box_two a{

width: 60px;

height: 46px;

display: block;

background: black;

color: #fff;

line-height: 46px;

text-decoration: none;

border-bottom: 1px solid #fff;

}

.box_two .box_three{

border-bottom: none;

}

.box_two a:hover{

background: red;

}

.uls{

width: 300px;

height: 140px;

list-style: none;

padding: 10px;

background: url(img/jiant.gif) no-repeat;

}

.uls li{

background: url(img/icon.jpg) no-repeat left center;

padding-left: 20px;

line-height: 20px;

font-size: 12px;

}

#uls_one{

background-position: 247px 15px;

}

#uls_two{

background-position: 247px 62px;

}

#uls_three{

background-position: 247px 111px;

}

HTML代码

• 娱乐娱乐娱乐娱乐
• 娱乐娱乐娱乐娱乐
• 娱乐娱乐娱乐娱乐
• 娱乐娱乐娱乐娱乐
• 娱乐娱乐娱乐娱乐
• 娱乐娱乐娱乐娱乐

• 羽毛球羽毛球羽毛球
• 羽毛球羽毛球羽毛球
• 羽毛球羽毛球羽毛球
• 羽毛球羽毛球羽毛球
• 羽毛球羽毛球羽毛球
• 羽毛球羽毛球羽毛球

• 新闻新闻新闻新闻
• 新闻新闻新闻新闻
• 新闻新闻新闻新闻
• 新闻新闻新闻新闻
• 新闻新闻新闻新闻
• 新闻新闻新闻新闻

娱乐

体育

新闻