- 浏览: 25454 次
- 性别:
- 来自: 郑州
最近访客 更多访客>>
最新评论
-
guiguzi83:
还有底下的圆形在IE下是方形,这个怎么实现
天猫商城JS效果制作 -
guiguzi83:
为什么把你的另存为页面就不行了呢?
天猫商城JS效果制作 -
xilie180:
我想问下前辈在哪家公司就职,前端待遇情况(看所属地是郑州,所以 ...
项目的质和量:西班牙语频道制作思路和规划
百度选车频道上线,朋友推荐了这个效果,觉的蛮不错的,就想着格式化做了一下,百度是运用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>
发表评论
-
胡思乱想 打鱼晒网
2012-02-15 15:54 812其实一直想写一篇东西出来,但最近状态不好,我这个人过份的自由、 ... -
淘宝良无限页面交互
2012-02-15 15:35 726您可以狠狠地点击这里:淘宝良无限页面交互DEMO 前 ... -
纯代码蓝色理想的logo
2012-01-06 15:44 713您可以狠狠地点击这里:蓝色理想的logoDEMO ... -
项目的质和量:西班牙语频道制作思路和规划
2012-01-04 17:14 791您可以狠狠地点击这里 ... -
祝贺“房多多”网站低调上线
2011-11-29 10:27 715感谢前团队的照顾和培养,现在这个项目上线了,看到了心里非常高兴 ... -
世界工厂首页前端制作 - 首页分解图
2011-11-04 16:32 952您可以狠狠地点击这里:世界工厂网首页预览版 网 ... -
CSS3:animation属性实例操作
2011-09-26 17:24 1610文章中的实例须在FireFox ... -
网页重构:公司网站小面积改版
2011-09-17 10:13 804公司网站首页要改版, ... -
CSS制作:开心网“发表观点”CSS实现
2011-09-13 14:56 935中秋放假,淋漓小雨下 ... -
CSS3:wordpress读者墙
2011-08-29 10:45 732最近在制作一个企业站和制作一些广告效果,今天又在网上看到css ... -
论网易对联广告的效果展示
2011-08-25 10:02 869打开网易,你会发现网易网站的对联广告做的效果是:默认 ... -
项目制作流程:请勿野蛮施工
2011-08-16 15:38 803项目制作流程图: 项目是制做出来的,它有它自己的流程方式 ... -
css3:鼠标hover图片效果
2011-08-16 10:56 1373今天在网上看到的鼠标hover效果,当时就看的心痒痒,c ... -
css3:QQ衰表情
2011-08-16 10:39 916发现在聊天群里面,用这个表情的很多,最近一直也在了解CSS ... -
工作上面的一些积累
2011-07-25 10:29 558总结一下自己前端工作的一些工作经验和自己前期工作的规划:1、用 ... -
项目中的一些小技巧tips记录
2011-07-25 10:27 671项目中遇到的一些小技巧,记录下来: 对非a标签添加伪类 ... -
CSS 中的 :first-letter
2011-07-25 10:15 950对CSS熟悉的人一般都会了解 :first-letter 这个 ... -
div+css 文本两端对齐的方法
2011-07-25 10:01 17581、先定义text-align:justify;2、添加 te ...
相关推荐
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 案例背景...
选车:carlist.html 新车:xc.html 二手车:2s.html 评估:assess.html 车行:dealer.html 车商:带shop_ 官方: 大泉州汽车网:http://www.qzqcw.com/ 南安汽车网:http://www.naqcw.com/ 下载:...
选车:carlist.html 新车:xc.html 二手车:2s.html 评估:assess.html 车行:dealer.html 车商:带shop_ 官方: 大泉州汽车网:http://www.qzqcw.com/ 南安汽车网:http://www.naqcw.com/ 下载:...
关于定位功能尝试了很多种方法,h5定位,百度地图定位,高德地图定位,因为ip定位只能定位到城市,所以我选用的是浏览器定位。总结如下: H5定位:定位相对较准,但是部分浏览器不兼容,我主要是在手机上测试的,UC...
选车:carlist.html 新车:xc.html 二手车:2s.html 评估:assess.html 车行:dealer.html 车商:带shop_ 官方: 大泉州汽车网:http://www.qzqcw.com/ 南安汽车网:http://www.naqcw.com/ 下载:...
选车:carlist.html 新车:xc.html 二手车:2s.html 评估:assess.html 车行:dealer.html 车商:带shop_ 官方: 大泉州汽车网:http://www.qzqcw.com/ 南安汽车网:http://www.naqcw.com/ 下载:...
选车:carlist.html 新车:xc.html 二手车:2s.html 评估:assess.html 车行:dealer.html 车商:带shop_ V2018.1.1 此版是根据网上某二手车修改而成,已经原版修正很多错误,增加了新车等栏目.并增加安全性,请放心使用. ...
选车:carlist.html 新车:xc.html 二手车:2s.html 评估:assess.html 车行:dealer.html 车商:带shop_ V2018.1.1 此版是根据网上某二手车修改而成,已经原版修正很多错误,增加了新车等栏目.并增加安全性,请放心使用. ...
11_擦除所选填充色 12_动画原理 13_关键帧、普通帧和空白关键帧 14_创建动画 15_定义帧频 16_渐变动画 17_颜色面板 18_时间轴(1) 19_时间轴(2) 20_图形元件 21_图形元件动画 22_按钮的创建 23_按钮作用...
例如,在与12306的对话中,用户可以通过发送语音或文字、点选关键字的形式,快捷实现车票预订、支付、改签等操作。 得益于以上特质, 5G消息在继承传统短信免注册登录、免安装应用等特性的基础上,进一步实现了...
CATIA插件-刻度线自动生成 进入草图模块 点击视图 按下Alt+F8 选择此文件 输入对应比例 点选视图左上以及右下 自动生成装配视图坐标线 出图必备
所选教材 互联网产品设计思维与实践 二、设计依据 依据课程标准,运用现代教育技术,创设一个融合多种教法学法和信息化手段于一体的情境性课堂环境,培养学生的实践技能。 三、学习目标与内容 1.学习目标 知识目标...
百度大数据实验室 分析:七成星巴克消费者一般选在附近1公里,而吃海底捞一般需要跑更远的距离(大约3公里)。 数据挖掘-大数据选址问题(PPT+论文)全文共22页,当前为第9页。 百度大数据 现有网点未覆盖的用户需求...
实例6二分法选代的应用 实例7多变的立方体 实例8一维整型数组应用(1) 实例9一维整型数组应用(2) 实例10一维整型数组应用(3) 实例11一维整型数组应用(4) 实例12二维数组应用(1)——显示杨辉...
实例173 实现复选框中的全选、反选和不选 208 实例174 隐藏域提交用户的ID值 210 实例175 图像域替代提交按钮 211 实例176 跳转菜单实现页面跳转 213 实例177 上传图片预览 214 实例178 去掉下拉选项的边框 215 实例...
转载资源,从百度文库下载的。 Cortex-M系列 M0 : Cortex-M0 是目前最小的 ARM 处理器, 该处理器的芯片面积非常小, 能耗极低, 且编程所需 的代码占用量很少,这就使得开发人员可以直接跳过 16 位系统,以 接近 8...
实例108 实现带复选框的treeview控件 实例109 将xml文件节点绑定到treeview控件中 实例110 修改treeview控件的节点文本 第11章 c#面向对象高级技术 实例111 利用接口实现选择不同的语言 实例112 使用接口作为方法...
7:智能一键: 一键百度搜索; 一键聊QQ; 一键聊旺旺; 一键发送短信; 一键发送邮件; 一键复制; 一键打开网址。 8:智能自动: 填写QQ自动填写QQ邮箱; 填写手机或电话自动填写归属地、自动填写客户分区...