367. 简约的网上花店网站大学生期末大作业 Web前端网页制作 html5+css+js

仙女网页制作

于 2024-07-07 11:08:24 发布

阅读量1k

点赞数 17

CC 4.0 BY-SA版权

分类专栏： Web网页设计实例鲜花文章标签：前端 javascript html5 css 正则表达式 jquery css3

本文链接：https://blog.csdn.net/A240307/article/details/140243066

Web网页设计实例同时被 2 个专栏收录

826 篇文章

订阅专栏

鲜花

12 篇文章

订阅专栏

欢迎光临仙女的网页世界！这里有Web前端网页制作的各行各业的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html5+css+js：导航菜单、图片轮翻效果、鼠标悬停图片特效、视频、悬浮菜单、留言表单、登录页面等。适用于大学生网页课程作业设计、公司网页制作等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页实例共包含4个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<!doctype html>

<html lang="en">

<head>
<meta charset="utf-8">
<title>XXX花店-首页</title>

<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/common.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/ddsmoothmenu.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/jquery.elastislide.js"></script>
<script src="js/jquery.jcarousel.min.js"></script>
<script src="js/jquery.accordion.js"></script>
<script src="js/light_box.js"></script>
<script type="text/javascript">$(document).ready(function(){$(".inline").colorbox({inline:true, width:"50%"});});</script>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/orange.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/ddsmoothmenu.css"/>
<link rel="stylesheet" href="css/elastislide.css"/>
<link rel="stylesheet" href="css/home_flexslider.css"/>

</head>
<body>
   <div class="mainContainer big container">

<div class="header-wrapper">
<header class="container">
<div class="head-right">
<ul class="top-nav">
<li class=""><a href="#">我的账户</a></li>
<li class="my-wishlist"><a href="#">收藏</a></li>
<li class="checkout"><a href="#" >结算</a></li>
<li class="log-in"><a href="account_login.html" >登录</a></li>
</ul>
<section class="header-bottom">

<div class="cart-block">
                   <ul>
                       <li>(2)</li>
                       <li><a href="#" title="购物车"><img title="购物车" alt="购物车" src="picture/item_icon.png" /></a></li>
                       <li>购物车</li>
                   </ul>
                   <div id="minicart" class="remain_cart" style="display: none;">
                       <p class="empty">您的购物车共有2件商品</p>
                       <ol>
                          <li>
                               <div class="img-block"><img src="picture/small_img1.png" title="" alt="" /></div>
                               <div class="detail-block">
                                   <h4><a href="#" title="玫瑰">玫瑰</a></h4>
                                   <p>
                                       <strong>1</strong> x ￥99.00

                                   </p>
                                   <a href="#" title="Details">细节展示</a>
                               </div>
                               <div class="edit-delete-block">
                                   <a href="#" title="Edit"><img src="picture/edit_icon.png" alt="Edit" title="Edit" /></a>

                                   <a href="#" title="Remove"><img src="picture/delete_item_btn.png" alt="Remove" title="Remove" /></a>
                               </div>
                           </li>
                           <li>
                               <div class="img-block"><img src="picture/small_img.png" title="" alt="" /></div>
                               <div class="detail-block">
                                   <h4><a href="#" title="玫瑰">玫瑰</a></h4>
                                   <p>
                                       <strong>1</strong> x ￥99.00
                                   </p>
                                   <a href="#" title="Details">细节展示</a>
                               </div>
                               <div class="edit-delete-block">
                                   <a href="#" title="Edit"><img src="picture/edit_icon.png" alt="Edit" title="Edit" /></a>
                                   <a href="#" title="Remove"><img src="picture/delete_item_btn.png" alt="Remove" title="Remove" /></a>
                               </div>
                           </li>
                           <li>
                               <div class="total-block">共计:<span>￥198.00</span></div>
                               <a href="index.html" title="结算" class="orange-btn">结算</a>
                               
                           </li>
                       </ol>
                   </div>
               </div>

<div class="search-block">
<input type="text" value="搜索" />

<input type="submit" value="submit"/>

</div>
</section>
</div>

<h1 class="logo">
<img title="Logo" alt="Logo" src="picture/logo.png" /></h1>

<nav id="smoothmenu1" class="ddsmoothmenu mainMenu">

<ul id="nav">

<li class="active"><a href="index.html">首页</a></li>
<li ><a href="category.html">全部商品</a></li>
<li><a href="contact_us.html">留言板</a></li>
</ul>
</nav>

<div class="mobMenu">
<h1>
<span>菜单</span>
<a class="menuBox highlight" href="javascript:void(0);"></a>

<span class="clearfix"></span>

</h1>

<div id="menuInnner" style="display:none;">

<ul class="accordion">

<li class="active"><a href="index.html" >首页</a></li>
<li class="parent"><a href="category.html" >全部商品</a></li>
<li class=""><a href="contact_us.html" >留言板</a></li>
<span class="clearfix"></span>
</ul>

</div>
</div>
</div>

<section class="banner-wrapper">
<div class="banner-block container">
<div class="flexslider">
<ul class="slides">
<li><img title="Banner" alt="Banner" src="picture/banner1.png" /></li>
<li><img title="Banner" alt="Banner" src="picture/banner2.png" /></li>
<li><img title="Banner" alt="Banner" src="picture/banner3.png" /></li>
<li><img title="Banner" alt="Banner" src="picture/banner4.png" /></li>
</ul>
</div>
<ul class="banner-add">
<li class="add1"><a href="#" title=""><img title="add1" alt="add1" src="picture/banner_add1.png" /></a></li>
<li class="add2"><a href="#" title=""><img title="add2" alt="add2" src="picture/banner_add2.png" /></a></li>
</ul>
</div>
</section>

<section class="content-wrapper">
<div class="content-container container">
<div class="heading-block">
<h1>热卖商品</h1>
<ul class="pagination">
<li class="grid"><a href="#" title="网格"></a></li>

</ul>
</div>

...

2.CSS

代码如下（节选示例）：

   html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font: inherit;/*在一个声明中设置所有的字体属性*/
   vertical-align: baseline;/*设置元素的垂直对齐*/
}
html {
   font-size: 62.5%;
}
/* HTML5 display-role reset for older browsers */

   article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
   display: block;/*display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度*/
}
body {
   line-height: 1;
   border-top:5px solid;
}
ol, ul {
   list-style: none;
}
blockquote, q {
   quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
   content: '';
   content: none;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}
.left, .columns.left {

   float: left;/*columns：栏，纵队*/
}
.right, .columns.right {
   float: right;
}
.hide {
   display: none;
}
.highlight {
   background: #ff0;
}

.ie9, .ie9 * {
   font-family: Arial, "Definitely Not Helvetica", sans-serif !important;
}
body {
   background: #fff;
   font-family: "Droid Sans", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
   font-size: 16px;
   font-size:12px;
   line-height: 1.6;
   color: #555;
   position: relative;
   -webkit-font-smoothing: antialiased;
}
/*给字体做初始化*/
   h1, h2, h3, h4, h5, h6 {
   color: #1b1b1b;
   font-weight: bold;
   line-height: 1.6;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
   font-weight: inherit;
}
h1 {
   font-size: 46px;
   font-size: 4.6rem;
   margin-bottom: 12px;
}
h2 {
   font-size: 39px;
   font-size: 3.9rem;
   margin-bottom: 9px;
}
h3 {
   font-size: 29px;
   font-size: 2.9rem;
   margin-bottom: 9px;
}
h4 {
   font-size: 25px;
   font-size: 2.5rem;
   margin-bottom: 3px;
}
h5 {
   font-size: 19px;
   font-size: 1.9rem;
   font-weight: normal;
   margin-bottom: 3px;
}
h6 {
   font-size: 15px;
   font-size: 1.5rem;
   font-weight: normal;
}
.subhead {
   color: #777;
   font-weight: normal;
   margin-bottom: 20px;
}

...

3.JS

代码如下（节选示例）：

(function ($, document, window) {
   var
   // Default settings object.
   // See http://jacklmoore.com/colorbox for details.
   defaults = {
       transition: "elastic",
       speed: 300,
       width: false,
       initialWidth: "600",
       innerWidth: false,
       maxWidth: false,
       height: false,
       initialHeight: "450",
       innerHeight: false,
       maxHeight: false,
       scalePhotos: true,
       scrolling: true,
       inline: false,
       html: false,
       iframe: false,
       fastIframe: true,
       photo: false,
       href: false,
       title: false,
       rel: false,
       opacity: 0.9,
       preloading: true,

       current: "image {current} of {total}",
       previous: "previous",
       next: "next",
       close: "close",
       xhrError: "This content failed to load.",
       imgError: "This image failed to load.",

       open: false,
       returnFocus: true,
       reposition: true,
       loop: true,
       slideshow: false,
       slideshowAuto: true,
       slideshowSpeed: 2500,
       slideshowStart: "start slideshow",
       slideshowStop: "stop slideshow",
       onOpen: false,
       onLoad: false,
       onComplete: false,
       onCleanup: false,
       onClosed: false,
       overlayClose: true,
       escKey: true,
       arrowKey: true,
       top: false,
       bottom: false,
       left: false,
       right: false,
       fixed: false,
       data: undefined
   },

   // Abstracting the HTML and event identifiers for easy rebranding
   colorbox = 'colorbox',
   prefix = 'cbox',
   boxElement = prefix + 'Element',

   // Events
   event_open = prefix + '_open',
   event_load = prefix + '_load',
   event_complete = prefix + '_complete',
   event_cleanup = prefix + '_cleanup',
   event_closed = prefix + '_closed',
   event_purge = prefix + '_purge',

   // Special Handling for IE
   isIE = !$.support.opacity && !$.support.style, // IE7 & IE8
   isIE6 = isIE && !window.XMLHttpRequest, // IE6
   event_ie6 = prefix + '_IE6',

   // Cached jQuery Object Variables
   $overlay,
   $box,
   $wrap,
   $content,
   $topBorder,
   $leftBorder,
   $rightBorder,
   $bottomBorder,
   $related,
   $window,
   $loaded,
   $loadingBay,
   $loadingOverlay,
   $title,
   $current,
   $slideshow,
   $next,
   $prev,
   $close,
   $groupControls,

   // Variables for cached values or use across multiple functions
   settings,
   interfaceHeight,
   interfaceWidth,
   loadedHeight,
   loadedWidth,
   element,
   index,
   photo,
   open,
   active,
   closing,
   loadingTimer,
   publicMethod,
   div = "div",
   init;

   // ****************
   // HELPER FUNCTIONS
   // ****************

   // Convience function for creating new jQuery objects
   function $tag(tag, id, css) {
       var element = document.createElement(tag);

       if (id) {
           element.id = prefix + id;
       }

...