花卉电商网站设计

目录

 一.作品简介

二.网页效果

首页

花语 

登录界面 

注册界面

三.网页代码

首页

登录界面

注册界面

视频界面

 一.作品简介

网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件。

网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

二.网页效果

首页

花语 

登录界面 

注册界面 

视频界面 

三.网页代码

首页

<head>

<meta charset="utf-8" />

<title>花遇（首页）</title>

<link rel="stylesheet" type="text/css" href="css/reset.css" />

<link rel="stylesheet" type="text/css" href="css/index.css"/>

</head>

<div class="site-list">

<ul class="clearfix">

<li>

<a href="index1.html"><font color="coral"><b>首页</b></font></a>

</li>

<li>

<a href="dianying2.html">鲜花</a>

</li>

<li>

<a href="dianshij2.html">永生花</a>

</li>

<li>

<a href="#">在线订购</a>

</li>

<li class="qita">

<a href="#">其他</a>

<ul class="dis">

<li><a href="dianying2.html">礼品</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>

轮播图

<div class="site-content">

<div class="container">

<div class="box">

<ul id="imglist">

<li><img src="img/index/hua1.png" alt=""></li>

<li><img src="img/index/hua2.png" alt=""></li>

<li><img src="img/index/hua3.png" alt=""></li>

<li><img src="img/index/hua4.png" alt=""></li>

<li><img src="img/index/hua5.png" alt=""></li>

</ul>

<ul id="btnlist">

<li class="btn active"></li>

<li class="btn"></li>

<li class="btn"></li>

<li class="btn"></li>

<li class="btn"></li>

</ul>

</div>

<script src="js/lunb.js"></script>

</div>

</div>

tab菜单 

<div id="tab">

<div id="tabNav">

<p><strong>鲜花用途</strong></p>

<ul>

<li class="active">爱情</li>

<li>慰问</li>

<li>商务</li>

</ul>

</div>

<div id="main">

<div class="item show">

<div class="main-zuixin">

<div class="zuixin-left">

<img src="img/index/shengrihua.png" />

</div>

<div class="zuixin-right">

<div class="zuixin-right1">

<div>

<img src="img/index/aiqing1.png" />

</div>

<div>

<img src="img/index/aiqing2.png" />

</div>

</div>

<div class="zuixin-right2">

<div>

<img src="img/index/aiqing3.png" />

</div>

<div>

<img src="img/index/aiqing4.png" />

</div>

</div>

</div>

</div>

</div>

右侧菜单栏

<div class="tableft">

<div class="tableft-list">

<h3>鲜花花材</h3>

</div>

<hr size="1" color="#A2A2A2"/>

<div class="tableft-list">

<p><font face="微软雅黑" size="4"><i>1 </i></font></p>

<a href="#">玫瑰</a>

</div>

<div class="tableft-list">

<p><font face="微软雅黑" size="4"><i>2 </i></font></p>

<a href="#">康乃馨</a>

</div>

<div class="tableft-list">

<p><font face="微软雅黑" size="4"><i>3 </i></font></p>

<a href="#">郁金香</a>

</div>

<div class="tableft-list">

<p><font face="微软雅黑" size="4"><i>4 </i></font></p>

<a href="#">马蹄莲</a>

</div>

<div class="tableft-list">

<p><font face="微软雅黑" size="4"><i>5 </i></font></p>

<a href="#">向日葵</a>

</div>

</div>

底部栏

<div class="footer">

<div class="container">

<div class="footer-liebiao">

<div class="guanyu">

<table>

<tr class="neir">

<td colspan="5"><h4>关于我们</h4></td>

</tr>

<tr>

<td><a href="#">关于我们</a></td>

<td><a href="#">联系我们</a></td>

<td><a href="#">在线反馈</a></td>

<td><a href="#">侵权投诉</a></td>

</tr>

</table>

</div>

<div class="xieyi">

<table>

<tr class="neir">

<td><h4>协议声明</h4></td>

</tr>

<tr>

<td><a href="#">用户协议</a></td>

<td><a href="#">隐私政策</a></td>

<td><a href="#">历史版本</a></td>

<td><a href="#">知识产权声明</a></td>

</tr>

</table>

</div>

</div>

登录界面

<div class="box">

<div class="left"></div>

<div class="right">

<h4>登 录</h4>

<form action="#">

<input class="acc" type="text" id="username" placeholder="用户名"/>

<input class="acc" type="password" id="pwd" placeholder="密码"/>

</form>

<from action="#">

<input class="submit" type="submit" id="log" value="登录"/>

</from>

<div class="down">

<a href="zhuce.html">注册账号</a>

<a href="#">忘记密码？</a>

</div>

</div>

</div>

注册界面

<div class="box">

<div class="left"></div>

<div class="right">

<h4>用户注册</h4>

<form action="">

<input class="acc" type="text" id="username" placeholder="用户名"/>

<input class="acc" type="tel" id="phone" placeholder="手机号"/>

<input class="acc" type="password" id="pwd" placeholder="密码"/>

<input class="acc" type="password" id="pwd2" placeholder="确认密码"/>

</form>

<form action="">

<input class="submit" type="submit" id="log" value="注册"/>

</form>

</div>

</div>

视频界面

<head>

<meta charset="utf-8">

<title>鲜花和浪漫</title>

<link rel="stylesheet" type="text/css" href="css/reset.css" />

<link rel="stylesheet" type="text/css" href="css/Video.css" />

</head>

<body>

<div class="beijing">

<div class="header">

<div class="container">

<div class="site-logo">

<a href="#">

</a>

</div>

<div class="site-list">

<ul class="clearfix">

<li>

<a href="index1.html">首页</a>

</li>

<li>

<a href="dianying2.html"><font color="coral"><b>不止玫瑰有爱意</b></font></a>

</li>

</ul>

</div>

<div class="login">

<a href="dengru.html?">

<img src="img/index/yonghu3.png"/>

</a>

</div>

<div class="site-search">

<form action="">

<input class="search-text" type="text" placeholder="请输入关键字"/>

<input class="submit" type="submit" value="搜索"/>

</form>

</div>

</div>

</div>

<div id="ship">

<div class="container">

<video width="1000px" controls="controls" poster="img/huahai.jpg"">

<source src="img/shiping.mp4" type="video/mp4"></source>

</video>

</div>

</div>

</div>