前端大作业——靓丽皮包销售系统

一、 实验需求分析

1.顶部导航条,分为系统名称综述、简述、分类、搜索框。

2.录播大图5张,使用bootstrap 使用class=”carousel slide”.

3.轮播图下每个tab标签与导航二级子菜单联动,使用class=”feature-divider”.每部分子内容包括对皮包名称、皮包品牌简介,以及皮包公司简介。

4.四个二级子菜单右边为用户登录模板,包含用户名,密码,记住我,登录按钮,左下角有忘记密码链接。其中当光标放置sign in 按钮时,按钮发生动态变化。

5.四个二级子菜单与用户登录模板使用栅格结构实现两列布局与响应式。四个二级子菜单class=”col-md-9”, 用户登录模板class=”col-md-3”

6.二级菜单下将皮包展示分为四列布局,使用栅格结构,每个div下有产品图片、分类名称、以及“点我浏览”超链接按钮。其中产品图片设置为圆形。

7.底部版权信息有

© 2020 ZUA. All Rights Reserved | Design by 杨静妍

字样。

二、功能模块

<
模块 功能描述
导航栏 分为综述、简介、分类、搜索
1、设计的目的 做个网站以怀念个人旅游的日子。还有此刻的美丽,以及无限的未来向往。 2、设计布局 主页设计布局是在网站的左上角是网站标题名称、当前在线人数等,有背景图引入,右上角有个人头像模态下拉框,点击出现下拉列表,包含我的旅游日记、个人中心、退出等链接,还有登录、注册按钮,点击登录按钮来到登录页面,网站设计初衷就是自己要登录后才能发布旅游日记,这样更能保证私密性。网站中央是内容,包含三大板块,分别是最热、最新、话题三个主题驿站,每个主题下面是列出5条内容日记的标题链接,点击对应链接跳转到日记详情页面,最热代表浏览次数最多,最新就是根据发布旅游日记的时间来排序,最新发的日记内容排在最前面,话题是根据这次发布旅游日记的主题来排序的。网站尾部的左下角是网站设计目的简介,右下角分别是个人联系方式、合作方式、赞助商本人等。点击名字会弹出图片。 3、网站具体设计过程 首先选定 本网页制作工具是前端开发利器: WebStorm,创建前端项目工程,并创建相应的文件夹,存放各个css、js,还有网页中用到的各种图片,以及除了主页面index.html之外的二级页面,其存放在html文件夹下,在各个二级页面与主页跳转的网页链接上采用相对路径而不是绝对路径,创建好的项目工程目录结构如下所示; 首先设计网站主页也就是核心内容index.html,所有的二级页面都可以从主页跳转过去,相应的二级页面也都有主页的链接,可以随时返回到主页面页面总体采用 CSS+DIV 布局,最外层DIV为框架,对重复页面代码进行抽取,比如网站头部用header.html来代替,网站底部用footer.html来代替,在各个要引用的网页上直接在其头部和尾部用iframe标签引入即可(),在背景图引入时采用(background-image:url("../pic/backpic.jpeg"); background-repeat: no-repeat; background-size:100% a)background-image标签进行操作。在日记链接显示以及网站底部链接上采用ui、li标签,在中屏显示的最新、最热、话题等主题下的具体旅游日记标题。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值