标签：
学习要点
1.通过一个简单的移动手机页面， 复习学过的内容
2.手机网页的测试
3.手机布局的屏幕设定
手机网页的测试方法
1.直接在手机上测试，比较麻烦，效果好，
2.电脑上下载手机模拟器
3.利用浏览器自带的功能
name="viewport":屏幕设定
maximum-scale=1.0,minimum-scale=1.0;initial-scale=1.0:最大最小缩放比例为1：其实就是不允许点击缩放
user-scalable=0,width=device-width:设定内容和设备的屏幕等高，等宽
<!DOCTYPE html> <html> <head> <title>MyHtml.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"> <style type="text/css"> body{margin:0} header{ width:100%;height:50px;background:#AEFEEE; } h4{display:inline;} aside{ width:20%;height:540px;background:#708090;float:left; } section{ width:80%;height:540px;background:#D8BFD8;float:left;overflow:auto; } footer{ width:100%;height:50px;background:green;clear:left; } figure{padding:0;} img{max-width:80%;} ul{list-style-type:none;} li{display:inline;} </style> </head> <body> <header> <hgroup> <img alt="" height="50px" src="img/5.jpg"> <h4>移动端页面练习</h4> </hgroup> </header> <aside> <nav> <ul> <li><a href="#"><img src="img/1.jpg" /></a></li> <li><a href="#"><img src="img/2.jpg" /></a></li> <li><a href="#"><img src="img/3.jpg" /></a></li> <li><a href="#"><img src="img/4.jpg" /></a></li> <li><a href="#"><img src="img/5.jpg" /></a></li> </ul> </nav> </aside> <section> <figure> <img alt="" width="50%" src="img/1.jpg"><img alt=""width="50%" src="img/1.jpg"> </figure> <figcaption> 韦小宝身份证 </figcaption> <figure> <img alt=""width="50%" src="img/2.jpg"><img alt="" width="50%" src="img/2.jpg"> </figure> <figcaption> 奥巴马身份证 </figcaption> <figure> <img alt="" width="50%" src="img/3.jpg"><img alt="" width="50%" src="img/3.jpg"> </figure> <figcaption> 营业执照1 </figcaption> <figure> <img alt="" width="50%" src="img/4.jpg"><img alt="" width="50%" src="img/4.jpg"> </figure> <figcaption> 营业执照2 </figcaption> </section> <footer> <nav> <ul> <li><a href="#"><img src="img/1.jpg" width="45px" /></a></li> <li><a href="#"><img src="img/2.jpg" width="45px"/></a></li> <li><a href="#"><img src="img/3.jpg" width="45px"/></a></li> <li><a href="#"><img src="img/4.jpg" width="45px"/></a></li> <li><a href="#"><img src="img/5.jpg" width="45px"/></a></li> </ul> </nav> </footer> </body> </html>
标签：
原文地址：http://www.cnblogs.com/wujieBlogs/p/5900739.html
