前端成神之路-品优购项目(二)_知乎_

2022-04-13 0 629

php能写网页吗

# 品优购项目(二)

目标:

能课堂跟上pink老师的节奏完成品优购项目1. 品优购首页布局

命名集合:

| 名称 | 说明 | | —————- | ———————— | | 快捷导航栏 | shortcut | | 头部 | header | | 标志 | logo | | 购物车 | shopcar| | 搜索 | search | | 热点词 | hotwrods | | 导航 | nav| | 导航左侧 | dropdown包含.dd.dt | | 导航右侧 | navitems | | 页面底部 | footer | | 页面底部服务模块 | mod_service| | 页面底部帮助模块 | mod_help | | 页面底部版权模块 | mod_copyright|

1). nav 导航栏制作前端成神之路-品优购项目(二)_知乎_前端成神之路-品优购项目(二)_知乎_nav 盒子通栏有高度 而且有个下边框1号盒子 左侧浮动 dropdown下拉导航里面包含 dt dd 2号盒子右侧浮动navitems 导航栏组 前端成神之路-品优购项目(二)_知乎_前端成神之路-品优购项目(二)_知乎_2). footer 底部制作前端成神之路-品优购项目(二)_知乎_前端成神之路-品优购项目(二)_知乎_footer 页面底部盒子通栏 给一个高度灰色的背景footer 里面 首先一个 大 的版心版心里面包含 1号盒子mod_service 服务模块 module模块的意思版心里面包含 2号盒子 mod_help 帮助模块版心里面包含 3号盒子 mod_copyright 版权模块 3). mod_service服务模块制作前端成神之路-品优购项目(二)_知乎_前端成神之路-品优购项目(二)_知乎_4).main主体模块制作

这部分是 index 里面 专有的, 注意 需要新的样式文件index.css

前端成神之路-品优购项目(二)_知乎_前端成神之路-品优购项目(二)_知乎_ main 盒子 宽度 为980像素, 距离 左边 220给一个margin-left 就好了, 给高度就不用清除浮动。main 里面包含 左侧盒子 左浮动focus焦点图 模块 main 里面包含 右侧盒子 右浮动newsflash新闻快报模块

5). newsflash 新闻快报模块前端成神之路-品优购项目(二)_知乎_前端成神之路-品优购项目(二)_知乎_1 号盒子 为 news 新闻模块2 号盒子 为lifeservice生活服务模块3 号盒子为 bargain特价商品6). news 新闻模块前端成神之路-品优购项目(二)_知乎_前端成神之路-品优购项目(二)_知乎_注意,这里我们 分为 上下两个模块,但是 两个模块 都用div 1号 盒子news-hd 新闻头部模块给一个 高度 和 下边框 2号 盒子news-bd 新闻主题部分 里面 包含 ul 和li还有 链接 7). lifeservice生活服务模块前端成神之路-品优购项目(二)_知乎_前端成神之路-品优购项目(二)_知乎_

此地方有个小技巧,

lifeservice盒子 宽度为 250 但是装不开里面的 4个 小 li 可以让lifeservice里面的 ul宽度为 252就可以 装的下4个 小lilifeservice盒子overflow 隐藏多余的部分就可以了。8). recommend推荐模块前端成神之路-品优购项目(二)_知乎_前端成神之路-品优购项目(二)_知乎_里面包含2个盒子, 浮动即可1号盒子recom-hd 2号盒子recom-bd注意里面的小 竖线
免费系统电影

苹果CMS模板 杂七杂八 前端成神之路-品优购项目(二)_知乎_ https://www.pgcms.net/1659.html

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务