移动端页面布局
需求:以如下天天生鲜首页效果图为例,制作相应的静态页面
项目目录如下:
├─css
├─images
├─js
└─index.html
目录结构说明:
css中用于存放相应的css文件,通过link标签引入到html页面
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
reset.css
body,p,h1,h2,h3,h4,h5,h6,ul,dl,dd,input,form,select{
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6{
font-size:100%;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
img{
border:0;
}
em{
font-style:normal;
}
.clearfix:before,.clearfix:after{
content: "";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
zoom:1;
}
.fl{
float: left;
}
.fr{
float: right;
}
reset.css中是清除原有html页面布局的样式,main.css是主要显示页面的样式。
images中存放页面所需图片等资源。
js中存放相应的js代码,这里只用到了rem布局所需要的set_root.js文件,通过script标签引入
<script type="text/javascript" src="./js/set_root.js"></script>
set_root.js
(function(){
var calc = function(){
var docElement = document.documentElement;
var clientWidthValue = docElement.clientWidth > 750 ? 750 : docElement.clientWidth;
docElement.style.fontSize = 20*(clientWidthValue/375) + 'px';
}
calc();
window.addEventListener('resize',calc);
})();
结合流体布局和rem布局制作天天生鲜移动端首页页面
使用基于rem的布局方式制作天天生鲜移动端首页页面
index.html
<!DOCTYPE html>
<html lang="en" style="font-size:20px">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/main.css">
<script type="text/javascript" scr="./js/set_root.js"></script>
<title>天天生鲜-首页</title>
</head>
<body>
<div class="main_wrap">
<!-- 顶部 -->
<div class="header clearfix">
<a href="#" class="logo"><img src="./images/logo.png" alt="天天生鲜logo"></a>
<a href="#" class="search"></a>
</div>
<!-- 中间 -->
<div class="center_con">
<div class="slide">
<img src="./images/slide.jpg" alt="幻灯片">
</div>
<div class="menu_con clearfix">
<!-- ul.menu>(li>a+h2{水果})*8 -->
<ul class="menu">
<li>
<a href="#"></a>
<h2>水果</h2>
</li>
<li>
<a href="#"></a>
<h2>海鲜</h2>
</li>
<li>
<a href="#"></a>
<h2>肉类</h2>
</li>
<li>
<a href="#"></a>
<h2>禽蛋</h2>
</li>
<li>
<a href="#"></a>
<h2>蔬菜</h2>
</li>
<li>
<a href="#"></a>
<h2>速冻</h2>
</li>
<li>
<a href="#"></a>
<h2>热卖</h2>
</li>
<li>
<a href="#"></a>
<h2>新品</h2>
</li>
</ul>
</div>
<div class="common_model clearfix">
<div class="common_title">
<h3>新鲜水果</h3>
<a href="#" alt="more">更多">></a>
</div>
<a href="#" class="banner"><img src="./images/banner.jpg" alt="banner"></a>
<ul class="goods_list">
<li>
<a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
<h4>新西兰皇家大红富士苹果</h4>
<p class="unit">12/提</p>
<p class="price">¥68.00</p>
<a href="#" class="chart"></a>
</li>
<li>
<a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
<h4>新西兰皇家大红富士苹果</h4>
<p class="unit">12/提</p>
<p class="price">¥68.00</p>
<a href="#" class="chart"></a>
</li>
<li>
<a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
<h4>新西兰皇家大红富士苹果</h4>
<p class="unit">12/提</p>
<p class="price">¥68.00</p>
<a href="#" class="chart"></a>
</li>
</ul>
</div>
</div>
<!-- 底部 -->
<ul class="footer">
<li><a href="#"></a>
<h2>首页</h2>
</li>
<li><a href="#"></a>
<h2>分类</h2>
</li>
<li><a href="#"></a>
<h2>购物车</h2>
</li>
<li><a href="#"></a>
<h2>我的</h2>
</li>
</ul>
</div>
</body>
</html>
main.css
/*整体*/
.main_wrap{
position:absolute;
/*background-color:gold;*/
/*通过以下方式,人为将整个容器拉至浏览器大小,采用绝对定位相对于body来做,
该布局为上下部固定,中间滚动,因此需要采用绝对定位,否则微信等下部会无效*/
left:0;
right:0;
top:0;
bottom:0;
}
/*顶部*/
.header{
height:2.5rem;
background-color:#37ab40;
position:relative;
}
.logo{
display:block;
width:4.45rem;
height:1.8rem;
margin:0.35rem auto 0;
}
.logo img{
/*图片设置其中一个值宽/高,另一值会根据容器大小等比缩放*/
width:100%;
}
.search{
width:1.35rem;
height:1.35rem;
position:absolute;
right:0.75rem;
top:0.6rem;
/*background-color:gold;*/
background:url(../images/icons.png) no-repeat ;
background-size:3.0rem 42.0rem;
}
/*中间滚动区域样式*/
.center_con{
/*相对于上一个设置了定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位。*/
position:absolute;
left:0;
right:0;
top:2.5rem;
bottom:2.5rem;
background-color:#efefef;
/*若没有overflow 下方固定栏也会一起滚动
auto是保证中间部分有滚动条,但是auto也会出现横向滚动条
改进方法是x,y分别设置overflow 只自动出现y轴滚动条*/
overflow-y:auto;
overflow-x:hidden;
padding-bottom:0.5rem;
}
.slide{
height:7.0rem;
}
.slide img{
width:100%;
}
.menu_con{
height:9.25rem;
background-color:#fff;
margin-top:0.5rem;
overflow:hidden;
}
.menu_con .menu{
width:18rem;
height:8.375rem;
margin:0.875rem 0 0 1.375rem;
/*background-color:gold;*/
}
.menu_con .menu li{
width:2.8rem;
height:4.05rem;
margin-right:1.625rem;
float:left;
/*background-color:pink;*/
}
.menu a{
display:block;
height:2.8rem;
background:url(../images/icons.png) left -3.025rem no-repeat;
background-size:3.0rem 42.0rem;
}
/*nth-child(n) 匹配第n个li下面的a*/
.menu li:nth-child(2) a{
background-position:left -6.025rem;
}
.menu li:nth-child(3) a{
background-position:left -9.025rem;
}
.menu li:nth-child(4) a{
background-position:left -12.025rem;
}
.menu li:nth-child(5) a{
background-position:left -15.025rem;
}
.menu li:nth-child(6) a{
background-position:left -18.025rem;
}
.menu li:nth-child(7) a{
background-position:left -21.025rem;
}
.menu li:nth-child(8) a{
background-position:left -24.025rem;
}
.menu h2{
height:1.3rem;
text-align:center;
/*文字大小不需要转换rem,可以用响应式布局调整大小*/
font:bold 13px/1.25rem "Microsoft Yahei";
color:#666;
}
.common_model{
height:17.25rem;
background-color:#fff;
margin-top:0.5rem;
}
.common_title{
width:17.75rem;
height:0.9rem;
/*background-color:gold;*/
margin:0.8rem auto 0;
}
.common_title h3{
float:left;
height:0.9rem;
font:bold 15px/0.9rem "Microsoft Yahei";
color:#fbc83d;
border-left:0.25rem solid #fbc83d;
text-indent:0.4rem;
}
.common_title a{
float:right;
font:normal 12px/0.9rem "Microsoft Yahei";
color:#7f7f7f;
}
.banner{
display:block;
width:17.75rem;
height:4.5rem;
margin:0.5rem auto 0;
}
.banner img{
height:100%;
}
.goods_list{
width:17.75rem;
height:9.325rem;
/*background-color:gold;*/
margin:0.5rem auto 0;
}
.goods_list li{
width:5.9rem;
height:9.325rem;
/*background-color:pink;*/
float:left;
border-right:1px solid #e7e7e7;
/*解决最后一个盒子放不下的问题*/
box-sizing: border-box;
position:relative;
}
.goods_list li:last-child{
/*解决最后一个盒子右边没有边线的问题*/
border-right:0;
}
.goods_link{
display:block;
width:4.5rem;
height:4.5rem;
margin:0.375rem auto 0;
}
.goods_link img{
width:100%;
}
.goods_list h4{
font-size:15px;
color:#666;
font-weight: normal;
line-height:0.75rem;
font-family:"Microsoft Yahei";
width:5.0rem;
margin:37px auto 0;
/*文字过多自动省略,显示省略号*/
/*文字过多后裁切*/
overflow:hidden;
/*设置文字不换行*/
white-space:nowrap;
/*设置文字超出后显示虚线ellipsis*/
text-overflow:ellipsis;
}
.unit{
width:5.0rem;
font:normal 12px/12px "Microsoft Yahei";
color:#bbb;
margin:0.8rem auto 0;
}
.price{
width:5.0rem;
font:normal 12px/12px "Microsoft Yahei";
color:#f40;
margin:0.5rem auto 0;
}
.chart{
width:1.7rem;
height:1.7rem;
position:absolute;
right:0.675rem;
bottom:0;
background:url(../images/icons.png) left -27rem no-repeat;
background-size:3.0rem 42.0rem;
}
/*底部*/
.footer{
position:absolute;
left:0;
bottom:0;
width:100%;
height:2.5rem;
background-color:#fff;
}
.footer li{
width:25%;
height:2.5rem;
float:left;
}
.footer a{
display:block;
width:1.3rem;
height:1.3rem;
margin:0.3rem auto 0;
background:url(../images/icons.png) left -30.0rem no-repeat;
background-size:3.0rem 42.0rem;
}
.footer li:nth-child(2) a{
background-position:left -33rem;
}
.footer li:nth-child(3) a{
background-position:left -36rem;
}
.footer li:last-child a{
background-position:left -39rem;
}
.footer h2{
font:normal 12px/0.8rem "Microsoft Yahei";
color:#949392;
text-align:center;
}
使用基于流体布局方式制作天天生鲜移动端首页页面
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天天生鲜-首页</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="main_con">
<header class="clearfix">
<div class="logo"><img src="images/logo.png"></div>
<a href="#" class="search"></a>
</header>
<div class="center_scroll">
<div class="slide cleafix">
<ul class="slide_con">
<li><img src="images/slide.jpg"></li>
</ul>
<!-- 多增加了幻灯片中用于显示页码的小圆点 -->
<ul class="points">
<!-- 激活,即当前页的小圆点样式不同 -->
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<ul class="menu clearfix">
<li>
<a href="#"></a>
<h3>水果</h3>
</li>
<li>
<a href="#"></a>
<h3>海鲜</h3>
</li>
<li>
<a href="#"></a>
<h3>肉类</h3>
</li>
<li>
<a href="#"></a>
<h3>禽蛋</h3>
</li>
<li>
<a href="#"></a>
<h3>蔬菜</h3>
</li>
<li>
<a href="#"></a>
<h3>速冻</h3>
</li>
<li>
<a href="#"></a>
<h3>热卖</h3>
</li>
<li>
<a href="#"></a>
<h3>新品</h3>
</li>
</ul>
<div class="goods_model clearfix">
<div class="goods_tilte clearfix">
<h3 class="fl">新鲜水果</h3>
<a href="#" class="fr">更多 ></a>
</div>
<div class="goods_banner"><img src="images/banner.jpg"></div>
<ul class="goods_list clearfix">
<li>
<div class="goods_pic"><img src="images/goods.jpg"></div>
<div class="goods_detail">
<dl>
<dt>新西兰皇家加力苹果</dt>
<dd class="goods_unit">12个/提</dd>
<dd class="goods_price">¥68.00</dd>
</dl>
<a href="#" class="add_to_cart"></a>
</div>
</li>
<li>
<div class="goods_pic"><img src="images/goods.jpg"></div>
<div class="goods_detail">
<dl>
<dt>新西兰皇家加力苹果</dt>
<dd class="goods_unit">12个/提</dd>
<dd class="goods_price">¥68.00</dd>
</dl>
<a href="#" class="add_to_cart"></a>
</div>
</li>
<li>
<div class="goods_pic"><img src="images/goods.jpg"></div>
<div class="goods_detail">
<dl>
<dt>新西兰皇家加力苹果</dt>
<dd class="goods_unit">12个/提</dd>
<dd class="goods_price">¥68.00</dd>
</dl>
<a href="#" class="add_to_cart"></a>
</div>
</li>
</ul>
</div>
</div>
<footer>
<ul class="foot_list">
<li>
<a href="#"></a>
<h3>首页</h3>
</li>
<li>
<a href="#"></a>
<h3>分类</h3>
</li>
<li>
<a href="#"></a>
<h3>购物车</h3>
</li>
<li>
<a href="#"></a>
<h3>我的</h3>
</li>
</ul>
</footer>
</div>
</body>
</html>
main.css
/* 头部样式 */
.main_con{
position:absolute;
left:0;
top:0;
right:0;
bottom:0
}
header{
width:100%;
height:50px;
background-color:#37ab40;
position:relative;
}
.logo{
width:88px;
height:35px;
margin:7px auto 0;
}
.logo img{
width:100%;
}
.search{
width:28px;
height:26px;
background:url(../images/icons.png) left -639px no-repeat;
background-size:58px 670px;
display:block;
position:absolute;
right:14px;
top:12px;
}
/* 尾部样式 */
footer{
width:100%;
height:50px;
background-color:rgba(255,255,255,0.6);
position:absolute;
left:0;
bottom:0;
z-index:10000
}
.foot_list{
height:50px;
text-align: center;
font-size:0px;
}
.foot_list li{
width:25%;
height:40px;
display:inline-block;
margin-top:5px;
}
.foot_list li a{
width:26px;
height:26px;
display:block;
margin:0 auto;
}
.foot_list li h3{
height:14px;
line-height:14px;
text-align:center;
font-size:12px;
color:#949392;
}
.foot_list li:nth-child(1) a{
background:url(../images/icons.png) left -579px no-repeat;
background-size:58px 670px;
}
.foot_list li:nth-child(3) a{
background:url(../images/icons.png) left -518px no-repeat;
background-size:58px 670px;
}
.foot_list li:nth-child(2) a{
background:url(../images/icons.png) left -548px no-repeat;
background-size:58px 670px;
}
.foot_list li:nth-child(4) a{
background:url(../images/icons.png) left -608px no-repeat;
background-size:58px 670px;
}
/* 中间样式 */
.center_scroll{
position:absolute;
left:0;
top:50px;
right:0;
bottom:0;
overflow-x:hidden;
overflow-y:auto;
}
.slide{
position:relative;
}
.slide_con li img{
width:100%;
}
.slide .points{
width:72px;
height:6px;
position:absolute;
right:15px;
bottom:10px;
font-size:0px;
}
.slide .points li{
display:inline-block;
width:6px;
height:6px;
border-radius:50%;
background-color:#9f9f9f;
margin:0 3px;
}
.slide .points li.active{
background-color:#76e658;
}
.menu{
margin-top:10px;
background-color:#fff;
font-size:0;
padding:7px;
box-sizing:border-box;
}
.menu li{
display:inline-block;
width:25%;
height:80px;
margin-top:10px;
}
.menu li a{
width:55px;
height:55px;
display:block;
margin:0 auto;
}
.menu li h3{
height:25px;
line-height:25px;
text-align:center;
font-size:13px;
color:#666
}
.menu li:nth-child(1) a{
background:url(../images/icons.png) left 0px no-repeat;
background-size:58px 670px;
}
.menu li:nth-child(2) a{
background:url(../images/icons.png) left -60px no-repeat;
background-size:58px 670px;
}
.menu li:nth-child(3) a{
background:url(../images/icons.png) left -120px no-repeat;
background-size:58px 670px;
}
.menu li:nth-child(4) a{
background:url(../images/icons.png) left -180px no-repeat;
background-size:58px 670px;
}
.menu li:nth-child(5) a{
background:url(../images/icons.png) left -240px no-repeat;
background-size:58px 670px;
}
.menu li:nth-child(6) a{
background:url(../images/icons.png) left -300px no-repeat;
background-size:58px 670px;
}
.menu li:nth-child(7) a{
background:url(../images/icons.png) left -360px no-repeat;
background-size:58px 670px;
}
.menu li:nth-child(8) a{
background:url(../images/icons.png) left -420px no-repeat;
background-size:58px 670px;
}
.goods_model{
background-color:#fff;
margin:10px 0 60px;
box-sizing:border-box;
padding:15px 10px;
}
.goods_tilte{
height:18px;
}
.goods_tilte h3{
border-left:5px solid #fbc83d;
height:18px;
line-height:18px;
font-size:15px;
color:#fbc83d;
text-indent:8px;
}
.goods_tilte a{
color:#7f7f7f;
}
.goods_banner{
margin-top:12px;
}
.goods_banner img{
width:100%;
}
.goods_list{
margin-top:10px;
}
.goods_list li{
width:33.33%;
float:left;
box-sizing:border-box;
position:relative;
}
.goods_list li .goods_pic{
width:80px;
height:80px;
margin:0 auto;
}
.goods_list li .goods_pic img{
width:100%;
}
.goods_list li:nth-child(1){
border-right:1px solid #e7e7e7;
}
.goods_list li:nth-child(2){
border-right:1px solid #e7e7e7;
}
.goods_detail dt{
text-indent:12px;
font-size:15px;
color:#666;
width:90%;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.goods_detail .goods_unit{
color:#bbb;
margin-top:10px;
text-indent:12px;
}
.goods_detail .goods_price{
color:#ff4400;
margin-top:3px;
text-indent:12px;
}
.goods_detail .add_to_cart{
position:absolute;
width:34px;
height:34px;
background:url(../images/icons.png) left -480px no-repeat;
background-size:58px 670px;
right:5px;
bottom:0;
}
常用css列表
- color 设置文字的颜色
- font-size 设置文字的大小
- font-family 设置文字的字体
- font-style 设置字体是否倾斜:normal 不倾斜 | italic 倾斜
- font-weight 设置文字是否加粗:normal 不加粗 | bold 加粗
- line-height 设置文字的行高,设置行高相当于在每行文字的上下同时加间距
- font 同时设置文字的几个属性,写的顺序有兼容问题,建议按照如下顺序写: font:是否加粗 字号/行高 字体;如: font:normal 12px/36px '微软雅黑’
- text-decoration 设置文字的下划线:none 无下划线
- text-indent 设置文字首行缩进
- text-align 设置文字水平对齐方式:center 居中 | left 靠左 | right 靠右
- text-overflow 设置一行文字宽度超过容器宽度时的显示方式:clip 将多出文字裁剪 | ellipsis 将多出文字按省略号显示
- white-space 一般用来设置文本不换行,如:white-space:nowrap 设置文本不换行 一般与text-overflow和overflow属性配合使用来让一行文字超出宽度时显示省略号
- list-style 一般用来设置去掉ul或者ol列表中的小圆点或数字 如:list-style:none
- width 设置盒子内容的宽度
- height 设置盒子内容的高度
- border-top 设置盒子顶部边框的三个属性 如:border-top:5px solid red;设置盒子顶部边框为3像素宽的红色的实线
- border-left 设置盒子左边边框的三个属性
- border-right 设置盒子右边边框的三个属性
- border-bottom 设置盒子底部边框的三个属性
- border 同时设置盒子的四个边框,如果四个边的样式统一就使用它 如:border:1px solid #000 设置盒子四个边都是1像素宽的黑色实线
- padding 设置盒子四个边的内边距 如:padding:10px 20px 30px 40px 分别设置盒子上边(10px)、右边(20px)、下边(30px)、左边(40px)的内边距**(顺时针)**
- margin 设置盒子四个边的外边距 如:margin:10px 20px 30px 40px 分别设置盒子上边(10px)、右边(20px)、下边(30px)、左边(40px)的外边距**(顺时针)**
- overflow 设置当子元素的尺寸超过父元素的尺寸时,盒子及子元素的显示方式 如:overflow:hidden 超出的子元素被裁切 | visible 默认值,内容不会被修剪,会呈现在元素框之外 | scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容 | auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容 | inherit 规定应该从父元素继承 overflow 属性的值
- display 设置盒子的显示类型及隐藏:none 元素隐藏且不占位置 | block 元素以块元素显示 | inline 元素以内联元素显示 | inline-block 元素以内联块元素显示
- float 设置元浮动 如:float:left 设置左浮动 float:right 设置右浮动
- clear 在盒子两侧清除浮动 如:clear:both 在盒子两侧都不允许浮动
- position 设置元素定位 如:relative 设置元素相对定位 | absolute 设置元素绝对定位
- background 设置元素的背景色和背景图片,如:background:url(bg.jpg) cyan;设置盒子的背景图片为bg.jpg,背景色为cyan
- background-size 设置盒子背景图的尺寸,如:background-size:30px 40px;设置背景图的尺寸宽为30px,高为40px
- opacity 设置元素整体透明度,一般为了兼容需要加上filter属性设置 如:opacity:0.1;filter:alpha(opacity=10)
- cursor 设置鼠标悬停在元素上时指针的形状 如:cursor:pointer 设置为手型 cursor属性
- outline 设置文本输入框周围凸显的蓝色的线,一般是设为没有 如:outline:none
- border-radius 设置盒子的圆角 如:border-radius:10px 设置盒子的四个角为10px半径的圆角
- box-shadow 设置盒子的阴影,如:box-shadow:10px 10px 5px 2px pink;设置盒子有粉色的阴影
- transition 设置盒子的过渡动画,如:transition:all 1s ease;设置元素过渡动画为1秒完成,所有变动的属性都做动画
- animation 设置盒子的关键帧动画 @keyframe … from … to …
- transform 设置盒子的位移、旋转、缩放、斜切等变形,如:transform:rotate(45deg);设置盒子旋转45度
- box-sizing 设置盒子的尺寸计算方式,如:box-sizing:border-box 将盒子的尺寸计算方法设置为按边框计算,此时width和height的值就是盒子的实际尺寸
- border-collapse 设置表格边框是否合并,如:border-collapse:collapse,将表格边框合并,这样就可以制作1px边框的表格