web前端+html、css+水果商城+大学生期末课程作业
资源内容介绍
水果商城网页该项目是用html，css以及一些简单的js写的前端静态页面，包含轮播图、导航菜单、以及四个二级页面，以及一些简单的js代码。轮播图是寸css写的，没有含有js代码，只有最简单的轮播功能，没有切换按钮和治图片指示器。还有一个用js写的时间展示功能，比较简单。页面比较简单，基本上都是html和css代码，适合给学习web课程的大学生当作期末作业，页面整体布局相对合理，而且还有交互。代码简单且容易理解，可以应对老师的提问，页面总体使用的是flex布局，也搭配了一些css动画。对现在主流的浏览器都可以兼容，对一些老版本的ie浏览器可能不兼容，需要注意，代码注释写的相对比较清晰。项目启动建议搭配VS code使用，需要下载插件Live server。启动非常的简单，找到项目中的inde.html，右键Open with Live Server运行就可以了，看到浏览器自动打开且页面展示出来代表启动成功，如果使用其他的ide遇到问题，可联系。以上就是项目目前存在的功能，以及使用方法，如果需要扩展功能，如果需要扩展页面，或者增加其他的功能，与本人联系可酌情考虑。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>建站abc</title> <link rel="stylesheet" href="./css/reset.css"> <link rel="stylesheet" href="http://at.alicdn.com/t/font_3269029_ip4jnm2rjme.css"> <link rel="stylesheet" href="./css/public.css"> <link rel="stylesheet" href="./css/index.css"></head><body> <!-- 头部导航开始 --> <div class="top_nav w"> <div class="top_logo"> <img src="./img/首页/01.png" alt=""> </div> <ul> <li> <a href="./index.html">网站首页</a> </li> <li> <a href="./two.html">狗狗分类</a> </li> <li> <a href="./about.html">关于我们</a> </li> <li> <a href="./shop.html">店面分布</a> </li> <li> <a href="##">新闻资讯</a> </li> </ul> <div class="top_r"> <div id="time-box"></div> </div> </div> <!-- 头部导航结束 --> <!-- 花里胡哨的第二版图片开始 --> <div class="banner"> <div class="banner_top"> <ul> <li> <img src="./img/首页/02.jpg" alt=""> </li> <li> <img src="./img/首页/04.jpg" alt=""> </li> <li> <img src="./img/首页/02.jpg" alt=""> </li> </ul> </div> <div class="banner_c"> <div class="yuan"></div> <div class="yuan"></div> </div> </div> <!-- 花里胡哨的第二版图片结束 --> <!-- 花里胡哨第三版开始 --> <div class="three_bg"> <div class="three w"> <div class="t_center w"> <h1>做好吃的水果</h1> <h6>百年品牌</h6> <img src="./img/首页/00_1.png" alt=""> <div class="line"> <hr> <img src="./img/首页/00.png" alt=""> <hr> </div> </div> <p>xx品连锁有限公司自1997年创立以来，始终秉承“新鲜才好吃”的经营理念，致力于打造专业的水果供应链公司、专业的水果品牌运营商。目前已拥有<br>以江、浙、沪、皖、渝为中心1100余家门店，5大运营品牌，6大恒温、冷藏配送中心。通过优质的果品质量，一流的客户服务，积极承担社会责任，争<br>创世界水果第一连锁。 </p> <button>走进我们+</button> <img src="./img/首页/00_2.png" alt=""> </div> </div> <!-- 花里胡哨第三版结束 --> <!-- 第四版开始 --> <div class="four_bg"> <div class="four w"> <div class="f_top"> <h1>当季鲜果</h1> <h6>养生健康</h6> <div class="line"> <hr> <img src="./img/首页/00_0.png" alt=""> <hr> </div> </div> </div> <ul class="w"> <li> <img src="./img/首页/06.jpg" alt=""> <div class="f_con"> <p> 猕猴桃新鲜当季奇异果 猕猴桃<br>￥24.00 </p> <button>立即购买</button> </div> </li> <li> <img src="./img/首页/07.jpg" alt=""> <div class="f_con"> <button>更多水果+</button> </div> </li> <li> <img src="./img/首页/08.jpg" alt=""> <div class="f_con"> <p> 猕猴桃新鲜当季奇异果 猕猴桃<br>￥24.00 </p> <button>立即购买</button> </div> </li> </ul> </div> <!-- 第四版结束 --> <!-- 第五版开始 --> <div class="five w"> <div class="f_top"> <h1>我们的优势</h1> <h6>四大优势</h6> <div class="line"> <hr> <img src="./img/首页/00.png" alt=""> <hr> </div> </div> <div class="f_main"> <div class="f_m_l"> <div class="f_m_t"> <i class="iconfont icon-xitong"></i> <h1>全球精选<p>一站式生鲜购物方案</p> </h1> </div> <div class="f_m_t"> <i class="iconfont icon-pingguo2"></i> <h1>源头直采<p>精选正宗品质好食材</p> </h1> </div> </div> <img src="./img/首页/09.jpg" alt=""> <div class="f_m_l"> <div class="f_m_t"> <i class="iconfont icon-cangku"></i> <h1>多仓直发<p>特有次日送达服务</p> </h1> </div> <div class="f_m_t"> <i class="iconfont icon-rmb"></i> <h1>天天降价<p>会员专属优惠购不停</p> </h1> </div> </div> </div> </div> <!-- 第五版结束 --> <!-- 第六版开始 --> <div class="six_bg"> </div> <!-- 第六版结束 --> <!-- 第七版开始 --> <div class="seven w"> <div class="s_top"> <h1>新闻动态</h1> <h6>健康养生</h6> <div class="line"> <hr> <img src="./img/首页/00.png" alt=""> <hr> </div> </div> <div class="seven_con"> <ul> <li> <h1>07-14<p>2017</p></h1> <img src="./img/首页/07.png" alt=""> <div class="s_c_r"> <h2>xxx联手甘肃天水市政府 举办首届秦州大樱桃节</h2> <p>xxx联手甘肃天水市政府 举办首届秦州大樱桃节xxx联手甘肃天水市政府 举办首届秦州大樱桃节xxx联手甘肃天水市政府 举办首届秦州大樱桃节xxx联手甘肃天水市政府 举办首届秦州大樱桃节</p> <i class="iconfont icon-xiangyoujiantou"></i> </div> </li> <li> <h1>07-14<p>2017</p></h1> <img src="./img/首页/08.png" alt=""> <div class="s_c_r"> <h2>xxx联手甘肃天水市政府 举办首届秦州大樱桃节</h2> <p>xxx联手甘肃天水市政府 举办首届秦州大樱桃节xxx联手甘肃天水市政府 举办首届秦州大樱桃节xxx联手甘肃天水市政府 举办首届秦州大樱桃节xxx联手甘肃天水市政府 举办首届秦州大樱桃节</p> <i class="iconfont icon-xiangyoujiantou"></i> </div> </li> <li> <h1>07-14<p>2017</p></h1> <img src="./img/首页/09.png" alt=""> <div class="s_c_r"> <h2>xxx联手甘肃天水市政府 举办首届秦州大樱桃节</h2> <p>xxx联手甘肃天水市政府 举办首届秦州大樱桃节xxx联手甘肃天水市政府 举办首届秦州大樱桃节xxx联手甘肃天水市政府