第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计
html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计
基础CSS
首先将通用css属性写好
@charset "utf-8"; /*通用样式*/ /*去除所有元素的内外边距*/ *{ margin: 0; padding: 0; } /*去除所有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: 0; padding: 0; } /*去除所有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; }
