流式布局,就是百分比布局,也称为固定像素布局
流式布局最大值设置多大,最小值设置多小
max-width: 980px;min-width: 320px;
京东做法,这个地方占20%,那个地方占20%
这个占50%,这个占25%
京东移动端首页
布局采取流式布局
搭建相关文件及结构
移动端设置第一步:设置视口标签
把index.html放到里面
normalize.css
引入CSS的相关文件,normalize.css
jingdong的320px,定义为
max-width: 640px;
margin: 0 auto;
把我们的body样式
这是是黑色的模块,这样就消失了
8%的宽度,10%的宽度,57%的宽度,25%宽度
app项目
样式设计成这样
ul li:nth-child(1) 定义四个盒子
ul 定义的样式
可以定义背景颜色
导入img图片
这里定义一个img的图片
text-align:center
line-height: 45px;
.app ul li:nth-child(2) img
{
width: 30px;
}
存入一份logo的png
图片居中对齐
HTML写完了0