代码拉取完成，页面将自动刷新
<!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;
}
/*导航栏结束可以复制*/
.bottom{
width: 100%;
height: 300px;
text-align: center;
background-color: #2B2A2A;
}
.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;
}
/*默认*/
.center{
width: 1200px;
height: 600px;
margin: auto;
margin-top:60px;
}
.cen-l{
width: 500px;
height: 500px;
float: left;
position: relative;
}
.cen-l img{
width: 100%;
height: 100%;
}
.logo{
width: 500px;
height: 500px;
position: absolute;
top: 0px;
transform: scale(0);
}
.logo h1{
width: 500px;
height: 500px;
color: #FE9126;
font-size: 50px;
text-align: center;
line-height: 500px;
}
.cen-l:hover .logo{
transform: scale(1);
transition: all 1s;
}/*左边图片样式*/
.cen-r{
width: 600px;
height: 500px;
/*border: 1px solid;*/
float: right;
}
.cen-r h2{
width: 600px;
height: 50px;
line-height: 50px;
font-size:50px;
}
.cen-r h1{
width: 600px;
height: 50px;
line-height:70px;
font-size:30px ;
margin-top:60px ;
color: red;
}
.cen-r h4{
margin-top: 30px;
}
.cen-r select{
width:100px;
height:40px;
margin-left:10px ;
}
.dizhi{
width: 600px;
height: 50px;
margin-top: 30px;
}
.dizhi span{
font-size: 20px;
}
.leixing{
width: 600px;
height: 50px;
/*border: 1px solid;*/
margin-top: 10px;
}
.leixing ul li a{
float: left;
border: 1px solid;
width: 70px;
height: 40px;
margin-left: 20px;
text-align: center;
line-height: 40px;
}
.leixing ul li a:hover{
background-color: orange;
}
.gm{
width: 300px;
height: 50px;
border: 1px solid gainsboro;
line-height: 50px;
text-align: center;
font-size: 30px;
margin-top:40px ;
border-radius: 30px;
background-color: skyblue;
overflow: hidden;
}
.gm:hover a{
background-color: #FE9126;
transition: all .5s;
display: block;
}/*右边详细页页面样式*/
.bot{
width: 1200px;
height: 9580px;
margin: auto;
border: 1px solid;
overflow: hidden;
}
.bot h1{
width: 1200px;
height: 70px;
text-align: center;
line-height:70px;
font-size: 40px;
border-bottom: 1px solid;
}
.twjs img{
width: 100%;
}
</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="center">
<div class="cen-l">
<img src="img/可乐大礼包/979403215.jpg" />
<div class="logo">
<h1>SUPER MARKET</h1>
</div>
</div>
<div class="cen-r">
<h2>百事可乐</h2>
<h1>单价：￥8</h1>
<div class="dizhi">
<span>地址：</span>
<select>
<option>一号楼</option>
<option>二号楼</option>
<option>三号楼</option>
<option>四号楼</option>
</select>
<select>
<option>一单元</option>
<option>二单元</option>
<option>三单元</option>
<option>四单元</option>
</select>
</div>
<h4>选择套餐：</h4>
<div class="leixing">
<ul>
<li><a href="#">标准套餐</a></li>
<li><a href="#">套餐一</a></li>
<li><a href="#">套餐二</a></li>
<li><a href="#">套餐三</a></li>
</ul>
</div>
<div class="gm">
<a href="#">GOUMAI</a>
</div>
</div><!--右边详情页-->
</div>
<div class="bot">
<h1>产品详情</h1>
<div class="twjs">
<img src="img/可乐大礼包/1574847233326..jpg" />
</div>
</div>
<div class="bottom">
<img src="img/logo2.png" />
<a href="#DINGBU">返回顶部</a>
</div>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手