73. 大学生HTML5期末大作业 ―【响应式自适应网上鲜花店网页】 Web前端网页制作 html5+css3+js
目录
一、更多推荐
二、网页简介
三、网页文件
四、网页效果
五、代码展示
1.html
2.CSS
3.JS
六、总结
1.简洁实用
2.使用方便
3.整体性好
4.形象突出
5.交互式强
一、更多推荐
欢迎来到我的CSDN主页！Web前端网页制作、大学生期末大作业、课程设计、毕业设计、网页模版源码、学习资料等，更多优质博客文章、网页模板点击以下链接查阅：
仙女网页设计-CSDN博客
5000+完整代码，主题涵盖30+种类型:
二、网页简介
本实例应用html5+css3+js： 三级页面、导航菜单、选项卡、下拉菜单、鼠标悬停图片放大效果、无缝滚动插件、图片轮翻效果、留言表单等。适用于大学生网页课程作业设计、公司网页制作等。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
三、网页文件
本网页实例共包含16个页面：
四、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
五、代码展示
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>响应式网上鲜花店网站模板 - </title>
<meta name="keywords" content="响应式,网上,鲜花店,整站,网站模板" />
<meta name="description" content="响应式网上鲜花店整站网站模板下载。" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="shortcut icon" href="images/favicon.ico">
<!-- include main css -->
<link rel="stylesheet" type="text/css" href="css/slick.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery.mmenu.all.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery.mcustomscrollbar.css"/>
<link rel="stylesheet" href="css/animate.min.css">
<!--[if lt IE 9]>
<script src="js/html5.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<!--/************************************************************
* *
* *
* *
* 努力创建完善、持续更新插件以及模板 *
* *
**************************************************************-->
<body>
<div>
<!--header-->
<header class="header">
<section class="container naver clearfix">
<div class="logo pull-left"><a href="index.html" title="某某科技有限公司" alt="某某科技有限公司">MOU MOU</a></div>
<nav class="nav pull-left">
<ul>
<li class="active"><a href="index.html">首页</a></li>
<li><a href="brand.html">品牌简介</a>
<ul>
<li><a href="brand.html">品牌简介</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="honor.html">荣誉资质</a></li>
</ul>
</li>
<li><a href="product.html">产品中心</a>
<ul>
<li><a href="product.html">婚礼花艺</a></li>
<li><a href="product.html">爱情鲜花</a></li>
<li><a href="product.html">长辈鲜花</a></li>
</ul>
</li>
<li><a href="case.html">经典案例</a>
<ul>
<li><a href="case.html">经典案例</a></li>
<li><a href="#">新增分类</a></li>
</ul>
</li>
<li><a href="flower.html">花之物语</a>
<ul>
<li><a href="flower.html">花之物语</a></li>
<li><a href="#">养花知识</a></li>
</ul>
</li>
<li><a href="contact.html">联系我们</a>
<ul>
<li><a href="contact.html">联系我们</a></li>
<li><a href="message.html">在线留言</a></li>
<li><a href="job.html">人才招聘</a></li>
</ul>
</li>
</ul>
</nav>
...
2.CSS
代码如下（节选示例）：
@charset "utf-8";
.home-top-grid1 {
background: rgba(11, 100, 143, 0.7);
transition: 0.5s all;
}
.home-top-grid2 {
background: rgba(226, 23, 55, 0.5);
transition: 0.5s all;
}
.home-top-grid3 {
background: rgba(11, 100, 143, 0.4);
transition: 0.5s all;
}
* {
margin: 0;
padding: 0;
}
.iconfont {
font-family: 'iconfont';
}
body {
font-family: "微软雅黑";
overflow-x: hidden;
}
i,
em {
font-style: normal;
}
img {
max-width: 100%;
}
ul li {
list-style: none;
}
.vcenter {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
max-width: 100%;
max-height: 100%;
display: block;
vertical-align: middle;
margin: auto;
}
.tHide {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.blockFull {
display: block;
width: 100%;
height: 100%;
position: relative;
}
.relative {
position: relative;
}
a {
color: #666;
}
a:hover {
color: #dd0505;
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li {
margin: 0;
padding: 0;
}
img {
border: 0;
}
@media (min-width: 1600px) {
.container {
width: 1600px;
}
}
.container {
width: 1600px;
padding: 0;
}
.container .nav {
margin-left: 130px;
}
...
3.JS
代码如下（节选示例）：
.mCSB_container{
width:auto;
margin-right:30px;
overflow:hidden;
}
.mCSB_container.mCS_no_scrollbar{
margin-right:0;
}
.mCS_disabled>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar,
.mCS_destroyed>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar{
margin-right:30px;
}
.mCustomScrollBox>.mCSB_scrollTools{
width:16px;
height:100%;
top:0;
right:0;
}
.mCSB_scrollTools .mCSB_draggerContainer{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
height:auto;
}
.mCSB_scrollTools a+.mCSB_draggerContainer{
margin:20px 0;
}
.mCSB_scrollTools .mCSB_draggerRail{
width:2px;
height:100%;
margin:0 auto;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.mCSB_scrollTools .mCSB_dragger{
cursor:pointer;
width:100%;
height:30px;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:4px;
height:100%;
margin:0 auto;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
text-align:center;
}
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown{
display:block;
position:relative;
height:20px;
overflow:hidden;
margin:0 auto;
cursor:pointer;
}
.mCSB_scrollTools .mCSB_buttonDown{
top:100%;
margin-top:-40px;
}
/* horizontal scrollbar */
.mCSB_horizontal>.mCSB_container{
height:auto;
margin-right:0;
margin-bottom:30px;
overflow:hidden;
}
.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{
margin-bottom:0;
}
.mCS_disabled>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar,
.mCS_destroyed>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{
margin-right:0;
margin-bottom:30px;
}
.mCSB_horizontal.mCustomScrollBox>.mCSB_scrollTools{
width:100%;
height:16px;
top:auto;
right:auto;
bottom:0;
left:0;
overflow:hidden;
}
.mCSB_horizontal>.mCSB_scrollTools a+.mCSB_draggerContainer{
margin:0 20px;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
width:100%;
height:2px;
margin:7px 0;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger{
width:30px;
height:100%;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:100%;
height:4px;
margin:6px auto;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{
display:block;
position:relative;
width:20px;
height:100%;
overflow:hidden;
margin:0 auto;
cursor:pointer;
float:left;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{
margin-left:-40px;
float:right;
}
...
六、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
相关知识
HTML5期末大作业：鲜花网站设计——网上鲜花网页设计(5页) HTML+CSS+JavaScript 期末作业HTML代码
Web前端期末大作业
153.大学生HTML期末大作业 —【 环保科技公司响应式网页】 Web前端网页制作 html+css+js
大学生网页设计作业 html+css+js网上鲜花售卖网站(期末网页设计作业)
HTML5期末大作业：网上花店/鲜花网站设计——大气的鲜花预订商城(6页) HTML+CSS+JavaScript
html5期末大作业鲜花花卉主题网页设计html网页模板源码？
用DIV+CSS技术设计的鲜花网站（web前端网页制作课作业）
HTML5七夕情人节表白送花网页制作(HTML+CSS+JavaScript)
150.大学生HTML期末大作业 —【鲜花主题网页】 Web前端网页制作 html+css
web前端期末大作业：美食文化网页设计与实现——美食餐厅三级(HTML+CSS+JavaScript) (2)
网址: 73. 大学生HTML5期末大作业 ―【响应式自适应网上鲜花店网页】 Web前端网页制作 html5+css3+js https://m.huajiangbk.com/newsview561484.html
| 上一篇: 网上花店网页代码 |
下一篇: 漂浮花朵网页特效的制作 |
