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

007的米奇妙妙屋

已于 2022-05-23 14:07:30 修改

阅读量1.1k

点赞数 1

分类专栏：网页入门文章标签： html5 css3

于 2022-04-11 13:17:28 首次发布

本文链接：https://blog.csdn.net/cchengjie007/article/details/124096860

版权

网页入门专栏收录该内容

9 篇文章 0 订阅

订阅专栏

网站演示地址：
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>