网站设计

最新推荐文章于 2025-09-13 09:06:35 发布

weixin_30449239

最新推荐文章于 2025-09-13 09:06:35 发布

阅读量371

点赞数

CC 4.0 BY-SA版权

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/ge-xia-jiudeng/p/10617523.html

码云链接：https://gitee.com/ge-xiajiu-deng/codes/koan87rwl4t91vdpi0jfb15#jquery-1.3.2.min

html代码如下：

<!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=gb2312" />

<title>首页</title>

<script type="text/javascript" charset="UTF-8" src="Templates/js/prefixfree.min.js"></script>
<style type="text/css">
.daohang{ border:#000000 solid 0px; width:100%; height:50px; background: #333333; line-height:50px; margin-bottom:0px;}
/*上边*/
#shang{ border:#000000 solid 0px; width:100%; height:100px; position:relative;}
#shang .tupian{ margin-left:200px;}
#shang .sousuo{ border:#000000 solid 0px; display:inline-block; margin-left:200px; position:absolute; bottom:20px;}
#shang .sousuo a{ text-decoration:none; color: #999999; font-size:12px;}
#shang input[name="name"]{ border:#000000 2px solid; width:400px; height:25px; vertical-align:top;}
#shang .sousuo .jingzi{ border: #FF0000 solid 0px; width:67 px; height:30px; margin-left:-10px; display:inline-block; color:#000000;}

#shang .yincang{ border: #CCCCCC solid 1px; width:250px; height:60px;display:inline-block;position:absolute; left:-100px; top:2px; margin-top:32px; visibility:hidden; background:#FFFFFF;}
#shang .yincang span{ vertical-align:top; font-size:14px;color:#CCCCCC;}
#shang .yincang .yincang1{ border: #CCCCCC solid 0px; width:60px; height:60px; display:inline-block;}
#shang .yincang .yincang2{ border: #CCCCCC solid 0px; width:180px; height:60px; display:inline-block; vertical-align:top;}
#shang .yincang .yincang2 span{ font-family: "微软雅黑"; font-size:14px;}

#shang .gouwu{ border: #CCCCCC solid 1px; width:150px; height:35px; display:inline-block; margin-left:700px;position:absolute; bottom:35px; }

#shang .gouwu li{ list-style:none; padding:0px; float:left;}

#shang .gouwu a{ text-decoration:none; color:#CCCCCC; font-size:14px;width:100px; height:35px; display:inline-block; line-height:35px; border:0px solid red;vertical-align:top;}
#shang .gouwu li:hover .yincang{ visibility:visible;}

/*#shang .gouwu img{ vertical-align:middle;}*/
/*购物车*/
#gouwuche{ background: #000000 scroll 0px; height:1000px; width:35px; background:#202020; position:fixed; top:0px; right:0px;}

#gouwuche .chezi{ background: #333333 scroll 1px; width:30px; margin-top:100px; text-align:center; }
#gouwuche .zi{ text-align:center; margin:20px auto; border:#000000 0px solid; width:25px; height:90px; border-bottom:#333333 1px solid; border-top:#333333 1px solid;}
#gouwuche .zi a{ text-decoration:none; color:#FFFFFF; font-size:14px;}
#gouwuche .zi:hover{ background:#FF0000;}
/*返回顶部与底部*/
#gouwuche .go{ border: #000000 0px solid; width:35px; height:50px; position:fixed; bottom:20px;}
#gouwuche .go a{ margin-top:10px; display:block;}

/*下边黑*/

#xia{ border:#000000 solid 1px;
width:100%;
height:320px;
background:#2C2C2C;}
#xia .tupian{ border:0px #000000 solid; width:1000px; margin:0 auto; margin-top:20px; text-align:center;}
#xia .tupian img{ margin-left:30px;}
#xia .xian{ border: #FF0000 0px solid; width:1000px; margin:20px auto;}
#xia .biankuang{border:0px #000000 solid; width:1250px; height:150px; margin:0 auto; margin-top:20px; text-align:center;}
#xia .biankuang a{ text-decoration:none; color:#8B939D; border: #FF0000 0px solid; width:80px; height:20px; margin-left:40px; text-align:center; display:inline-block; }
#xia .biankuang .shu{ margin-top:0px;}
#xia .biankuang .zuo{ border: #000000 solid 0px; width:400px; display:inline-block; vertical-align:top; margin: 20px auto;}
#xia .biankuang .zuo span{ color:#8B939D;}
#xia .biankuang .zhong{border: #000000 solid 0px; width:400px; display:inline-block; vertical-align:top; margin: 20px auto;}
#xia .biankuang .zhong span{ color:#8B939D;}
#xia .biankuang .you{border: #000000 solid 0px; width:400px; display:inline-block; vertical-align:top; margin: 20px auto;}
#xia .biankuang .you span{ color:#8B939D;}
#xia .xiaozi{ border:#000000 solid 0px; width:400px; margin:0 auto; text-align:center;}
#xia .xiaozi span{ color:#8B939D;}
#xia .xiaozi span a{ color:#8B939D; text-decoration:none;}

/*3D导航*/
.nav-menu {
display: block;
background: #74adaa;
width: 950px;
margin-left:250px;
}
.nav-menu > li {
display: inline;
float: left;
border-right: 1px solid #333333;
font-family: "微软雅黑";

}
.nav-menu > li:last-child {
border-right: none;
}
.nav-menu li a {
color: #fff;
display: block;
text-decoration: none;
font-family: 'sansationregular';
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
text-transform: capitalize;
overflow: visible;
line-height: 20px;
font-size: 20px;
padding: 15px 30px 15px 31px;
}
/* animation domination */
.three-d {
perspective: 200px;
transition: all .07s linear;
position: relative;
}
.three-d:not(.active):hover {
cursor: pointer;
}
.three-d:not(.active):hover .three-d-box, .three-d:not(.active):focus .three-d-box {
transform: translateZ(-25px) rotateX(90deg);
}
.three-d-box {
transition: all .3s ease-out;
transform: translatez(-25px);
transform-style: preserve-3d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
.front {
transform: rotatex(0deg) translatez(25px);
}
.back {
transform: rotatex(-90deg) translatez(25px);
color: #FFE7C4;
}
.front, .back {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background:#333333;
padding: 15px 30px 15px 31px;
color: white;
pointer-events: none;
box-sizing: border-box;
}
.nav-menu li .active .front, .nav-menu li .active .back, .nav-menu li a:hover .front, .nav-menu li a:hover .back {
background-color: #33C0E0;
background-size: 5px 5px;
background-position: 0 0, 30px 30px;
background-image: -*-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
}
.nav-menu ul {
position: absolute;
text-align: left;
line-height: 40px;
font-size: 14px;
width: 200px;
transition: all 0.3s ease-in;
transform-origin: 0px 0px;
transform: rotateX(-90deg);
backface-visibility: hidden;
}
.nav-menu > li:hover ul {
display: block;
transform: rotateX(0deg);
}

</style>

/*页面跳转*/

.tiaozhuan{ border:solid #000000 0px; width:100%; height:140px; margin:0 auto; text-align:center; margin-top:30px;}
.tiaozhuan a{ margin-left:15px;}
/*限时购*/
.xianshi{ border:solid #000000 0px; width:1000px; margin:0 auto;margin:50px auto;}
.xianshi table tr td .xiao{ font-size:14px; font-family:"微软雅黑";}
.xianshi table tr td .hui{ font-size:14px; font-family:"微软雅黑"; color:#999999;}
.xianshi table tr td .hong{ font-size:18px; font-family:"微软雅黑"; color:#FF0000;}
.xianshi table tr td .hongxiao{ font-size:14px; font-family:"微软雅黑"; color:#FF0000;}
.xianshi table tr td .div{}
.xianshi table tr td a{}
.xianshi table tr td a:hover{opacity:0.5;}

/*推荐*/
.tuijian{ border:solid #000000 0px; width:1200px; height:480px; margin:0 auto;}
.tuijian .kuai{ display:block;}
.tuijian .zuo{ border:solid #000000 0px; float:left;}

.tuijian .yincang{ border:#000000 0px solid; width:318px; height:20px; background:#494644; margin-top:-20px; visibility:hidden;}

.tuijian .yincang span{ color:#FFFFFF; font-size:12px; height:20px; width:318px; display:inline-block; text-align:center;}
.tuijian .you li{ list-style:none; float:left; border:#000000 0px solid;}
.tuijian .you li:hover{}
.tuijian .you li:hover .yincang span{ visibility:visible;background:#494644}
/*咖啡*/

.kafei{ border:solid #000000 0px; width:1000px; margin:0 auto;margin:50px auto;}
.kafei table tr td .xiao{ font-size:14px; font-family:"微软雅黑";}
.kafei table tr td .hui{ font-size:14px; font-family:"微软雅黑"; color:#999999;}
.kafei table tr td .hong{ font-size:18px; font-family:"微软雅黑"; color:#FF0000;}
.kafei table tr td .hongxiao{ font-size:14px; font-family:"微软雅黑"; color:#FF0000;}
.kafei table tr td .div{}
.kafei table tr td a:hover{opacity:0.5; text-align:center}

</style>

</head>
<body>

</div>

<div id="shang">
<a name="gotop"></a> <img src="images/ABUIABAEGAAg18XGuQUo-Zzo4wMwgwI4Pg.png" class="tupian" />
<div class="sousuo">
<input type="text" name="name" placeholder="请输入您想搜索的内容"/>
<a href="#" class="jingzi"><img src="images/soso.jpg" height="31" /></a> <br />
<span><a href="#">奶油蛋糕</a> <a href="#">马卡龙</a> <a href="#">芝士蛋糕</a> <a href="#">咖啡</a></span></div>
<div class="gouwu">
<li> <img src="images/2016-11-15_180828.png" /><a href="#">我的购物车</a>
<div class="yincang">
<div class="yincang1"><img src="images/2016-11-16_235855.png" /></div><div class="yincang2"><p></p><span>您的购物车内暂时没有任何产品。</span></div>
</div>
</li>
</div>
</div>

<div class="daohang">
<div id="nav">
<ul class="nav-menu clearfix unstyled">
<li><a href="index.html" class="three-d"> 首页 <span class="three-d-box"><span class="front">首页</span><span class="back">首页</span></span> </a></li>
<li><a href="html/zhutui.html" class="three-d"> RS推荐 <span class="three-d-box"><span class="front">RS推荐</span><span class="back">RS推荐</span></span> </a>

<div id="webwidget_slideshow_common3" class="webwidget_slideshow_common">
<ul>
<li><a href="html/shougonghongpei1.html" ><img border="0" src="images/ABUIABACGAAg1MrGuQUo2uLcmAUwgA849AM.jpg" width="100%" /><br/>
</a></li>
<li><img border="0" src="images/ABUIABACGAAgpJvquQUo_rnQxAUwgA849AM.jpg" width="100%" /><br/>
</li>

</ul>
<div style="clear: both"></div>
</div>

</div>
<div class="tiaozhuan"><a href="html/gaodiandianxin-1.html" ><img src="images/ABUIABAEGAAg6srruQUoooeUuAYwhgM4jAE.png" /></a><a href="html/shougonghongpei1.html" ><img src="images/ABUIABAEGAAg8c3GuQUosODbigcwhgM4jAE.png" /></a> <a href="html/kafeiyinpin-1.html" ><img src="images/ABUIABAEGAAgk87GuQUo47eU0gQwhgM4jAE.png" /></a></div>
<div class="xianshi">
<h3>今日限时购</h3>
<table >
<tr>
<td><a href="html/shouye1.html"><img src="images/ABUIABACGAAg8NzGuQUolt_N8gIwvAE4vAE.jpg" /></a></td>
<td><p><span class="xiao">曲奇饼干什锦巧克力味饼干浓浓牛<br />
油香味</span></p>
<p><span class="hui">风靡日本，精美高贵时尚</span></p>
<p><span class="hong">￥44.</span><span class="hongxiao">9</span></p></td>
<td><div class="div"></div></td>
<td><a href="html/shouye3.html"><img src="images/ABUIABACGAAgnefGuQUoqJKQzgUwvAE4vAE.jpg" /></a></td>
<td><p></p>
<span class="xiao">现烤　云南特产　经典玫瑰花饼　甜<br />
而不腻鲜花饼</span>
<p><span class="hui">无任何添加剂，纯手工制作</span></p>
<p><span class="hong">￥50.</span><span class="hongxiao">8</span></p></td>
<td rowspan="2"><a href="html/gaodiandianxin-1.html" ><img src="images/ABUIABAEGAAggtbGuQUoy5-JuwMw9QE4mwM.png" /></a></td>
</tr>
<tr>
<td><a href="html/shouye4.html"><img src="images/ABUIABACGAAgm_PGuQUo-qqP3QcwvAE4vAE.jpg" /></a></td>
<td><p><span class="xiao">正宗法师马卡龙甜点糕点西式点<br />
心休闲零食品</span>
<p><span class="hui">新鲜正宗，品质保证</span></p>
<p><span class="hong ">￥35.</span><span class="hongxiao">9</span></p></td>
<td><div class="div"></div></td>
<td><a href="html/shouye2.html"><img src="images/ABUIABACGAAgnuvGuQUoke-ugAEwvAE4vAE.jpg" /></a> </td>
<td><p></p>
<span class="xiao">蛋糕冰淇凌 100%天然乳脂健康兼<br />
美味漂亮的童趣图案</span>
<p><span class="hui">冰淇凌蛋糕营销冠军</span></p>
<p><span class="hong">￥278.</span><span class="hongxiao">00</span></p></td>
</tr>
</table>
</div>
<div class="tuijian">
<h3>最新推荐</h3>
<img src="images/ABUIABAEGAAgptXGuQUo4Jqb9wEwsAk4Ag.png"/>
<div class="zuo"><a href="html/zhutui.html" ><img src="images/ABUIABAEGAAg4-fGuQUouqzYuQUw9QE4mgI.png"/></a><img src="images/ABUIABAEGAAg8vfGuQUo1ML5LjD1ATiBAQ.png" class="kuai"/></div>
<div class="you"><li><a href="html/shouye5.html"> <img src="images/ABUIABACGAAgzfPGuQUo3dOAmgEwvgI4mwM.jpg" width="318" height="411" /></a><div class="yincang"><span>俄罗斯提拉米苏蛋糕进口巧克力樱桃奶油夹心千层蛋糕</span></div></li><li><a href"html/shouye6.html"><img src="images/ABUIABACGAAgi-PGuQUo6PHitgUwvgI4mwM.jpg" /></a><div class="yincang"><span>粉色纸杯蛋糕艺术杯子蛋糕围边婚庆蛋糕纸杯</span></div></li><li><a href="html/shouye7.html"><img src="images/ABUIABACGAAgj-PGuQUosKrQywYwvgI4mwM.jpg" /></a><div class="yincang"><span>新鲜现做现烤面包纯手工无添加奶酪杂粮早餐</span></div></li></div>
</div>
<div class="kafei">
<h3>咖啡饮品</h3>
<img src="images/ABUIABAEGAAgptXGuQUo4Jqb9wEwsAk4Ag.png" width="1000" />
<table >
<tr>
<td><a href="html/shougonghongpei1.html"><img src="images/ABUIABACGAAglLbKuQUovKGuhAMwvAE4vAE.jpg"/></a></td>
<td><p><span class="xiao">韩国原装进口乐天芒果汁饮料　一箱<br />
180mlx15灌</span></p>
<p><span class="hui">夏季饮品，零食品</span></p>
<p><span class="hong">￥47.</span><span class="hongxiao">5</span></p></td>
<td><div class="div"></div></td>
<td><a href="html/shouye8.html"><img src="images/ABUIABACGAAg_b-KuQUosMKK_wQwvAE4vAE.jpg" /></a></td>
<td><p></p>
<span class="xiao">美国原装进口饮料　地扪西梅汁　纯果 <br />
汁不加防腐剂</span>
<p><span class="hui">果蔬汁，纯果汁不加水</span></p>
<p><span class="hong">￥39.</span><span class="hongxiao">00</span></p></td>
<td rowspan="2"><a href="html/kafeiyinpin-1.html" ><img src="images/ABUIABAEGAAgtq7KuQUovo6s2wcw9QE4mwM.png" /></a></td>
</tr>
<tr>
<td><a href="html/kafeiyinpin-1.html"><img src="images/ABUIABACGAAgi77KuQUo9oC8vAYwvAE4vAE.jpg" /></a></td>
<td><p><span class="xiao">明星产品速溶黑咖啡　无糖纯咖啡粉 <br />
无奶顺滑</span>
<p><span class="hui">2*100g 零添加</span></p>
<p><span class="hong ">￥99.</span><span class="hongxiao">9</span></p></td>
<td><div class="div"></div></td>
<td><a href="html/kafeiyinpin-1.html"><img src="images/ABUIABACGAAgysHKuQUoruvW0AQwvAE4vAE.jpg" /></a> </td>
<td><p></p>
<span class="xiao">统一assam 阿萨姆小奶茶360ml/瓶 <br />
椰奶型　小椰</span>
<p><span class="hui">丝柔顺滑，回到奶茶小时候</span></p>
<p><span class="hong">￥6.</span><span class="hongxiao">9</span></p></td>
</tr>
</table>
</a> </div>

<div id="xia">
<div class="tupian"><img src="images/ABUIABAEGAAgjrnLuQUos7CamgIwqgE4OQ.png" /><img src="images/ABUIABAEGAAgsb-QuQUo6OKw1QIw0wE4OQ.png" /><img src="images/ABUIABAEGAAgs7nLuQUo5r3JrwcwjwE4OQ.png" /><img src="images/ABUIABAEGAAgwrnLuQUo98PYsgIwvAE4OQ.png" /></div>
<div class="xian"><img src="images/ABUIABAEGAAgptXGuQUo4Jqb9wEwsAk4Ag.png" width="1000"/></div>
<div class="biankuang">
<div class="zuo"><a href="index.html">首页</a><a href="html/zhutui.html">RS主推</a><a href="html/kafeiyinpin-1.html">咖啡/饮品</a>
<p><a href="html/gaodiandianxin-1.html">糕点点心</a><a href="html/shougonghongpei1.html">手工烘培</a><a href="html/denglu.html">会员登陆</a></p>
</div>
<img src="images/ABUIABAEGAAglKrotwUovPLbkAcwAThj.png" class="shu"/>
<div class="zhong"><span>订购电话:15237345886<p> 河南财政金融学院（龙子湖校区）B5215<p>欢迎众筹</p></span></div>
<img src="images/ABUIABAEGAAglKrotwUovPLbkAcwAThj.png" class="shu"/>
<div class="you"><span>营业时间:9:00-22:00</span></div>
</div>
<div class="xiaozi"><span>手机版|<a title="点这里" target="m" href="html/banquan.html">版权所属</a> <a title="加入我们" href="html/zhuce.html">5215团队</a> 搭建|管理登陆</span></div>
</div>
<a name="gobottom"></a>
</body>
</html>