前端项目实战
文章平均质量分 87
上善若水
每天努力一点,就离大神们近一点。
展开
-
八、品优购首页制作_主体区域(下)
一、楼层区floor制作 注意这个floor,不要给高度,内容有多少,算多少。 第一楼是家用电器模块:里面包含两个盒子 1号盒子box_hd,给一个高度,有个下边框,里面分为左右2个盒子。 2号盒子box_bd,不要给高度 1.1、box_hd 模块 有高度可以不用清除浮动 左边h3,盒子左浮动 右边tab-list,右浮动,因为用到tab切换效果,所以里面要用ul和li来做 1.2 tab栏原理-布局需求 index.html <!DOCTYPE html> <html l原创 2021-05-08 22:58:53 · 161 阅读 · 0 评论 -
七、品优购首页制作_主体区域(上)
代码下载地址:https://gitee.com/bitaotao/quality-shopping-static-page.git 一、品优购首页制作 1.1、main主体模块制作 之前写的就是模块化中的公共部分。 main主体模块是index里面专有的,注意需要新的样式文件index.css。 main盒子宽度为980px,位置距离左边220px(margin-left),给高度就不用清除浮动。 main里面包含左侧盒子,左浮动,focus焦点图模块 main里面包含右侧盒子,右浮动,newsfl.原创 2021-05-08 21:48:30 · 256 阅读 · 0 评论 -
六、品优购首页制作_底部区域
代码下载地址:https://gitee.com/bitaotao/quality-shopping-static-page.git 一、品优购首页制作 1.1、footer底部制作 footer页面底部盒子通栏给一个高度和灰色的背景 footer里面有一个大的版心 版心里面包含1号盒子,mod_service是服务模块,mod是模块的意思 版心里面包含2号盒子,mod_help是帮助模块 index.html <!DOCTYPE html> <html lang="en">.原创 2021-05-07 19:01:42 · 184 阅读 · 0 评论 -
五、品优购首页制作_导航区域
代码下载地址:https://gitee.com/bitaotao/quality-shopping-static-page.git 一、品优购首页制作 1.1、nav导航制作 nav盒子通栏有高度,而且有个下边框 1号盒子左侧浮动,dropdown 2号盒子左侧浮动,navitems导航栏组 1号盒子有讲究,根据相关性里面包含 .dt 和 .dd 两个盒子 index.html <!DOCTYPE html> <html lang="en"> <head> .原创 2021-05-07 19:00:38 · 277 阅读 · 1 评论 -
四、品优购首页制作_header区域
代码下载地址:https://gitee.com/bitaotao/quality-shopping-static-page.git #二、品优购首页制作 2.1、header制作 header盒子必须要有高度 1号盒子是logo标志定位 2号盒子是search搜索模块定位 3号盒子是hotwords热词模块定位 4号盒子是shopcar购物车模块 count统计部分用绝对定位做 count统计部分不要给宽度,因为可能买的件数比较多,让件数撑开就好了,给一个高度 一定注意左下角不.原创 2021-05-07 18:59:34 · 241 阅读 · 0 评论 -
三、品优购首页制作_快捷导航区域
代码下载地址:https://gitee.com/bitaotao/quality-shopping-static-page.git 一、品优购首页制作 网站的首页一般都是使用index命名,比如index.html 或者 index.php。 我们开始制作首页的头部和底部的时候,根据模块话开发,样式要写到common.css里面。 1.1、常用模块类名命名 以下是我们约定的命名模块,同学们可以直接使用以下类名即可。 名称 说明 快捷导航栏 shortcut 头部 header .原创 2021-05-07 18:57:37 · 360 阅读 · 0 评论 -
一、品优购项目介绍与环境搭建(上)
一、目标 能够独立完成品优购首页制作 能够独立完成品优购列表页制作 能够独立完成品优购注册页制作 能够把品优购网站部署上线 二、规划 2.1、网站制作流程 2.2、品优购项目整体介绍 项目名称:品优购 项目描述:品优购是一个电商网站,我们要完成PC端首页、列表页、注册页面的制作。 2.3、学习目的 电商类网站比较综合,里面需要大量的布局技术,包括布局方式、常见效果以及周边技术。 品优购项目能复习、总结、提高基础班所学布局技术。 写完品优购项目,能对实际开发中制作PC端页面流程\color{red原创 2021-05-07 18:49:36 · 742 阅读 · 0 评论 -
二、品优购项目介绍与环境搭建(下)
一、品优购项目环境搭建 1.1、模块化开发 所谓模块化:将一个项目按照功能划分,一个功能一个模块,互不影响。模块化开发具有重复使用、更换方便等优点。 有些样式和结构在很多页面都会出现,比如页面头部和底部,大部分页面都有。此时,可以把这些结构和样式单独作为一个模块,然后重复使用。 这里最典型的应用就是common.css公共样式\color{red}{common.css公共样式}common.css公共样式。写好一个样式,其余的页面用到这些相同的样式。 模块化开发具有重复使用,修改方便等优点 commo原创 2021-05-07 18:53:25 · 247 阅读 · 0 评论