百度选车

weballan001

浏览: 26715 次
性别:
来自: 郑州

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

工作记录
css
html

百度选车频道上线，朋友推荐了这个效果，觉的蛮不错的，就想着格式化做了一下，百度是运用mpa标签配合JS来实现的，我运用的是A标签的实现。

您可以狠狠地点击这里：百度选车demo

html标签和js事件句柄都没有做出适当的优化~~~~

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>让懂车的人帮你选车</title>
<style type="text/css" >
*{margin:0;padding:0;}
body{font-family:\5B8B\4F53,Tahoma,Arial Narrow,arial,serif;font-size:12px;color:#000;line-height:1.5em;background:#fff;padding-top:100px;}
a:link,a:visited,a:hover,a:active{color:#fff;text-decoration:none;}
.main{margin:0 auto;width:978px;height:165px;border:1px #DFE5E7 solid;text-align:center;background:url(http://xuanche.baidu.com/static/cms/images/banner.jpg) no-repeat center;position:relative;}
.single{position:absolute;}
.single a{width:100%;height:100%;display:none;position:absolute;left:-3px;}
.single a span{position:absolute;bottom:-20px;left:0;width:100%;height:20px;line-height:20px;background:#AE0D00;color:#fff;text-align:center;display:block;border:3px #AE0D00 solid;box-shadow:3px 2px 3px #A0A0A0;}
.show{border:3px #AE0D00 solid;cursor:pointer;box-shadow:3px 2px 3px #A0A0A0;}
.show a{display:block;z-index:99;}
.caraa{left:5px;top:4px;width:203px;height:151px;}
.carbb{left:209px;top:4px;width:101px;height:101px;}
.carcc{left:260px;top:106px;width:101px;height:50px;}
.cardd{left:362px;top:4px;width:101px;height:50px;}
.caree{left:362px;bottom:3px;width:152px;height:102px;}
.carff{left:515px;top:4px;width:101px;height:101px;}
.cargg{left:515px;bottom:3px;width:101px;height:50px;}
.carhh{left:719px;top:4px;width:101px;height:50px;}
.carii{left:821px;top:4px;width:145px;height:102px;}
.carjj{left:872px;bottom:3px;width:94px;height:50px;}
.maintext{position:absolute;width:50px;height:50px;line-height:50px;text-align:center;z-index:1;}
.maintext p{font-family:"微软雅黑";font-size:19px;font-weight:bold;color:#BBBFC1;}
.maintext p span{font-size:14px;}
.fuel{left:312px;top:58px;}
.power{left:620px;top:7px;}
.control{left:824px;top:109px;}
.include{position:absolute;left:620px;top:58px;width:203px;height:80px;padding-top:20px;}
.include p{font-size:14px;font-family:"微软雅黑";font-weight:bold;color:#BBBFC1;line-height:30px;}
.include p span{font-size:18px;font-family:Arial,Tahoma,sans-serif;color:#fff;}
</style>
</head>

<body>
<!--主体开始-->
<div class="main">
	<!--起亚开始-->
	<div class="single caraa" onmouseover="this.className='single caraa show'" onmouseout="this.className='single caraa'" >
		<a href="#" target="_blank" >
			<span>起亚K5</span>
		</a>
	</div>
	<!--起亚结束-->
	
	<!--英郎开始-->
	<div class="single carbb" onmouseover="this.className='single carbb show'" onmouseout="this.className='single carbb'" >
		<a href="#" target="_blank" >
			<span>英郎</span>
		</a>
	</div>
	<!--英郎结束-->
	
	<!--捷达开始-->
	<div class="single carcc" onmouseover="this.className='single carcc show'" onmouseout="this.className='single carcc'" >
		<a href="#" target="_blank" >
			<span>捷达</span>
		</a>
	</div>
	<!--捷达结束-->
	
	<!--POLO开始-->
	<div class="single cardd" onmouseover="this.className='single cardd show'" onmouseout="this.className='single cardd'" >
		<a href="#" target="_blank" >
			<span>POLO</span>
		</a>
	</div>
	<!--POLO结束-->
	
	<!--途观开始-->
	<div class="single caree" onmouseover="this.className='single caree show'" onmouseout="this.className='single caree'" >
		<a href="#" target="_blank" >
			<span>途观</span>
		</a>
	</div>
	<!--途观结束-->
	
	<!--科鲁兹开始-->
	<div class="single carff" onmouseover="this.className='single carff show'" onmouseout="this.className='single carff'" >
		<a href="#" target="_blank" >
			<span>科鲁兹</span>
		</a>
	</div>
	<!--科鲁兹结束-->
	
	<!--朗逸开始-->
	<div class="single cargg" onmouseover="this.className='single cargg show'" onmouseout="this.className='single cargg'" >
		<a href="#" target="_blank" >
			<span>朗逸</span>
		</a>
	</div>
	<!--朗逸结束-->
	
	<!--速腾开始-->
	<div class="single carhh" onmouseover="this.className='single carhh show'" onmouseout="this.className='single carhh'" >
		<a href="#" target="_blank" >
			<span>速腾</span>
		</a>
	</div>
	<!--速腾结束-->
	
	<!--宝来开始-->
	<div class="single carii" onmouseover="this.className='single carii show'" onmouseout="this.className='single carii'" >
		<a href="#" target="_blank" >
			<span>宝来</span>
		</a>
	</div>
	<!--宝来结束-->
	
	<!--福克斯开始-->
	<div class="single carjj" onmouseover="this.className='single carjj show'" onmouseout="this.className='single carjj'" >
		<a href="#" target="_blank" >
			<span>福克斯</span>
		</a>
	</div>
	<!--福克斯结束-->
	
	<div class="maintext fuel">
		<p>省<span>油</span></p>
	</div>
	<div class="maintext power">
		<p>动<span>力</span></p>
	</div>
	<div class="maintext control">
		<p>操<span>控</span></p>
	</div>
	<div class="include">
		<p>共收录<span>389</span>款汽车</p>
		<p>已有<span>3499</span>名车主点评</p>
	</div>
</div>
<!--主体结束-->

</body>

</html>

查看图片附件

分享到：

css3:QQ衰表情 | 工作上面的一些积累

2011-08-16 10:15
浏览 658
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

百度选车

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

百度选车

评论

发表评论

相关推荐

胡思乱想 打鱼晒网

淘宝良无限页面交互

纯代码蓝色理想的logo

项目的质和量：西班牙语频道制作思路和规划

祝贺“房多多”网站低调上线

世界工厂首页前端制作 - 首页分解图

CSS3：animation属性实例操作

网页重构：公司网站小面积改版

CSS制作:开心网“发表观点”CSS实现

CSS3：wordpress读者墙

论网易对联广告的效果展示

项目制作流程：请勿野蛮施工

css3:鼠标hover图片效果

css3:QQ衰表情

工作上面的一些积累

项目中的一些小技巧tips记录

CSS 中的 :first-letter

div+css 文本两端对齐的方法

最近访客更多访客>>

胡思乱想打鱼晒网