HTML5 1.11移动端页面练习
1.手机网页的测试方法css
a.直接在手机上测试，比较麻烦，效果好html
b.电脑上下载手机模拟器浏览器
c.利用浏览器自带功能ide
2.name=“viewport”，屏幕设定测试
3.maximum-scale=1.0， minimum-scale=1.0； initial-scale=1.0最大最小缩放比例为1，其实就是不容许缩放scala
3.user-scalable=0，width=device-width：设定内容和设备的屏幕等宽，等高htm
<DOCTYPE html>it
<html lang="zh-cn">io
<head> meta
<meta charset="UTF-8">
<title>移动端页面<title>
<meta name="viewport" content="maximun-scale=1.0,minimun-scale=1.0,user-scale=0,width=device-width,initial-scale=1.0">
<style type="text/css">
header{width:100%;height:50%;background:#AEFEEE}
asider{width:20%;height:540px;background:#708099;float:left;}
section{width:80%;height:540%;background:#D8DFD8;float:left;}
footer{width:100%;height:50px;background:#green;clear:left;}
figure{padding：0px}
img{max-width：70%}
ul{list-style-type：none}
li{display：inline}
a{text-decoration：none}
</style>
</head>
<body>
<header>
<hgroup>
<img src="imges/ss.png" alt="">
<h4>移动端页面<h4>
</hgroup>
</header>
<asider>
<ul>
<li><a href=""><img src="imges/aa.png" alt=""></a></li>
<li><a href=""><img src="imges/bb.png" alt=""></a></li>
<li><a href=""><img src="imges/cc.png" alt=""></a></li>
<li><a href=""><img src="imges/dd.png" alt=""></a></li>
</ul>
</asider>
<section>
<figure>
<img src="sp/sp1.png" alt="" width="50%"><img src="sp/sp2.png" alt="" width="50%">
</figure>
<figcaptio>食品/家电</figcaptio>
<figure>
<img src="sp/sp3.png" alt="" width="50%"><img src="sp/sp4.png" alt="" width="50%">
</figure>
<figcaptio>汽车/家居</figcaptio>
<figure>
<img src="sp/sp5.png" alt="" width="50%"><img src="sp/sp6.png" alt="" width="50%">
</figure>
<figcaptio>数码/珠宝</figcaptio>
<figure>
<img src="sp/sp7.png" alt="" width="50%"><img src="sp/sp8.png" alt="" width="50%">
</figure>
<figcaptio>食品/家电</figcaptio>
</section>
<footer>
<nav>
<ul>
<li><a href=""><img src="imges/1.png" alt=""></a></li>
<li><a href=""><img src="imges/2.png" alt=""></a></li>
<li><a href=""><img src="imges/3.png" alt=""></a></li>
<li><a href=""><img src="imges/4.png" alt=""></a></li>
</ul>
</nav>
</footer>
</body>
</html>
- 1. 移动端页面练习
- 2. html5--2.10综合实例2-移动端页面练习
- 3. html5 移动端单页面布局
- 4. 玩转HTML5移动页面
- 5. 移动端WEB页面
- 6. 移动端页面
- 7. 移动端页面布局
- 8. 【CSS练习】IT修真院--练习4-移动端界面
- 9. 移动端页面重构
- 10. 移动端页面开发
- 更多相关文章...
- • jQuery Mobile 页面 - jQuery Mobile 教程
- • XSL-FO 页面 - XSL-FO 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • Tomcat学习笔记（史上最全tomcat学习笔记）
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 安装cuda+cuDNN
- 2. GitHub的使用说明
- 3. phpDocumentor使用教程【安装PHPDocumentor】
- 4. yarn run build报错Component is not found in path “npm/taro-ui/dist/weapp/components/rate/index“
- 5. 精讲Haproxy搭建Web集群
- 6. 安全测试基础之MySQL
- 7. C/C++编程笔记：C语言中的复杂声明分析，用实例带你完全读懂
- 8. Python3教程(1)----搭建Python环境
- 9. 李宏毅机器学习课程笔记2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里云ECS配置速记
- 1. 移动端页面练习
- 2. html5--2.10综合实例2-移动端页面练习
- 3. html5 移动端单页面布局
- 4. 玩转HTML5移动页面
- 5. 移动端WEB页面
- 6. 移动端页面
- 7. 移动端页面布局
- 8. 【CSS练习】IT修真院--练习4-移动端界面
- 9. 移动端页面重构
- 10. 移动端页面开发