学习要点
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>
时间： 2024-08-29 09:20:29