html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计
基础CSS
首先将通用css属性写好
@charset "utf-8";
/*通用样式*/
/*去除所有元素的内外边距*/
*{
margin:;
padding:;
}
/*去除所有ul里li的小圆点*/
ul{
list-style-type: none;
}
/*去除所有a的下划线*/
a{
text-decoration: none;
}
/*将图片转换成区块，将图片最大宽度设置成100%,使图片自适应*/
img{
display: block;
max-width: 100%;
}
/*通用样式结束*/
头部设计
我们用新单位rem就是以根元素挂钩来计算大小，首先将根元素字体设置成16px作为基准
html{
font-size: 16px;
}
这后面的单位就以这基准的rem就是倍数来计算，区块宽度基本用max-width最大宽度设定和百分比来设置，这样小于这个宽度的也能自适应
宽度设置，与rem单位计算
注意：手机网站，手机屏幕尺寸不一样，宽度不能做绝对宽度，只能用最大宽度和百分比来做，
rem是与根元素挂钩的，我们的根元素字体设置成16px作为基准，
页面最大宽度为640像素
所以我们设置导航的最大宽度为40ren，换算方式是要设置的宽度像素除以根基准像素，得出的就是rem的单位，（640除以16=40），所以导航的最大宽度设置为40rem也就是640像素
导航高度设置45像素
就是45除以根基准，（45除以16=2.8125）我们就设置成2.8rem
单位计算
要设置的像素除以根基准=rem单位
rem单位乘以根基准=像素
换算子元素宽度站父元素宽度的百分之几，子元素宽度除以父元素宽度=子元素宽度站父元素宽度的百分之几
将子元素宽度站父元素宽度的百分之几换算成像素，父元素的宽度乘以子元素宽度的百分之几=子元素的像素
完成效果：
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--自适应手机，禁止缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>瓢城旅行社</title>
<link rel="stylesheet" href="css/index.css"> </head>
<body> <!--头部导航-->
<header id="dao-hang">
<div class="dao-hang2">
<h1>瓢城旅行社</h1>
<nav>
<h2>网站导航</h2>
<ul>
<li class="dao-hang-lie-biao shou"><h3><a href="index.html">首页</a></h3></li>
<li class="dao-hang-lie-biao"><h3><a href="#">资讯</a></h3></li>
<li class="dao-hang-lie-biao"><h3><a href="#">机票</a></h3></li>
<li class="dao-hang-lie-biao"><h3><a href="#">关于</a></h3></li>
</ul>
</nav>
</div>
</header>
<!--图片轮播-->
<div class="lun-bo">
<img src="img/adver.png">
</div>
<!--搜索-->
<div class="sou-su">
<input type="text">
<button>搜索</button>
</div> <!--尾部-->
<footer class="wei-bu">
<div class="wei-bu2">
<p>客户端 | 触屏版 | 电脑版</p>
</div>
<div class="wei-bu3">
<P>Copyright © YCKU 瓢城旅行社 | 苏ICP备120110119号 </P>
</div>
</footer> </body>
</html>
css代码
@charset "utf-8";
/*通用样式*/
/*去除所有元素的内外边距*/
html{
font-size: 16px;
}
/*设置字体*/
body{
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
}
*{
margin:;
padding:;
}
/*去除所有ul里li的小圆点*/
ul{
list-style-type: none;
}
/*去除所有a的下划线*/
a{
text-decoration: none;
}
/*将图片转换成区块，将图片最大宽度设置成100%,使图片自适应*/
img{
display: block;
max-width: 100%;
}
/*将边框算在元素尺寸内*/
div{
box-sizing: border-box;
}
/*通用样式结束*/ /*头部导航*/
#dao-hang .dao-hang2{
width: 100%;
height: 2.8rem;
background-color: #333333;
}
#dao-hang .dao-hang2 h1{
display: none;
}
#dao-hang .dao-hang2 h2{
display: none;
}
#dao-hang .dao-hang2 ul{
max-width: 40rem;
height: 2.8rem;
margin: 0 auto;
color: #FFFFFF;
}
#dao-hang .dao-hang2 ul li{
width: 25%;
height: 2.8rem;
float: left;
line-height: 2.8rem;
text-align: center;
font-size: 15px;
}
#dao-hang .dao-hang2 ul li a{
display: block;
width: 100%;
height: 2.8rem;
color: #FFFFFF;
font-weight: normal;
}
#dao-hang .dao-hang2 ul li a:hover, #dao-hang .dao-hang2 .shou{
background-color: #000000;
}
/*图片轮播*/
.lun-bo{
max-width: 40rem;
max-height: 12.5rem;
background-color: #3835ff;
margin: 0 auto;
}
/*搜索*/
.sou-su{
max-width: 40rem;
height: 2.5rem;
background-color: #DCE1E7;
margin: 0 auto;
padding: 7px 0 0 0;
position: relative;
}
.sou-su input{
width: 87%;
height: 26px;
display: block;
margin: 0 auto;
border: 1px solid #5F89C4;
border-radius: 6px;
position: relative;
outline: none;
}
.sou-su button{
display: block;
width: 50px;
height: 26px;
border-radius: 0 6px 6px 0;
position: absolute;
top: 8px;
right: 6.2%;
border: none;
background-color: #5F89C4;
outline: none;
cursor: pointer;
} /*尾部*/
.wei-bu{
max-width: 40rem;;
min-height: 69px;
margin: 0 auto;
background-color: #333333;
color: #6F6F6F;
text-align: center;
}
.wei-bu .wei-bu2{
width: 100%;
height: 34px;
line-height: 34px;
font-size: 17px;
}
.wei-bu .wei-bu3{
width: 100%;
font-size: 17px;
}