module4-06-苏宁项目

苏宁首页

一、准备工作

• 苏宁网站首页的开发尺寸右320px、360px、375px、384px、400ox、414px、480px、540px、720px、750px等

• 分为15等份

• 默认html字体为50px

1.1 公共common.less文件制作

• 根据rem+媒体查询制作

1.2 用@import导入less文件

• less：@import “”

• css：@import url()

1.3 设置body样式

body {
    min-width: 320px;
    width: 15rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica, STHeiTi, sans-serif;
    background: #F2F2F2;
}

二、苏宁首页主要内容

2.1 top-banner区域

• 结构：div > (a > img) + a

• 注意插入图片跟背景图片都要重新设置上rem对应的数值

• 公式: 设计图大小rem / 设计图分成15份每份的大小

2.2 header结构布局

• 结构: div > (div > a * 3 > img) +

2.3 search部分

• 结构: div > a + i + form

• 点击并不是在文本框输入，而是跳到另外一个页面

2.4 banner部分

• 结构：div > div > ul > li > a > img

• 思想: 用三图与left的方法进行布局

2.5 nav部分

• 结构: div > a > img + p