前言
大部分都是html +css ，小部分用了element-UI做的小插件
如单选框 复选框，轮播图都是用vue做的
2.4 nav 导航制作
- nav盒子通栏有高度，而且有个下边框
- 1号盒子左侧浮动，dropdown
- 2号盒子右侧浮动，navitems导航栏组
- 1号盒子他是有两个部分，包含dt和dd两个盒子
ul 里面放li ，li里面放a ，a转换为块级元素，使用pandding挤开
2.5 底部模块
先建一个超大盒子，给一个高度和背景颜色
里面用一个版心盒子 ，准备三个小模块 上 中 下
给一个pandding-top 将内容挤下来
- footer页面底部盒子通栏给一个高度和灰色的背景
- footer里面有一个大的版心
- 版心里面包含1号盒子，mod_service是服务模块，mod是模块的意思
- 版心里面包含2号盒子，mod_help是帮助模块
- 版心里面包含3号盒子，mod_copyright是版权模块
如图所示：
2.6 主体模块（main）
以前书写的就是模块化中的公共部分.
main主体模块是index里面专有的，注意需要新的样式文件index.css。
- main盒子宽度为980像素，位置距离左边220px(margin-left)，给高度就不用清除浮动
- main里面包含左侧盒子，左浮动，focus焦点图模块
- main里面包含右侧盒子，右浮动，newsflash新闻快报模块
我用vue的做了轮播图
如图：
// element-ui做的0
<div class="block">
<el-carousel height="455px">
<el-carousel-item v-for="(img,index) in mainImage" :key="index">
<h3 class="small"><img :src="mainImage[index]" alt=""></h3>
</el-carousel-item>
</el-carousel>
</div>
// 把图片给vue管理
mainImage:[
'../xhshopping/upload/01.jpg',
'../xhshopping/upload/02.jpg',
'../xhshopping/upload/03.jpg',
'../xhshopping/upload/04.png'
]
newsflash新闻快报模块
- 1号盒子为news 新闻模块高度为165px
- 2号盒子为 lifeservice生活服务模块高度为209px
- 3号盒子为bargain特价商品
new 新闻模块
注意:这里我们分为上下两个模块，但是两个模块都用div 1号盒子news-hd新闻头部模块，给一个高度和下边框 2号盒子news-bd新闻主题部分，里面包含ul和li还有链接
超出部分隐藏技术：
分三步走
- 添加超出部分隐藏overflow：hidden
- 让文字一行内显示，不允许换行 white-spce：nowrap；
- 文字超出了就用省略号替代 text-overflow：ellipsis
2.7 推荐模块
- 大盒子recom推荐模块recommend里面包含2个盒子，浮动即可
- 1号盒子recom-hd
- 2号盒子recom-bd，注意里面的小竖线
2.8 楼城区制作：
注意这个floor ，不要给高度，内容有多少，算多少
第一楼是家用电器模块∶里面包含两个盒子
- 1号盒子box hd，给一个高度，有个下边框，里面分为左右2个盒子
2.81 box_hd模块
- 有高度可以不用清除浮动
- 左边h3，盒子左浮动
- 右边 tab-list，右浮动，因为用到tab切换效果，所以里面要用ul和li来做
2.82 box_bd模块
Tab栏原理的布局需求
- 选项卡 （tab_list）
- 内容 （tab_content2）
2.9 列表页制作
- 列表页面是新的页面，我们需要新建页面文件list.html 。
- 因为列表页的头部和底部基本一致，所以我们需要把首页中的头部和底部的结构复制过来。
- 头部和底部的样式也需要，因此list.html中还需要引入common.css 。
- 需要新的list.css样式文件，这是列表页专门的样式文件。
2.91 修改header 和nav
用定位增加新内容
因为本身是相对定位，所以直接用绝对定位加
nav 用浮动重新写一排
2.92列表页主体 sk_container
- 1号盒子sk _container给宽度1200，不要给高度
- 2号盒子sk_hd ,插入图片即可
- 3号盒子sk_bd ，里面包含很多的ul和li
我主要利用flex完成了布局
盒子里使用传统布局
3.0 注册页
给注册表单加个父盒子
然后居中
