前端项目实战
关注
分享
扫一扫
文章平均质量分 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 · 180 阅读 · 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 · 279 阅读 · 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 · 208 阅读 · 0 评论 -
五、品优购首页制作_导航区域
代码下载地址：https://gitee.com/bitaotao/quality-shopping-static-page.git一、品优购首页制作1.1、nav导航制作nav盒子通栏有高度，而且有个下边框1号盒子左侧浮动，dropdown2号盒子左侧浮动，navitems导航栏组1号盒子有讲究，根据相关性里面包含 .dt 和 .dd 两个盒子index.html<!DOCTYPE html><html lang="en"><head> .原创 2021-05-07 19:00:38 · 315 阅读 · 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 · 255 阅读 · 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 · 390 阅读 · 0 评论 -
一、品优购项目介绍与环境搭建（上）
一、目标能够独立完成品优购首页制作能够独立完成品优购列表页制作能够独立完成品优购注册页制作能够把品优购网站部署上线二、规划2.1、网站制作流程2.2、品优购项目整体介绍项目名称：品优购项目描述：品优购是一个电商网站，我们要完成PC端首页、列表页、注册页面的制作。2.3、学习目的电商类网站比较综合，里面需要大量的布局技术，包括布局方式、常见效果以及周边技术。品优购项目能复习、总结、提高基础班所学布局技术。写完品优购项目，能对实际开发中制作PC端页面流程\color{red原创 2021-05-07 18:49:36 · 770 阅读 · 0 评论 -
二、品优购项目介绍与环境搭建（下）
一、品优购项目环境搭建1.1、模块化开发所谓模块化：将一个项目按照功能划分，一个功能一个模块，互不影响。模块化开发具有重复使用、更换方便等优点。有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复使用。这里最典型的应用就是common.css公共样式\color{red}{common.css公共样式}common.css公共样式。写好一个样式，其余的页面用到这些相同的样式。模块化开发具有重复使用，修改方便等优点commo原创 2021-05-07 18:53:25 · 271 阅读 · 0 评论