`
weballan001
  • 浏览: 26919 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
最近访客 更多访客>>
社区版块
存档分类
最新评论

百度选车

 
阅读更多


百度选车频道上线,朋友推荐了这个效果,觉的蛮不错的,就想着格式化做了一下,百度是运用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>
 
  • 大小: 24.9 KB
分享到:
评论

相关推荐

    百度推广-搜索营销新视角

    5.4.3 选词策略 154 5.4.4 综述 154 5.5 金融保险行业——寿险的搜索引擎营销策略 154 5.5.1 案例背景 154 5.5.2 品牌推广 156 5.5.3 效果推广 157 5.5.4 综述 158 5.6 电商行业多产品线账户搭建 159 5.6.1 案例背景...

    百度地图api 轨迹回放

    4. 可选:添加用户控制功能,提升用户体验。 通过以上步骤,我们可以在网页中创建一个交互式的轨迹回放功能,使用户能够直观地查看和理解地理轨迹信息。记得在实际开发中,根据项目需求对代码进行适当的调整和优化...

    百度导航外部调起协议

    某些参数是必须的,比如serviceType和src,而其他一些参数则是可选的,可以根据实际情况省略或提供。 开发者需要确保安装了相应版本的百度导航App才能调用上述服务。对于iOS平台,至少需要iOS V3.4及以上版本,而...

    百度AI图像主体识别Demo

    **百度AI图像主体识别Demo详解** 在现代信息技术中,图像处理技术扮演着至关重要的角色,尤其是在人工智能(AI)领域。百度作为中国领先的科技巨头,在AI技术方面有着深厚的积累,其中包括了图像主体识别技术。本篇...

    计算机行业研究周报:百度Apollo开放北京Robotaxi测试.pdf

    北京经济技术开发区(经开区)被选为高级别自动驾驶示范区,百度将在此建设全球首个网联云控式自动驾驶示范区,目标到2022年实现“智慧的路、聪明的车、实时的云、可靠的网和精确的地图”五大体系的建设。...

    百度浏览器抢票专版怎么用.docx

    【百度浏览器抢票专版使用指南】 在春节期间或其他高峰期,火车票往往一票难求,这时,使用专门的抢票工具能大大提高购票成功的几率。百度浏览器抢票专版就是为了解决这一问题而设计的。下面我们将详细介绍如何有效...

    百度地图显示短信发过来的经纬度信息

    5. **可选:添加信息窗口**:如果需要展示更多信息,可以添加信息窗口,显示短信内容或者其他相关信息。 ```javascript var infoWindow = new BMap.InfoWindow("这里是短信中的其他信息"); // 创建信息窗口对象 ...

    智能小车专区 寻迹 避障 等

    光电传感器通过检测被测物对光束的遮挡或反射,由同步回路选通电路判断物体存在与否,从而保证小车沿预定轨迹行进并避开障碍物。 2. **水平传感模块**:由摆锤和两个光电对射开关组成,当小车在非水平路面上行驶时...

    百度智能api接口汇总.pdf

    在百度智能API接口中,自然语言处理部分提供了多个功能,包括文本分词、依存句法分析、词向量表示、DNN语言模型、词义相似度、短文本相似度、评论观点抽取和情感倾向分析。 1. **文本分词**:通过`lexer`方法,对...

    基于QT、ARM开发板、Linux系统并对接百度AI的停车管理系统.zip

    在本项目中,Linux被选为开发板上的操作系统,提供稳定的基础环境,并且能够支持QT应用程序的运行。开发者可以利用Linux的系统调用和丰富的开发工具进行程序开发和调试。 对接百度AI,意味着系统集成了人工智能技术...

    微信小程序-百度地图定位

    type: 'gcj02', // 默认为wgs84,可选为'gcj02'、'bd09ll' success: (res) =&gt; { const latitude = res.latitude; const longitude = res.longitude; this.addMarker(latitude, longitude); }, fail: (err) =&gt;...

    租车系统.rar

    - 预约与订单管理:用户选车、预约、支付、订单确认与取消等流程,涉及状态机设计。 - 定位与导航:集成地图API,提供车辆定位、导航和距离计算。 - 支付系统:与第三方支付平台集成,实现安全的在线支付功能。 ...

    12123交管学法减分考试试题(有图有答案).pdf

    2. 制动失灵时的处理:当车辆制动失灵时,驾驶人应握稳方向盘、抢挂低速挡以减速、使用驻车制动器辅助减速,同时开启危险报警闪光灯提示其他道路使用者。 3. 下坡路制动失效:此时可利用避险车道、车身靠向岩石或...

    长安全新CS35汽车使用手册用户说明书pdf电子版下载.pdf

    8. 车辆配置:详细说明车辆的标准配置和可选配置,包括车辆的颜色、内饰、发动机类型、变速器类型等。 9. 法规和指南:提供驾驶者必须遵守的交通法律、法规以及紧急情况下的应对措施,比如车辆故障时的求助电话、...

    东风悦达起亚智跑Ace车型手册电子版下载_非汽车用户车主车辆操作驾驶说明书.pdf

    车内配备7英寸高级炫彩仪表盘和10.25英寸多媒体触控屏,搭载百度智能互联系统3.0,支持语音控制、在线导航、远程控制等多种功能。此外,还配备了高级皮质座椅、多功能方向盘、倒车影像、SVM 360°全景影像等便利设施...

    一汽丰田普拉多产品手册汽车使用说明书pdf电子版下载.pdf

    6. 驾驶辅助系统:包括MTS多地形可选驾驶辅助装置,能够根据路面条件选择最佳驱动和制动模式,以及CCS低速巡航驾驶辅助系统,通过系统自动控制车速,帮助驾驶者轻松通过起伏和易打滑路面。 7. 监控和舒适性:AVS...

Global site tag (gtag.js) - Google Analytics