学习要点
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>
转载于:.html
本文发布于:2024-02-01 13:17:11，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170676463236865.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
