<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>非常实用的导航菜单</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script src="./JScripte/jquery.js"></script>
<script src="./JScripte/bootstrap.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
font-size: 14px;
font-weight: 500
}
a {
color: #1AA0C0;
text-decoration: none;
}
ul {
list-style: none;
}
#ul-main {
height: 57px;
text-align: center;
width: 230px;
}
#ul-main li ul {
display: none;
}
#ul-main li ul li {
float: none;
}
#ul-main {
float: none;
height: 80px;
padding: 0 10px;
text-transform: capitalize;
}
#ul-main .height-auto {
line-height: 15px;
padding: 5px 10px;
}
.first-menu li {
float: left;
position: relative;
}
.first-menu a:hover {
background: #ECF1F4;
}
.third-menu {
background: #4c4c4c;
font-weight: normal;
/* border-top: 1px solid #595959;
border-left: 200px solid #595959; */
border-bottom: 3px solid #333;
/* border-right: 1px solid #333; */
}
.title {
color: #323232;
font-size: 18px;
line-height: 18px;
height: 18px;
padding-bottom: 10px;
width: 170px;
overflow: hidden
}
.li-content {
padding-top: 30px;
text-align: left
}
.goods-promotion {
position: fixed;
bottom: 0;
width: 490px;
height: 580px;
left: 550px;
top: 200px;
z-index: 2;
margin-left: -150px /*为.fixed宽的一半*/;
margin-top: -150px /*为.fixed高的一半*/;
border: 1px solid #A39F9F;
background: white;
}
</style>
<script type=text/javascript>
$(function() {
$(‘#ul-main li‘).hover(function() {
$(this).children(‘ul‘).stop(true, true).show(‘slow‘);
}, function() {
$(this).children(‘ul‘).stop(true, true).hide(‘slow‘);
});
$(‘.carousel‘).carousel({
interval : 2000
});
});
</script>
</head>
<body>
<div style="width: 1200px; height: 580px; margin-top: 50px;">
<div
style="width: 180px; height: 100%; float: left; margin-left: 220px; border: 1px solid #A39F9F;">
<ul id="ul-main" class="first-menu">
<li><div class="li-content">
<h2 class="title">
<a href="#">理财</a>
</h2>
<div style="height: 40px; padding-top: 10px;">
<a href="#">小金库</a> <a href="#">票据</a> <a href="#">基金</a> <a
href="#">理财险</a>
</div>
</div>
<ul class="third-menu">
<li>
<div class="goods-promotion ">
<div class="title">
<span class="text">理财</span> <span>赚钱 分秒必争</span>
</div>
<div style="height: 40px; padding-top: 10px;">
<a href="#">小金库</a> <a href="#">票据理财</a> <a href="#">股票基金</a> <a
href="#">混合基金</a> <a href="#">债券基金</a> <a href="#">货币基金</a> <a
href="#">其他基金</a> <a href="#">保险理财</a>
</div>
<div>
<img width="510" height="470"
src="./image/54f56057N641764e6.png">
</div>
</div>
</li>
</ul></li>
</ul>
<ul id="ul-main" class="first-menu">
<li><div class="li-content">
<h2 class="title">
<a href="#">众筹</a>
</h2>
<div style="height: 40px; padding-top: 10px;">
<a href="#">智能</a> <a href="#">文化</a> <a href="#">生活</a> <a
href="#">公益</a>
</div>
<span class="angle"></span>
</div>
<ul class="third-menu">
<li><div style="display: block;">
<div class="goods-promotion ">
<img class="lazyload-img" width="510" height="470"
src="./image/54d8a505Nf4a9774b.png">
</div>
</div></li>
</ul></li>
</ul>
<ul id="ul-main" class="first-menu">
<li><div>
<div class="li-content"">
<h2 class="title">
<a href="#">保险</a>
</h2>
<div style="height: 40px; padding-top: 10px;">
<a href="#">意外险</a> <a href="#">健康险</a> <a href="#">旅行险</a>
</div>
<span class="angle"></span>
</div>
</div>
<ul class="third-menu">
<li><div style="display: block;">
<div class="goods-promotion ">
<img class="lazyload-img" width="510" height="470"
src="./image/54d82f60N09df5b6b.png">
</div>
</div></li>
</ul></li>
</ul>
<ul id="ul-main" class="first-menu">
<li><div class="li-content">
<h2 class="title">
<a href="#">消费金融</a>
</h2>
<div style="height: 40px; padding-top: 10px;">
<a href="#">白条</a> <a href="#">旅游白条</a> <a href="#">校园白条</a>
</div>
<span class="angle"></span>
</div>
<ul class="third-menu">
<li><div style="display: block;">
<div class="goods-promotion ">
<img class="lazyload-img" width="510" height="470"
src="./image/5502bbcaN09001202.png">
</div>
</div></li>
</ul></li>
</ul>
<ul id="ul-main" class="first-menu">
<li><div class="li-content">
<h2 class="title">
<a href="#">消费金融</a>
</h2>
<div style="height: 40px; padding-top: 10px;">
<a href="#">白条</a> <a href="#">旅游白条</a> <a href="#">校园白条</a>
</div>
<span class="angle"></span>
</div>
<ul class="third-menu">
<li><div style="display: block;">
<div class="goods-promotion ">
<img class="lazyload-img" width="510" height="470"
src="./image/5502bbcaN09001202.png">
</div>
</div></li>
</ul></li>
</ul>
<ul id="ul-main" class="first-menu">
<li><div>
<div
style="height: 80px; width: 80px; margin-left: 30px; margin-bottom: 10px; background: url(‘./image/123456.png‘); background-size: 100% 100%;">
</div>
<div class="title">1000万现金人人有份</div>
</div>
<ul class="third-menu">
<li><div style="display: block;">
<div class="goods-promotion ">
<img class="lazyload-img" src="./image/5502983fNdbdd9744.png">
</div>
</div></li>
</ul></li>
</ul>
</div>
<div>
<!--右-->
<div>
<div
style="float: left; width: 700px; height: 582px; margin-left: 8px;"
myCarousel" class="carousel slide">
<div id="myCarousel" class="carousel slide" style="width: 700px;">
<!-- 轮播（Carousel）指标 -->
<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）项目 -->
<div class="carousel-inner" data-ride="carousel">
<div class="item active">
<img src="./image/5506300fNc63158f0.jpg" alt="First slide">
</div>
<div class="item">
<img src="./image/550671c9Nef8a4957.jpg" alt="Second slide">
</div>
<div class="item">
<img src="./image/54f93d70N17af0b2d.jpg" alt="Third slide">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹</a> <a class="carousel-control right"
href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<div style="float: left; width: 3px; height: 582px;"
myCarousel" class="carousel slide">
<div style="float: left; width: 290px; height: 582px;margin-left: 8px;">
<!-- 上 -->
<div style="height: 250px;">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner" data-ride="carousel">
<div class="item active">
<img src="./image/5506300fNc63158f0.jpg" alt="First slide">
</div>
<div class="item">
<img src="./image/550671c9Nef8a4957.jpg" alt="Second slide">
</div>
<div class="item">
<img src="./image/54f93d70N17af0b2d.jpg" alt="Third slide">
</div>
</div>
</div>
</div>
<!-- 中 -->
<div style="height: 150px;">
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner" data-ride="carousel"
style="height: 140px;">
<div class="item active">
<img src="./image/5506300fNc63158f0.jpg" alt="First slide">
</div>
<div class="item">
<img src="./image/550671c9Nef8a4957.jpg" alt="Second slide">
</div>
<div class="item">
<img src="./image/54f93d70N17af0b2d.jpg" alt="Third slide">
</div>
</div>
</div>
</div>
<!-- 下 -->
<div style="height: 80px;">
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner" data-ride="carousel">
<div class="item active" style="height: 180px;">
<img src="./image/5506300fNc63158f0.jpg" alt="First slide">
</div>
<div class="item" style="height: 180px;">
<img src="./image/550671c9Nef8a4957.jpg" alt="Second slide">
</div>
<div class="item" style="height: 180px;">
<img src="./image/54f93d70N17af0b2d.jpg" alt="Third slide">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
本文出自 “jquerymobile” 博客，请务必保留此出处http://6664553.blog.51cto.com/6654553/1622259
原文地址：http://6664553.blog.51cto.com/6654553/1622259
