1 在index.less中书写具体样式
1.1 其他的公共样式可以继续往common.less文件中缀加
1.2 body样式
//首页样式的less文件
//将刚写好的common.less引入到index.less里面 common可以加后缀名less,也可以不加
@import "common.less";
body {
min-width: 320px;
//15rem就是750px
//750px划分15等分就是50px(font-size),也就是50px=1rem--->15rem=750px
//这里不写最大宽度而写定宽度成15rem的原因：
//之前限定好了html中的文字最大就是50px，所以15rem最大也就代表750px,所以就不用写maxi-width,同时由于单位是rem，还可以缩放
width: 15rem;
//有了宽度之后就可以居中对齐了
margin: 0 auto;
//苏宁原版样式
line-height: 1.5;
font-family: Arial, Helvetica;
background-color: #f2f2f2;
}1.2 整体结构搭建
1.3 顶部搜索模块
分成三个部分：左、中、右。左右定位,宽度给固定大小；中间flex:1，独占剩余空间一份;
index.less文件
//顶部搜索框
//定义1rem代表多少px的变量
@baseFont: 50;
.search-content {
display: flex;
//固定定位一定要有宽度
position: fixed;
top: 0;
//定位的盒子无法用margin：0 auto;
left: 50%;
transform: translateX(-50%);
width: 15rem;
//height: 88px
// 750/15=50px(1rem) 88/50rem
height: 88rem / @baseFont;
background-color: #ffc001;
.classify {
// 实测 宽44px 高70px
width: 44rem / @baseFont;
height: 70rem / @baseFont;
background: url(../images/classify.png) no-repeat;
//背景缩放 父盒子多大背景就多大
background-size: 44rem / @baseFont 70rem / @baseFont;
//margin: 11px 25px 7px 24px
margin: 11rem / @baseFont 25rem / @baseFont 7rem / @baseFont 24rem / @baseFont;
}
.search {
//宽高填满所有剩余区域
flex: 1;
input {
// 消除默认的边框
border: 0;
//消除聚焦时候的蓝色边框
outline: none;
//注意宽度100%，否则若input太大肯会超过父盒子从而挤压左右两边的盒子
width: 100%;
height: 66rem / @baseFont;
border-radius: 33rem / @baseFont;
background-color: #fff2cc;
margin-top: 12rem / @baseFont;
font-size: 25rem / @baseFont;
padding-left: 55rem / @baseFont;
color: #757575
}
}
.login {
width: 75rem / @baseFont;
height: 70rem / @baseFont;
margin: 10rem / @baseFont;
//字体大小可从psd文件中获得
font-size: 25rem / @baseFont;
text-align: center;
color: #fff;
line-height: 70rem / @baseFont;
}
}1.4 banner部分
//banner部分
//banner.jpg图片的实际大小是750px*368px (css像素) 不写以下样式的时候默认是不随着屏幕缩放的,图片一直保持750*368px
.banner {
width: 750rem / @baseFont;
height: 368rem / @baseFont;
img {
width: 100%;
height: 100%;
}
}1.5 广告部分
//广告部分
.ad {
display: flex;
a {
flex: 1;
img {
width: 100%;
}
}
}为什么这里flex布局也适应的屏幕的宽度
1.6 导航栏nav部分
750px宽的大盒子里面装了10个a，每个a的宽高都写定用rem单位
// nav模块
nav {
width: 750rem / @baseFont;
a {
float: left;
width: 150rem / @baseFont;
height: 140rem / @baseFont;
// 让span里面的文字在a盒子里居中对齐
text-align: center;
img {
// 将行内元素转换成块级元素才可以用margin,auto实现居中对齐
display: block;
width: 82rem / @baseFont;
height: 82rem / @baseFont;
margin: 10rem / @baseFont auto 0;
}
span {
font-size: 25rem / @baseFont;
color: #333;
}
}
}