<!DOCTYPE html>
<html lang="en">
<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">
<script type="text/javascript" src="js/set_root.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/reast.css">
<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_wrap">
<div class="slide"><img src="images/slide.jpg" alt="幻灯片"></div>
<!--...................菜单.....................-->
<div class="menu_con clearfix">
<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_modle clearfix"><!--common_model:公共模型-->
<div class="common_title">
<h3 class="fl">新鲜水果</h3>
<a href="#" class="fr">更多 ></a>
</div>
<div class="banner"><img src="images/banner.jpg" alt="商品图片"></div>
<ul class="goods_list clearfix">
<li>
<a href="#" class="goods_pic"><img src="images/goods.jpg" alt="商品图片"></a>
<h4 class="goods_name">新西兰皇家大红富士</h4>
<p class="goods_unit">12/提</p>
<p class="goods_price">¥68.00</p>
<a href="#" class="add_cart"></a>
</li>
<li>
<a href="#" class="goods_pic"><img src="images/goods.jpg" alt="商品图片"></a>
<h4 class="goods_name">新西兰皇家大红富士</h4>
<p class="goods_unit">12/提</p>
<p class="goods_price">¥68.00</p>
<a href="#" class="add_cart"></a>
</li>
<li class="">
<a href="#" class="goods_pic"><img src="images/goods.jpg" alt="商品图片"></a>
<h4 class="goods_name">新西兰皇家大红富士</h4>
<p class="goods_unit">12/提</p>
<p class="goods_price">¥68.00</p>
<a href="#" class="add_cart"></a>
</li>
</ul>
</div>
</div>
<div class="footer">
<ul>
<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>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);
})();reast.css
body,p,h1,h2,h3,h4,h5,input,ul{
margin:0;
padding:0;
}
img{
border:0;
}
h1,h2,h3,h4,h5{
font-size:100%;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
em{
font-style:normal;
}
/*........................清除浮动..........................*/
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix{
clear:both;
}
.clearfix{
zoom:1;
}
.fl{
float:left;
}
.fr{
float:right;
}main.css
body{
font-family:'Microsoft Yahei';
}
/*main_warp 定位技巧.目的是让尺寸与手机屏相符.通过上下左右距离固定浏览器*/
.main_warp{
position:absolute;/*固定定位,微信会出现bug.只能用绝对定位*/
top:0;
left:0;
right:0;
bottom:0;
background-color:gold;
}
/*...............................页眉.............................*/
.header{
position:relative;
height:2.5rem;
background-color:#37ab40;
}
.header .logo{
display:block;
width:4.45rem;
height: 1.8rem;
margin:0.35rem auto 0;
}
.header .logo img{
width:100%;
}
.header .search{
position:absolute;
width:1.35rem;
height:1.35rem;
right:0.75rem;
top:0.625rem;
background:url(../images/icons.png)left top no-repeat;
background-size:3.0rem 42.0rem;
}
/*..............................内容...................................*/
.center_wrap{
position:absolute;
background-color:#efefef;
top:2.5rem;
bottom:2.5rem;
left:0;
right:0;
overflow-x:hidden;
overflow-y:auto;
}
/*..............幻灯片...............*/
.slide img{
width:100%;
}
/*..............菜单..............*/
.menu_con{
height:9.25rem;
margin-top:0.5rem;
background-color:#fff;
overflow:hidden;
}
.menu{
width:19.0rem;
height:8.1rem;
margin:0.7rem 0 0 1.375rem;
}
.menu li{
width:2.8rem;
height:4.1rem;
float:left;
margin-right:1.625rem;
}
.menu li a{
display:block;
width:2.8rem;
height:2.8rem;
background:url(../images/icons.png)left -3.0rem no-repeat;
background-size:3rem 42rem;
}
.menu li h2{
font:13px/1.3rem 'Microsoft Yahei';
height:1.3rem;
text-align:center;
color:#666;
}
.menu li:nth-child(2) a{
background-position:left -6.0rem;
}
.menu li:nth-child(3) a{
background-position:left -9rem;
}
.menu li:nth-child(4) a{
background-position:left -12rem;
}
.menu li:nth-child(5) a{
background-position:left -15rem;
}
.menu li:nth-child(6) a{
background-position:left -18rem;
}
.menu li:nth-child(7) a{
background-position:left -21rem;
}
.menu li:nth-child(8) a{
background-position:left -24rem;
}
/*.............公共模型展示.............*/
.common_modle{
margin:0.5rem 0;
background-color:#fff;
}
.common_title{
margin:0.8rem auto 0;
height:0.9rem;
width:17.75rem;
}
.common_title h3{
border-left:0.25rem solid #fbc83d;
font:bold 15px/0.9rem 'Microsoft Yahei';
color:#fbc83d;
text-indent:0.4rem;
}
.common_title a{
font:12px/0.9rem 'Microsoft Yahei';
color:#666;
}
.banner{
margin:0.5rem auto 0;
height:4.5rem;
width:17.75rem;
}
.banner img{
width:100%;
}
.goods_list{
margin:0.5rem auto 0.7rem;
height:9.35rem;
width:17.75rem;
}
.goods_list li{
float:left;
height:9.35rem;
width:5.8rem;
border-right:1px solid #e7e7e7;
position:relative;
}
.goods_list li:nth-child(3){
border-right:0;
}
.goods_list .goods_pic{
height:4.5rem;
width:4.5rem;
margin:0.5rem auto 0;
display:block;
}
.goods_list .goods_pic img{
width:100%;
}
.goods_list .goods_name{
font:15px/15px 'Microsoft Yahei';
color:#666;
width:5.0rem;
margin:0.75rem auto 0;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.goods_list .goods_unit{
font:12px/12px 'Microsoft Yahei';
color:#bbb;
margin: 0.8rem auto 0;
width:5rem;
}
.goods_list .goods_price{
font:12px/12px 'Microsoft Yahei';
color:#ff4400;
margin:0.5rem auto 0;
width:5rem;
}
.goods_list li .add_cart{
position:absolute;
right:0.675rem;
width:1.7rem;
height:1.7rem;
bottom:0;
background:url(../images/icons.png) left -27rem no-repeat;
background-size:3rem 42rem;
}
@media (min-width:380px) {
.goods_list li .goods_price{
font:14px/14px 'Microsoft Yahei';
}
.goods_list li .goods_unit{
font:14px/14px 'Microsoft Yahei';
}
}
/*..............页脚..............*/
.footer{
position:absolute;
background-color:#fff;
height:2.5rem;
width:100%;
left:0;
bottom:0;
}
.footer ul{
height:2.5rem;
}
.footer li{
float:left;
height:2.5rem;
width:25%;
}
.footer li a{
display:block;
width: 1.375rem;
height: 1.3rem;
margin:0.25rem 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:nth-child(4) a{
background-position:left -38.95rem;
}
.footer li h2{
color:#949392;
font:12px/12px 'Microsoft Yahei';
margin-top:0.2rem;
text-align:center;
}
总结:
1.reast.css常用标签设定
2.浮动与清除浮动:子级浮动,父级要清除浮动
3.margin垂直合并解决方法
a.给最后一个元素加display:in-block
b.给最后一个元素加float
4.行内元素特性(例:<span>/<em>/<a>/<img>/<br>)
a.和其他元素在同一行
b.不可改变其宽高,宽高由内容决定
c.行内元素不可包含块元素
5.块元素特性(例:<h>/<div>/<ul>/<p>)
a.总是从新的一行开始
b.可改变宽高,没有设置时默认为父级的100%
c.块元素内可包含块元素和行内元素
6.关于background
background-size一定要定义在background:url之后
7,img
只设定一个值是,图片会等比缩放.例:width:100%
8.滚动条设置
overflow-x:hidden X轴无滚动条
overflow-y:auto Y轴有滚动条
9.文字溢出
text-overflow:ellipsis 溢出文字以省略号形式显示※ellipsis省略※
10.强制不换行
white-space: nowrap;※white-space空白处,space强制在同一行显示※
11.移动端定位
通过left,right,top,bottom设置百分比/rem值来定位
12.margin-top塌陷
两个盒子嵌套时,内部盒子设置margin-top会加到外部盒子上,导致内部盒子
margin-top失败.方法:
1.外部盒子设置边框
2.外部盒子设置overflow:hidden
3.清除浮动clearfix