代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>零食</title>
<style>
.arrow{
width:32px ;
height: 32px;
background-image: url(img/arrow.png);
position: fixed;
top: 90%;
right: 20px;
z-index: 11;
}
*{
margin: 0px;
padding: 0px;
list-style-type: none;
text-decoration: none;
color: #000000;
}
.heard{
width: 100%;
height: 200px;
}
.heard-top{
width: 100%;
height: 50px;
background-color: #000000;
}
.heard-top div{
width: 1200px;
height: 50px;
margin: auto;
/*border: 1px solid white;*/
}
.heard-top div img{
width: 200px;
height: 50px;
float: left;
}
.heard-top div ul li a{
width: 100px;
height: 50px;
float: right;
color: #FFFFFF;
line-height: 50px;
text-align: center;
}
.heard-top div ul li:hover a{
color: #FE9126;
transition: all 1s;
}
/*顶部黑色导航栏*/
.heard-cen{
width: 100%;
height: 100px;
background-color: white;
}
.heard-cen div{
width: 1200px;
height:100px;
/*border: 1px solid;*/
position: relative;
margin: auto;
}
.heard-cen div h1{
margin: auto;
width: 500px;
height: 100px;
font-size: 50px;
line-height: 100px;
color: #FE9126;
}
.heard-cen div input{
width: 250px;
height: 40px;
font-size: 30px;
position:absolute;
top: 30px;
right: 70px;
}
.heard-cen div span{
width: 40px;
height: 40px;
float: right;
position: absolute;
top: 30px;
right:20px;
border: 1px solid;
background-position-x: -12px;
background-position-y: 53px;
background-image:url(img/sousuo.png) ;
}
.heard-cen div span:hover{
background-image: url(img/sss.png);
}
/*中间白色导航带搜索框*/
.heard-bot{
width: 100%;
height: 50px;
background-color: #FE9126;
}
.h-b-d{
width: 1200px;
height:50px;
margin: auto;
/*border: 1px solid;*/
position: relative;
}
.index{
width: 200px;
height: 50px;
float: left;
line-height: 50px;
text-align: center;
/*border: 1px solid;*/
}
.one{
width:200px;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
cursor: pointer;
/*border: 1px solid;*/
}
.two{
display: none;
width: 200px;
height: 250px;
background-color: white;
z-index: 4;
position: relative;
box-shadow: 0px 0px 5px;
/*border: 1px solid;*/
}
.two ol li a{
width: 200px;
height: 60px;
line-height: 60px;
text-align: center;
display: block;
color: #999999;
}
.two ol li:hover a{
color: #FE9126;
box-shadow: 0px 0px 5px;
}
.one:hover .two{
display: block;
}
/*顶部导航*/
.body{
width: 1200px;
height: 1300px;
margin: auto;
/*border: 1px solid;*/
position:relative;
top: 70px;
}
.body-left{
width: 300px;
height: 850px;
border: 1px solid;
}
.body-left h1{
width: 300px;
height: 50px;
line-height:50px;
text-align: center;
background-color: gainsboro;
}
.body-left ul li{
list-style-type: circle;
line-height: 30px;
}
.body-left ul li a:hover{
color: #FE9126;
transition: all .5s;
}
.bl-one{
margin-left: 40px;
}
.bl-two{
margin-left: 60px;
}
.body-right{
width: 850px;
height: 1200px;
/*border: 1px solid;*/
position: absolute;
top: 0px;
right: 0px;
}
.xiala{
width:200px;
height: 60px;
/*border: 1px solid;*/
float: right;
position: relative;
}
.xllb{
margin-top: 5px;
width: 200px;
height: 50px;
font-size: 20px;
}/*下拉列表结束*/
.zhuti{
width: 850px;
height: 1100px;
float: right;
/*border: 1px solid;*/
}
.jrtj{
width: 230px;
height: 310px;
margin: 24px;
text-align: center;
float: left;
background-color: white;
border: 1px solid #999999;
}
.gm{
width: 130px;
height: 30px;
border: 1px solid gainsboro;
margin: auto;
text-align: center;
line-height: 30PX;
background-color:skyblue;
border-radius:10px ;
}
.gm a{
display: block;
}
.jrtj:hover .gm{
background-color:#FE9126;
transition: all .6s;
}
.jrtj img{
width: 90%;
height: 60%;
margin-top: 20px;
}
.jrtj h4{
line-height: 20px;
font-size: 20px;
}
.jrtj span{
line-height: 40px;
}
.xj{
color:red;
font-size: 20px;
}
.bottom{
width: 100%;
height: 300px;
text-align: center;
background-color: #2B2A2A;
float: left;
}
.bottom img{
width: 400px;
height:90px;
margin-top: 100px;
}
.bottom a{
width: 100%;
min-height: 50px;
line-height: 50px;
text-align: center;
color: white;
display: block;
}
</style>
</head>
<!--
作者：王风宝
时间：2019-11-22
描述：二级菜单
-->
<body>
<div class="heard"><!--顶部导航-->
<a href="#DINGBU" class="arrow"></a>
<div class="heard-top">
<div>
<img src="img/logo.png" /><a name="DINGBU">
<ul>
<li><a href="购物车（2）.html">购物车</a></li>
<li><a href="登录（2）.html">登录</a></li>
<li><a href="注册（2）.html">注册</a></li>
<li><a href="关于（2）.html">关于</a></li>
</ul></a>
</div>
</div><!--顶部黑色-->
<div class="heard-cen">
<div>
<h1>SUPER MARKET</h1>
<input type="text" />
<span></span>
</div>
</div>
<div class="heard-bot">
<div class="h-b-d">
<ul>
<li class="index"><a href="index.html">首页</a></li>
<li class="one">
<p>水果</p>
<div class="two">
<ol>
<li><a href="水果(2).html">春季水果</a></li>
<li><a href="水果(2).html">夏季水果</a></li>
<li><a href="水果(2).html">冬季水果</a></li>
<li><a href="水果(2).html">秋季水果</a></li>
</ol>
</div>
</li>
<li class="one">
<p>蔬菜</p>
<div class="two">
<ol>
<li><a href="蔬菜.html">青菜</a></li>
<li><a href="蔬菜.html">干菜</a></li>
<li><a href="蔬菜.html">肉类</a></li>
<li><a href="蔬菜.html">海鲜</a></li>
</ol>
</div>
</li>
<li class="one">
<p>零食</p>
<div class="two">
<ol>
<li><a href="零食（2）.html">坚果</a></li>
<li><a href="零食（2）.html">辣条</a></li>
<li><a href="零食（2）.html">饼干</a></li>
<li><a href="零食（2）.html">干果</a></li>
</ol>
</div>
</li>
<li class="one">
<p>生活用品</p>
<div class="two">
<ol>
<li><a href="生活用品（2）.html">餐具</a></li>
<li><a href="生活用品（2）.html">家具</a></li>
<li><a href="生活用品（2）.html">卫浴</a></li>
<li><a href="生活用品（2）.html">服饰</a></li>
</ol>
</div>
</li>
<li class="one">
<a href="每日推荐2.html">每日特价</a>
</li>
</ul>
</div>
</div>
</div>
<!--顶部导航结束-->
<div class="body">
<div class="body-left"><!--左边列表-->
<h1>类别</h1>
<ul class="bl-one">
<li>
<a href="#">水果</a>
<ul class="bl-two">
<li><a href="水果(2).html">春季水果</a></li>
<li><a href="水果(2).html">夏季水果</a></li>
<li><a href="水果(2).html">秋季水果</a></li>
<li><a href="水果(2).html">冬季水果</a></li>
<li><a href="水果(2).html">北方水果</a></li>
<li><a href="水果(2).html">南方水果</a></li>
<li><a href="水果(2).html">国外水果</a></li>
</ul>
</li>
<li>
<a href="#">蔬菜</a>
<ul class="bl-two">
<li><a href="蔬菜.html">春季蔬菜</a></li>
<li><a href="蔬菜.html">夏季蔬菜</a></li>
<li><a href="蔬菜.html">秋季蔬菜</a></li>
<li><a href="蔬菜.html">冬季蔬菜</a></li>
<li><a href="蔬菜.html">北方蔬菜</a></li>
<li><a href="蔬菜.html">南方蔬菜</a></li>
<li><a href="蔬菜.html">肉类</a></li>
</ul>
</li>
<li>
<a href="#">零食</a>
<ul class="bl-two">
<li><a href="零食（2）.html">坚果</a></li>
<li><a href="零食（2）.html">辣条</a></li>
<li><a href="零食（2）.html">饼干</a></li>
<li><a href="零食（2）.html">干果</a></li>
</ul>
</li>
<li>
<a href="#">生活用品</a>
<ul class="bl-two">
<li><a href="生活用品（2）.html">卫浴</a></li>
<li><a href="生活用品（2）.html">厨房</a></li>
<li><a href="生活用品（2）.html">服饰</a></li>
<li><a href="生活用品（2）.html">家具</a></li>
</ul>
</li>
</ul>
</div>
<div class="body-right"><!--右边图文混排-->
<div class="xiala"><!--下拉列表-->
<select class="xllb">
<option>默认排序</option>
<option>按受欢迎度排序</option>
<option>按平均评级排序</option>
<option>按销量排序</option>
<option>按价格排序</option>
</select>
</div>
<div class="zhuti"><!--中间图文混排-->
<div class="jrtj">
<img src="img/零食/兰花豆.JPG" />
<h4>兰花豆</h4>
<span></span><span class="xj">￥5.9</span>
<div class="gm">
<a href="夏威夷果3.html">GOUMAI</a>
</div>
</div>
<div class="jrtj">
<img src="img/零食/夏威夷果.JPG" />
<h4>夏威夷果</h4>
<span></span><span class="xj">￥25</span>
<div class="gm">
<a href="夏威夷果3.html">GOUMAI</a>
</div>
</div>
<div class="jrtj">
<img src="img/零食/巴旦木仁.JPG" />
<h4>巴旦木仁</h4>
<span></span><span class="xj">￥35.9</span>
<div class="gm">
<a href="开心果3.html">GOUMAI</a>
</div>
</div>
<div class="jrtj">
<img src="img/零食/开口松子.JPG" />
<h4>开口松子</h4>
<span></span><span class="xj">￥15</span>
<div class="gm">
<a href="开心果3.html">GOUMAI</a>
</div>
</div>
<div class="jrtj">
<img src="img/零食/开心果.JPG" />
<h4>开心果</h4>
<span></span><span class="xj">￥35.8</span>
<div class="gm">
<a href="开心果3.html">GOUMAI</a>
</div>
</div>
<div class="jrtj">
<img src="img/零食/核桃.JPG" />
<h4>核桃</h4>
<span></span><span class="xj">￥25.14</span>
<div class="gm">
<a href="夏威夷果3.html">GOUMAI</a>
</div>
</div>
<div class="jrtj">
<img src="img/零食/碧根果.JPG" />
<h4>碧根果</h4>
<span></span><span class="xj">￥15</span>
<div class="gm">
<a href="夏威夷果3.html">GOUMAI</a>
</div>
</div>
<div class="jrtj">
<img src="img/零食/腰果.JPG" />
<h4>腰果</h4>
<span></span><span class="xj">￥7.5</span>
<div class="gm">
<a href="开心果3.html">GOUMAI</a>
</div>
</div>
<div class="jrtj">
<img src="img/零食/杏仁.JPG" />
<h4>杏仁</h4>
<span></span><span class="xj">￥5</span>
<div class="gm">
<a href="开心果3.html">GOUMAI</a>
</div>
</div>
</div>
<div class="youxia"><!--右下角-->
</div>
</div>
</div>
<div class="bottom">
<img src="img/logo2.png" />
<a href="#DINGBU">返回顶部</a>
</div>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手