HTML5综合实例--移动端页面

学习要点

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>

秒客网

HTML5综合实例--移动端页面

相关文章