192.大学生HTML5期末大作业 —【鲜花网店网页】 Web前端网页制作 html5+css3+js
目录
一、更多推荐
二、网页简介
三、网页文件
四、网页效果
五、代码展示
1.html
2.CSS
3.JS
六、总结
1.简洁实用
2.使用方便
3.整体性好
4.形象突出
5.交互式强
一、更多推荐
欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：
仙女网页设计-CSDN博客
5000+网页案例完整代码，主题涵盖30+种类型:
二、网页简介
本实例应用html5+css3+js： Div、导航栏、选项卡、图片轮翻效果、鼠标滑动特效、悬浮菜单、搜索等。适用于大学生网页课程作业设计、公司网页制作等，供大家参考。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
三、网页文件
本网页实例共包含5个页面：
四、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
五、代码展示
1.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>鲜花网站</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/web.js" type="text/javascript"></script>
</head>
<body>
<div class="header">
<div class="logo"><a href=""><img src="picture/logo.jpg"></a></div>
<div class="nav">
<ul>
<li class="cur"><em><span>首页</span><a href="index.html">HOME</a></em></li>
<li><em><span>关于我们</span><a href="about.html">ABOUT</a></em></li>
<li><em><span>永生花</span><a href="flowers-ysh.html">LIVING</a></em>
<ul>
<li><a href="">大地农园</a></li>
<li><a href="">厄瓜多尔</a></li>
<li><a href="">苔藓</a></li>
<li><a href="">荷兰进口棉花</a></li>
</ul>
</li>
<li><em><span>鲜花</span><a href="flowers.html">FLOWERS</a></em>
<ul>
<li><a href="">玫瑰</a></li>
<li><a href="">多肉植物</a></li>
<li><a href="">绣球花</a></li>
<li><a href="">薰衣草</a></li>
<li><a href="">太阳花</a></li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="header_r">
<div class="search_form fr">
<form>
<input type="text" class="search_text" placeholder="产品搜索">
<input type="button" class="search_btn" value="">
</form>
</div>
</div>
<div class="clear"></div>
</div>
<div class="flash">
<ul class="fadearry" id="index-ultab">
<li style=" background:url(images/fl01.jpg) no-repeat center top"><a target="_blank"> </a></li>
<li style=" background:url(images/fl01.jpg) no-repeat center top"><a target="_blank"> </a></li>
<li style=" background:url(images/fl01.jpg) no-repeat center top"><a href="" target="_blank"> </a></li>
<li style=" background:url(images/fl01.jpg) no-repeat center top"><a href="" target="_blank"> </a></li>
</ul>
<ul class="buttons ulnum">
<li><a target="_blank"> </a></li>
<li><a target="_blank"> </a></li>
<li><a target="_blank"> </a></li>
<li><a target="_blank"> </a></li>
</ul>
</div>
<div class="index_about wrap">
<p class="font01">About Us</p>
<p class="font02">关于我们</p>
<div class="info">
<p>上海xxx经过多年的发展与沉淀，"xxx"成为国内知名的精品花卉领导品牌，并得到国际市场的认可。xxx秉承"精诚合作，共生共赢"的理念，为客户提供优质的产品和差异化的服务。xxx国际化的培植标准和管理模式降低了生产成本，在永生花和鲜花等领域形成了从花卉培植到市场直销的先天优势，确保了花卉产品优异的品质，并得到市场的高度认可，成为国内永生花优质品牌专业供应商。</p>
</div>
</div>
<div class="index_fllist">
<div class="wrap">
<div class="case_img_scroll img_scroll_a"> <span class="prev prev_a"></span> <span class="next next_a"></span>
<div class="img_list img_list_a">
<ul class="clearfixed">
<li><a href="#"><img src="picture/icon01.png" /></a>
<p><a href="">永生花</a></p>
</li>
<li><a href="#"><img src="picture/icon02.png" /></a>
<p><a href="">鲜花</a></p>
</li>
<li><a href="#"><img src="picture/icon03.png" /></a>
<p><a href="">花卉知识</a></p>
</li>
<li><a href="#"><img src="picture/icon01.png" /></a>
<p><a href="">永生花</a></p>
</li>
<li><a href="#"><img src="picture/icon02.png" /></a>
<p><a href="">鲜花</a></p>
</li>
<li><a href="#"><img src="picture/icon03.png" /></a>
<p><a href="">花卉知识</a></p>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
</div>
...
2.CSS
代码如下（节选示例）：
/* CSS Initializing */
pre{white-space: normal;}
body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,form,p{margin:0px;padding:0px;}
body{font-size:12px;font-family:'微软雅黑';color: #010101;line-height:23px;background:#f0f0f0;background-size:100%;}
img{border:0;}
ul,li{list-style:none;list-style-type: none}
h1, h2, h3, h4, h5, h6 { font-size: 100% } /* 字体加粗与否，视页面标题更改 */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{ font-weight:bold;} /* 字体加粗与否，视页面标题更改 */
i,b{ font-size:12px; font-weight:normal;font-style: normal;}
input,button, textarea, select{ vertical-align: middle;}
input{ height:18px; color:#000000; line-height:18px;}
select{ height:23px; color:#000000; line-height:23px;}
button { cursor: pointer }
em, cite { font-style: normal; }
a{color:#010101;text-decoration:none;}
a:hover{color: #da0e78;text-decoration: none; list-style:none;}
.txtlf{ text-align:left;}
.txtrg{ text-align:right;}
.fl{ float:left;}
.fr{ float:right;}
.fix:after {content:'.';display:block;clear:both;visibility:hidden;height:0px;}/*清除浮动的一种方法，将此class名写在内部有浮动的标签中，便可清除子字元素的浮动，使用非常方便*/
.fix {zoom:1;}
.clearfixed:after { content: "."; clear: both; display: block; height: 0; overflow: hidden }
.clearfixed { zoom: 1 } /* 增加清除浮动样式时，要注意当前元素是否为块结构，如果不是，要添加属性 display: block */
.clear { display: block!important; float: none!important; clear: both; width: auto!important; height: 0;margin: 0 auto!important; padding: 0!important; font-size: 0; line-height: 0 }
.brank{ line-height:8px; clear:both; height:8px;margin: 0 auto!important; padding: 0!important; font-size: 0; float: none!important;}
.none{ display:none;}
table{<!--border-collapse:collapse;-->}
.header{height:112px;width:100%;position:relative;background:#fff;box-shadow:1px 1px 3px #999;}
.header .logo{width:178px;position:absolute;left:40px;top:18px;}
.header .nav{width:736px;margin:0 auto;}
.header .header_r{width:235px;position:absolute;right:40px;top:48px;}
.header .header_r a{font-size:14px;color:#010101;}
.header .header_r .search_form{width:127px;height:20px;background:url(../images/searchbg.png) no-repeat;}
.header .header_r .search_form .search_text{border:none;background:none;width:94px;padding:0 6px;height:20px;line-height:20px;vertical-align:top;}
.header .header_r .search_form .search_btn{border:none;background:none;width:20px;height:20px;cursor:pointer; vertical-align:top;}
.header .nav li{float:left;width:104px;height:112px;text-align:center;position:relative;}
.header .nav li a{display:inline-block;width:104px;height:94px;padding-top:18px;line-height:94px;font-size:14px;color:#010101;overflow:hidden}
.header .nav li span{display:block;width:104px;height:94px;padding-top:18px;line-height:94px;font-size:14px;color:#010101;overflow:hidden;margin-top:0;}
.header .nav li em{display:block;width:104px;height:112px;overflow:hidden;}
.header .nav li:hover a,.header .nav li.cur a{color:#fff;background:#dd137b;vertical-align:top;}
.header .nav li:hover span,.header .nav li.cur span{margin-top:-112px; }
.header .nav li ul{position:absolute;width:192px;background:#fff; z-index:9;display:none;}
.header .nav li ul li{width:192px;height:33px;line-height:33px;text-align:left;}
.header .nav li ul li a{height:33px;line-height:33px;width:174px;padding:0 0 0 18px;background:#fff !important;color:#010101 !important;}
.header .nav li ul li a:hover{background:#000000 !important;color:#fff !important;}
.wrap{width:1116px;margin:0 auto;}
/**首页轮播**/
.flash{height:500px;overflow:hidden;position:relative;}
.fadearry li {height:500px;}
.fadearry li a{display:block;width:100%;height:500px;}
.fadearry li img{}
.buttons{position:absolute;right:160px;bottom:16px;}
.buttons li{float:left;margin-right:8px;}
.buttons li a{float:left;background:#fff;width:14px;height:4px;display:inline-block;}
.buttons li a:hover,.buttons li.current a{background:#da0e78;}
.container{width:1000px;margin:14px auto 0;position:relative;}
...
3.JS
代码如下（节选示例）：
/*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
//@ sourceMappingURL=jquery.min.map
*/
(function(e,t){var n,r,i=typeof t,o=e.location,a=e.document,s=a.documentElement,l=e.jQuery,u=e.$,c={},p=[],f="1.10.2",d=p.concat,h=p.push,g=p.slice,m=p.indexOf,y=c.toString,v=c.hasOwnProperty,b=f.trim,x=function(e,t){return new x.fn.init(e,t,r)},w=/[+-]?(?:d*.|)d+(?:[eE][+-]?d+|)/.source,T=/S+/g,C=/^[suFEFFxA0]+|[suFEFFxA0]+$/g,N=/^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/,k=/^<(w+)s*/?>(?:</1>|)$/,E=/^[],:{}s]*$/,S=/(?:^|:|,)(?:s*[)+/g,A=/(?:["/bfnrt]|u[da-fA-F]{4})/g,j=/"[^"rn]*"|true|false|null|-?(?:d+.|)d+(?:[eE][+-]?d+|)/g,D=/^-ms-/,L=/-([da-z])/gi,H=function(e,t){return t.toUpperCase()},q=function(e){(a.addEventListener||"load"===e.type||"complete"===a.readyState)&&(_(),x.ready())},_=function(){a.addEventListener?(a.removeEventListener("DOMContentLoaded",q,!1),e.removeEventListener("load",q,!1)):(a.detachEvent("onreadystatechange",q),e.detachEvent("onload",q))};x.fn=x.prototype={jquery:f,constructor:x,init:function(e,n,r){var i,o;if(!e)return this;if("string"==typeof e){if(i="<"===e.charAt(0)&&">"===e.charAt(e.length-1)&&e.length>=3?[null,e,null]:N.exec(e),!i||!i[1]&&n)return!n||n.jquery?(n||r).find(e):this.constructor(n).find(e);if(i[1]){if(n=n instanceof x?n[0]:n,x.merge(this,x.parseHTML(i[1],n&&n.nodeType?n.ownerDocument||n:a,!0)),k.test(i[1])&&x.isPlainObject(n))for(i in n)x.isFunction(this[i])?this[i](n[i]):this.attr(i,n[i]);return this}if(o=a.getElementById(i[2]),o&&o.parentNode){if(o.id!==i[2])return r.find(e);this.length=1,this[0]=o}return this.context=a,this.selector=e,this}return e.nodeType?(this.context=this[0]=e,this.length=1,this):x.isFunction(e)?r.ready(e):(e.selector!==t&&(this.selector=e.selector,this.context=e.context),x.makeArray(e,this))},selector:"",length:0,toArray:function(){return g.call(this)},get:function(e){return null==e?this.toArray():0>e?this[this.length+e]:this[e]},pushStack:function(e){var t=x.merge(this.constructor(),e);return t.prevObject=this,t.context=this.context,t},each:function(e,t){return x.each(this,e,t)},ready:function(e){return x.ready.promise().done(e),this},slice:function(){return this.pushStack(g.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(e){var t=this.length,n=+e+(0>e?t:0);return this.pushStack(n>=0&&t>n?[this[n]]:[])},map:function(e){return this.pushStack(x.map(this,function(t,n){return e.call(t,n,t)}))},end:function(){return this.prevObject||this.constructor(null)},push:h,sort:[].sort,splice:[].splice},x.fn.init.prototype=x.fn,x.extend=x.fn.extend=function(){var e,n,r,i,o,a,s=arguments[0]||{},l=1,u=arguments.length,c=!1;for("boolean"==typeof s&&(c=s,s=arguments[1]||{},l=2),"object"==typeof s||x.isFunction(s)||(s={}),u===l&&(s=this,--l);u>l;l++)if(null!=(o=arguments[l]))for(i in o)e=s[i],r=o[i],s!==r&&(c&&r&&(x.isPlainObject(r)||(n=x.isArray(r)))?(n?(n=!1,a=e&&x.isArray(e)?e:[]):a=e&&x.isPlainObject(e)?e:{},s[i]=x.extend(c,a,r)):r!==t&&(s[i]=r));return s},x.extend({expando:"jQuery"+(f+Math.random()).replace(/D/g,""),noConflict:function(t){return e.$===x&&(e.$=u),t&&e.jQuery===x&&(e.jQuery=l),x},isReady:!1,readyWait:1,holdReady:function(e){e?x.readyWait++:x.ready(!0)},ready:function(e){if(e===!0?!--x.readyWait:!x.isReady){if(!a.body)return setTimeout(x.ready);x.isReady=!0,e!==!0&&--x.readyWait>0||(n.resolveWith(a,[x]),x.fn.trigger&&x(a).trigger("ready").off("ready"))}},isFunction:function(e){return"function"===x.type(e)},isArray:Array.isArray||function(e){return"array"===x.type(e)},isWindow:function(e){return null!=e&&e==e.window},isNumeric:function(e){return!isNaN(parseFloat(e))&&isFinite(e)},type:function(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?c[y.call(e)]||"object":typeof e},isPlainObject:function(e){var n;if(!e||"object"!==x.type(e)||e.nodeType||x.isWindow(e))return!1;try{if(e.constructor&&!v.call(e,"constructor")&&!v.call(e.constructor.prototype,"isPrototypeOf"))return!1}catch(r){return!1}if(x.support.ownLast)for(n in e)return v.call(e,n);for(n in e);return n===t||v.call(e,n)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},error:function(e){throw Error(e)},parseHTML:function(e,t,n){if(!e||"string"!=typeof e)return null;"boolean"==typeof t&&(n=t,t=!1),t=t||a;var r=k.exec(e),i=!n&&[];return r?[t.createElement(r[1])]:(r=x.buildFragment([e],t,i),i&&x(i).remove(),x.merge([],r.childNodes))},parseJSON:function(n){return e.JSON&&e.JSON.parse?e.JSON.parse(n):null===n?n:"string"==typeof n&&(n=x.trim(n),n&&E.test(n.replace(A,"@").replace(j,"]").replace(S,"")))?Function("return "+n)():(x.error("Invalid JSON: "+n),t)},parseXML:function(n){var r,i;if(!n||"string"!=typeof n)return null;try{e.DOMParser?(i=new DOMParser,r=i.parseFromString(n,"text/xml")):(r=new ActiveXObject("Microsoft.XMLDOM"),r.async="false",r.loadXML(n))}catch(o){r=t}return r&&r.documentElement&&!r.getElementsByTagName("parsererror").length||x.error("Invalid XML: "+n),r},noop:function(){},globalEval:function(t){t&&x.trim(t)&&(e.execScript||function(t){e.eval.call(e,t)})(t)},camelCase:function(e){return e.replace(D,"ms-").replace(L,H)}
...
六、总结
一个优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
仙女网页设计-CSDN博客
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流
相关知识
HTML5期末大作业：鲜花网站设计——网上鲜花网页设计(5页) HTML+CSS+JavaScript 期末作业HTML代码
html5期末大作业鲜花花卉主题网页设计html网页模板源码？
大学生网页设计作业 html+css+js网上鲜花售卖网站(期末网页设计作业)
Web前端期末大作业
150.大学生HTML期末大作业 —【鲜花主题网页】 Web前端网页制作 html+css
用DIV+CSS技术设计的鲜花网站（web前端网页制作课作业）
web前端期末大作业：美食文化网页设计与实现——美食餐厅三级(HTML+CSS+JavaScript) (2)
学生花卉网网页设计作品 学生鲜花网页模板 简单在线花店主页成品 鲜花网页制作 HTML学生花店商城网站作业设计
HTML5期末大作业：网上花店/鲜花网站设计——大气的鲜花预订商城(6页) HTML+CSS+JavaScript
153.大学生HTML期末大作业 —【 环保科技公司响应式网页】 Web前端网页制作 html+css+js
网址: 192.大学生HTML5期末大作业 —【鲜花网店网页】 Web前端网页制作 html5+css3+js https://m.huajiangbk.com/newsview562602.html
| 上一篇: 花店主题整站网站模板资源 |
下一篇: html简单网页代码： DIV布 |
