web前端-仿优车诚品首页二级分类菜单

效果图：

实现代码：

给出的HTML代码为整个块的代码，从left-bottom开始是二级分类菜单部分，用==号进行了划分

<div id="middle-one"><div class="one-left"><div class="left-top"><span>优车诚品今日在售二手车</span><span id="num">3535</span><input type="text" placeholder="请输入汽车品牌或车型"><button>搜索</button></div><hr style="margin:0 auto;width:455px;border:0.5px solid black;">

=============================================================================================<div id="left-bottom"><ul><li><p>&nbsp;&nbsp;&nbsp;&nbsp;￥选择价格</p><div class="a"><a>5-8万</a><a>8-10万</a><a>10-15万</a><a>15-20万</a><a>20-30万</a><a>30-50万</a><a>50万以上</a></div></li><li><p>&nbsp;&nbsp;&nbsp;&nbsp;*选择品牌</p><div class="a"><a>宝马</a><a>奥迪</a><a>奔驰</a><a>别克</a><a>大众</a><a>日产</a><a>丰田</a><a>本田</a><a>现代</a><a>马自达</a></div><div class="more"><div id="m-left"><p style="color:crimson;">A<a href="#">奥迪</a></p><p style="color:crimson;">B<a href="#">比亚迪</a><a href="#">宝马</a><a href="#">标致</a><a href="#">奔驰</a><a href="#">别克</a><a href="#">保时捷</a><a href="#">奔腾</a><a href="#">本田</a></p><p style="color:crimson;">C<a href="#">长安轿车</a><a href="#">长城</a></p><p style="color:crimson;">D<a href="#">大众</a><a href="#">道奇</a></p><p style="color:crimson;">F<a href="#">丰田</a><a href="#">福特</a><a href="#">菲亚特</a><a href="#">法拉利</a></p><p style="color:crimson;">G<a href="#">GMC</a><a href="#">观致汽车</a><a href="#">广汽</a></p><p style="color:crimson;">H<a href="#">华泰</a><a href="#">红旗</a><a href="#">哈弗</a></p><p style="color:crimson;">J<a href="#">捷豹</a><a href="#">吉利帝豪</a><a href="#">Jeep</a><a href="#">江淮</a><a href="#">江铃</a></p><p style="color:crimson;">K<a href="#">凯迪拉克</a><a href="#">克莱斯勒</a></p><p style="color:crimson;">L<a href="#">兰博基尼</a><a href="#">雷克萨斯</a><a href="#">铃木</a><a href="#">猎豹汽车</a><a href="#">林肯</a><a href="#">路虎</a><a href="#">雷诺</a></p></div><div id="me-right"><p style="color:crimson;">M<a href="#">奥迪</a></p><p style="color:crimson;">N<a href="#">纳智捷</a></p><p style="color:crimson;">O<a href="#">欧宝</a><a href="#">讴歌</a></p><p style="color:crimson;">Q<a href="#">起亚</a></p><p style="color:crimson;">R<a href="#">荣威</a><a href="#">日产</a></p><p style="color:crimson;">S<a href="#">斯柯达</a><a href="#">斯巴鲁</a><a href="#">Smart</a><a href="#">三菱</a></p><p style="color:crimson;">W<a href="#">沃尔沃</a></p><p style="color:crimson;">X<a href="#">雪佛兰</a><a href="#">雪铁龙</a><a href="#">现代</a></p><p style="color:crimson;">Y<a href="#">野马汽车</a><a href="#">英菲迪尼</a></p><p style="color:crimson;">Z<a href="#">中华</a><a href="#">众泰</a></p></div><div id="m-right"></div></div></li><li><p>&nbsp;&nbsp;&nbsp;&nbsp;&选择类型</p><div class="a"><a>轿车</a><a>微型车</a><a>小型车</a><a>SUV</a><a>MPV</a><a>跑车</a></div></li><li><p>&nbsp;&nbsp;&nbsp;&nbsp;#选择车系</p><div class="a"><a>宝马3系</a><a>宝马5系</a><a>奥迪A4L</a><a>奥迪A6L</a><a>C级</a><a>E级</a><a>君越</a><a>高尔夫</a></div><div class="more"></div></li></ul></div>

============================================================================================================</div><div id="myCarousel" class="one-right carousel slide"><ol class="carousel-indicators"><li data-target="#myCarousel" data-slide-to="0" class="active"></li><li data-target="#myCarousel" data-slide-to="1"></li><li data-target="#myCarousel" data-slide-to="2"></li></ol><!-- Carousel items --><div class="carousel-inner"><div class="active item"><img src="1.jpg"></div><div class="item"><img src="2.jpg"></div><div class="item"><img src="3.jpg"></div></div><!-- Carousel nav --><a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
</div>

CSS代码部分：因为上面布局也给出了其他部分的代码，CSS也给出相应的CSS代码，依然===划分二级代码部分

#middle-one{width:100%;height:315px;margin-top:20px;
}

 #middle-one .one-left .left-top{width:100%;height:75px;color:white;font-wight:bold;font-size:12px;font-family:"隶书";}#middle-one .one-left .left-top span:first-child{display:block;width:80px;float:left;margin-left:10px;margin-top:10px;}
#num{display:block;width:112px;float:left;margin-left:10px;font-size:40px;font-weight:bold;}#middle-one .one-left .left-top input{width:150px;height:35px;margin-top:10px;margin-left:40px;}#middle-one .one-left .left-top button{width:54px;height:33px;color:black;font-size:16px;margin-top:10px;background-color:white;border:none;margin-left:5px;}

===================================================================================#left-bottom ul li{list-style-type:none;width:237.51px;height:105px;float:left;position:relative;}#left-bottom ul li:hover{background:#352111;}#left-bottom ul li .more{width:550px;height:315px;position:absolute;background:white;left:237.51px;z-index:11;display:none;border:1px solid darkgray;}#left-bottom ul li.hover .more{display:block;}a:link,a:visited,a:hover,a:active{text-decoration:none;cursor:pointer;}#left-bottom ul li p{color:white;font-weight: bold;}#left-bottom .a{width:190px;margin:0 auto;}#left-bottom .a a{color:white;}#m-left{color:crimson;font-size:16px;margin-left:10px;height:315px;width:300px;float:left;}#m-left p{width:300px;height:20px;}#m-left p a{font-size:12px;color:slategray;font-weight:normal;}#m-left p a:hover{background-color:crimson;color:white;}#me-right{height:315px;width:220px;float:right;font-size:16px;}#me-right p{height:20px;}#me-right p a{font-size:12px;color:slategray;font-weight:normal;}#me-right p a:hover{background-color:crimson;color:white;}

===========================================================================================

js部分：

$("#left-bottom ul li").hover(function(){//鼠标移上去var index=$(this).index();if(index==1){$(this).find(".more").css("top","-87px");$(this).addClass("hover");//添加class=“hover”去掉more块的display：none设置}else if(index==3){$(this).find(".more").css("bottom","-18px");$(this).addClass("hover");//添加class=“hover”去掉more块的display：none设置  }
},function(){//鼠标移开$(this).removeClass("hover");//鼠标移开去掉class=“hover”，more块被隐藏
});

web前端-仿优车诚品首页二级分类菜单相关推荐

web前端项目详解：OPPO首页进度条特效（定时轮播）
web前端项目详解:OPP首页进度条特效(定时轮播) 知识点:布局结构分析,定位运用,页面兼容性问题,Jquery的基础运用(修改盒子样式,动画方法,简单算法,淡入淡出方法,定时器方法)代码结构效果 ...
Web前端仿小米官网实战总结
Web前端仿小米官网实战总结自学前端至今实在是感慨万千,一个人学习太累,自律能力不太够,学习速度跟不上技术更新速度,所以学习技术是一定不能偷懒的,更不能沉迷游戏,要坚持学习,最好有人带,实在不行就报 ...
html弧形列表效果,web前端入门到实战：html5网页特效-弧形菜单
效果: 弧形菜单,文字按规则变形以及变换透明度简单的javascript,上手难度:简单学习笔记: text-decoration: 最主要的功能就是给文字加上附着在文字底部,上方,或者中间的线( ...
web前端综合案例——小兔鲜首页（html+css）
前言:我这里只使用了html和css,js没有使用项目源代码:https://pan.baidu.com/s/1alnekYEu5F9XwHTW7dO5RA?pwd=qjhd 页面效果: 项目准备阶 ...
【转】WEB前端调优
首先从一次完整的的请求说起:(以此为例get,www,baidu.com) 1,webbrower 发出request, 2,然后解析www.baidu.com为ip,找到ip的服务器, 3,服务器处 ...
web前端期末大作业——餐品后台管理系统(html+css+javascript)
Web前端大学生期末大作业--京东首页
欢迎点赞
[转] Web前端研发工程师编程能力飞升之路
[转] Web前端研发工程师编程能力飞升之路分类: Javascript | 转载请注明: 出自海玉的博客今天看到这篇文章.写的非常有意思.发现自己还有很长的一段路要走. [背景] 如果你是刚进 ...
YUI Compressor快速使用指南—web前端开发七武器
YUI Compressor快速使用指南-web前端开发七武器 2012-12-20 15:05:17| 分类: 持续集成 |字号订阅转自: RIA之家武器档案名称:YUI Compress ...

web前端-仿优车诚品首页二级分类菜单

web前端-仿优车诚品首页二级分类菜单相关推荐

最新文章

热门文章