【网站设计实验周大作业纪念】小兔鲜儿数码商城网站

本文主要是介绍【网站设计实验周大作业纪念】小兔鲜儿数码商城网站，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

网站演示地址：
https://www.bilibili.com/video/BV17r4y1s7i5/
网站规划书
內容
前言要做的专题网站领域
设计一个数码商城，方便用户对各大品牌的商品进行对比和筛选
网站类型希望这个网站要做到的基本功能是什么（例如：专门介绍知识，或专门收集相关资源链接，或以图片展示为主，或交流互动。）
1.展示前沿产品
2.以商品展示为主
网站名称网站的名称很重要，有意义又好记
小兔鲜儿数码商城
网页描述网站的第一页写些有内容的东西，希望别人来到你的网站，第一页看到的简介内容是什么？详细写下来
1.首页
2.导航条
3.登录注册入口
4.搜索框
5.视频
6.前沿产品
7.购物车
栏目规划计划做几个栏目？每个栏目中的大概内容是什么？请列出规划的细节（这一步考虑得越详细，后面的工作会越轻松）（例如：在线讨论，课外拓展等）
分为5个栏目
手机电脑 U盘家电电视平板路由器
每个栏目下再找一些知名的品牌进行分类

页数首页加上分页，算算看要几页
例如：中文简历一页、英文简历一页等
15页
搜集相关资料可以应用各类资源搜集需要的资料。例如：图书、文献、网站资源、开源软件、网络文档、在线课程等
哔哩哔哩上黑马的教学视频
使用VScode进行编译
用谷歌浏览器进行测试

确定网站的风格准备用哪种主色调，版面如何布局？可以先在纸上画一下。
采用绿色为主色调，排版仿照小米商城
部分页面展示如下
在这里插入图片描述

部分代码：

<!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"><!-- meta:desc --><meta name="description" content="小兔鲜儿官网，致力于打造全球前沿的数码电商购物平台"><!-- meta:kw --><meta name="keywords" content="小兔鲜儿,数码，电商"><title>小兔鲜儿-前沿、优质、便捷！</title><!-- link:favicon --><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!-- 按顺序引入: 外链式样式表后写的生效 --><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/index.css">
</head><body><!-- 快捷导航 --><div class="shortcut"><div class="wrapper"><ul><li><a href="login.html">请先登录</a></li><li><a href="login2.html">免费注册</a></li><li><a href="order.html">我的订单</a></li></ul></div></div><!-- 头部 --><div class="header wrapper"><div class="logo"><h1><a href="#">小兔鲜儿</a></h1></div><div class="nav"><ul><li><a href="FirstPage.html">首页</a></li><li><a href="mobile.html" >手机</a></li><li><a href="TV.html">电视</a></li><li><a href="laptop.html">笔记本</a></li><li><a href="pad.html">平板</a></li><li><a href="fridge.html">家电</a></li><li><a href="netlink.html">路由器</a></li><li><a href="Upan.html">U盘</a></li><li><a href="decoration.html">配件</a></li></ul></div><div class="search"><input type="text" placeholder="搜一搜"><!-- 定位 放大镜 --><span></span></div><div class="car"><span>2</span></div></div><!--写商品列表--><table width="100%"  ><tr><td colspan="2"  ><h7>首页>耳机</h7></td></tr><tr><td style="background-color:black;width:100px;vertical-align:top;"><b><center><div style="color: white;">品牌</div></center></b><br><li><a href="https://www.vmall.com/portal/search/index.html?targetRoute=searchresult&searchWord=%25E8%2580%25B3%25E6%259C%25BA&searchHistoryShow=true&searchResultPageProdShow=true#/"  target="iframe_a"><center> <div style="color: white;">华为     ></div></center></a></li><li><a href="https://www.mi.com/search?keyword=%E8%80%B3%E6%9C%BA"  target="iframe_a"><center> <div style="color: white;">小米    ></div></center></a></li><li><a href="#"><center><div style="color: white;"></div></center></a></li><li><a href="#"><center><div style="color: white;"></div></center></a></li><li><a href="#"><center><div style="color: white;"></div></center></a></li><li><a href="#"><center><div style="color: white;"></div></center></a></li><li><a href="#"><center><div style="color: white;"></div></center></a></li></td><td style="background-color:white;height:200px;width:400px;vertical-align:top;"><iframe loading="lazy" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F010cc15c186224a8012092524a5783.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651230555&t=877970104b55634abacd51fdc6370069" width="100%" height="500px" name="iframe_a"></iframe></td></tr><tr><td colspan="2" style="background-color:black;text-align:center;" ><div style="color: #eeeeee;" >版权 © 小兔鲜儿.com</div></td></tr></table></body>