欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

实战练习:水果主题网页设计 using HTML, CSS & JavaScript,以及企业官网的模拟创建示例

最编程 2024-07-22 15:25:04
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>最新资讯</title>
<link href="css/touch.css"rel="stylesheet">
<link href="css/share.css"rel="stylesheet">
<script src="js/jquery-1.12.3.js"></script>
</head>
<body>
<!--顶部导航-->
<div class="headr">
<div class="heard-con">
<img src="images/logo.jpg" style="margin-top: 7px;float: left;position: absolute">
<div class="headr-nav">
<ul>
<li><a href="index.html">首页</a> </li>
<li><a href="hot.html">蔬果热卖</a> </li>
<li><a href="produ.html">全部产品</a> </li>
<li><a href="consult.html" >最新资讯</a></li>
<li><a href="touch.html"style="color: #4AB344"><span style="color: #4AB344">联系我们</span></a> </li>
</ul>
<div class="sptopfoot">
<div class="spbottom" >
</div>
</div>
</div>
<div class="headr-right">
<i class="iconfont" style="font-size: 16px;margin-right: 10px">&#xe7d5;</i>
我的购物车 ∨
<div class="hr-car">
<i class="iconfont"style="font-size: 40px;margin-right: 10px">&#xe633;</i>
您的购物车内暂时没有任何产品。
</div>
</div>
</div>
</div>
<!--顶部导航结束-->
<!--banner图片-->
<div class="her-banner">

</div>
<!--banner图片结束-->
<div class="content">
<!--建议开始-->
<div class="recommand clear">
<div class="rec-cont clear">
<div class="rec-left">
<div class="classily">
<div class="cltop">
<p>产品分类</p>
</div>
<div class="cltcon">
<p><a href="#">国产水果</a> </p>
<p><a href="#"> 进口水果</a></p>
<p style="border-bottom:0px dashed #999999;"><a href="#">新鲜时蔬</a></p>
</div>

</div>
<div class="service">
<div class="cltop">
<p>在线客服</p>
</div>
<div class="sercon">
<