html5--2.10综合实例2-移动端页面练习
html5--2.10综合实例2-移动端页面练习
学习要点
- 通过一个简单的移动手机页面,复习学过的内容
- 手机网页的测试
- 手机布局的屏幕设定
- 手机网页的测试方法
- 直接在手机上测试,比较麻烦,效果好
- 电脑上下载手机模拟器
- 利用浏览器自带的功能
- name="viewport":屏幕设定
- maximum-scale=1.0,minimum-scale=1.0;initial-scale=1.0:最大最小缩放比例为1:其实就是不允许点击缩放
- user-scalable=0,width=device-width:设定内容和设备的屏幕等宽,等高
学习要点
- 完成综合实例2的页面框架
本节课涉及到的知识点
- 本节课要用到的元素:header/footer/section/aside
- 本节课要用到的样式:width/height/backgroud
- 本节课还要用到后边CSS章节会详细讲解的几个知识点,对这些只要求了解,后边会有专门章节从头仔细讲,这里为了演示提取使用
- 浮动:float: left 暂时可以简单理解为它的作用就是可以让块元素不换行,而是从左向右排列
- margin: 0暂时只需知道它可以设置外边距,可以去掉body和内容的白边即可。
学习要点
- 给section中添加内容
本节课涉及到的知识点
- 本节课要用到的元素:figure/figcaption
- 本节课要用到的样式:width/height
- 本节课还要用到后边CSS章节会详细讲解的几个知识点,对这些只要求了解,后边会有专门章节从头仔细讲,这里为了演示提取使用
- margin: 0 暂时只需知道它可以设置外边距,可以去掉body和内容的白边即可。
- overflow: auto 内容超出父元素容器后自动加滚动条
学习要点
- 给header和aside中添加内容
本节课涉及到的知识点
- 本节课要用到的元素:header/aside/hgroup
- 本节课要用到的样式:width/max-with
- 本节课还要用到后边CSS章节会详细讲解的几个知识点,对这些只要求了解,后边会有专门章节从头仔细讲,这里为了演示提取使用
- text-decoration: none 给a标签去掉下划线,仅作了解
学习要点
- 给footer中添加内容
本节课涉及到的知识点
- 本节课要用到的元素:nav
- 本节课还要用到后边CSS章节会详细讲解的几个知识点,对这些只要求了解,后边会有专门章节从头仔细讲,这里为了演示提取使用
- text-decoration: none 给a标签去掉下划线,仅作了解
实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<title>综合实例</title>
<style type="text/css">
body{margin: 0px}
header{width: 100%;height: 50px;background: #FF8888}
h4{display: inline;color: #FD00FA}
aside{width: 20%;height: 540px;background: #888834;float: left;}
section{width: 80%;height: 540px;background: #FF8834;float: left;overflow: auto;}
footer{width: 100%;height: 50px;background: #88FF88;clear: left;}
figcaption{text-align: center;color: #00DFFA}
img{max-width: 70%;}
ul{list-style-type: none;}
li{display: inline;}
</style>
</head>
<body>
<header>
<hgroup>
<img src="data:images/ss.png" alt="">
<h4>移动端页面练习</h4>
</hgroup>
</header>
<aside>
<nav>
<ul>
<li><a href=""><img src="data:images/zhi.png" alt=""></a></li>
<li><a href=""><img src="data:images/ka.png" alt=""></a></li>
<li><a href=""><img src="data:images/tuan.png" alt=""></a></li>
<li><a href=""><img src="data:images/ding.png" alt=""></a></li>
<li><a href=""><img src="data:images/vip.png" alt=""></a></li>
<li><a href=""><img src="data:images/sc.png" alt=""></a></li>
</ul>
</nav>
</aside>
<section>
<figure>
<img src="sp/sp1.png" width="50%" alt=""><img src="sp/sp2.png" width="50%" alt="">
</figure>
<figcaption>食品/家电</figcaption>
<figure>
<img src="sp/sp3.png" width="50%" alt=""><img src="sp/sp4.png" width="50%" alt="">
</figure>
<figcaption>汽车/家居</figcaption>
<figure>
<img src="sp/sp5.png" width="50%" alt=""><img src="sp/sp6.png" width="50%" alt="">
</figure>
<figcaption>数码/珠宝</figcaption>
<figure>
<img src="sp/sp1.png" width="50%" alt=""><img src="sp/sp2.png" width="50%" alt="">
</figure>
<figcaption>食品/家电</figcaption>
<figure>
<img src="sp/sp3.png" width="50%" alt=""><img src="sp/sp4.png" width="50%" alt="">
</figure>
<figcaption>汽车/家居</figcaption>
<figure>
<img src="sp/sp5.png" width="50%" alt=""><img src="sp/sp6.png" width="50%" alt="">
</figure>
<figcaption>数码/珠宝</figcaption>
<figure>
<img src="sp/sp1.png" width="50%" alt=""><img src="sp/sp2.png" width="50%" alt="">
</figure>
<figcaption>食品/家电</figcaption>
<figure>
<img src="sp/sp3.png" width="50%" alt=""><img src="sp/sp4.png" width="50%" alt="">
</figure>
<figcaption>汽车/家居</figcaption>
<figure>
<img src="sp/sp5.png" width="50%" alt=""><img src="sp/sp6.png" width="50%" alt="">
</figure>
<figcaption>数码/珠宝</figcaption>
</section>
<footer>
<ul>
<nav>
<li><a href=""><img src="data:images/zy.png" alt="" width="45"></a></li>
<li><a href=""><img src="data:images/qb.png" alt="" width="45"></a></li>
<li><a href=""><img src="data:images/gw.png" alt="" width="45"></a></li>
<li><a href=""><img src="data:images/dl.png" alt="" width="45"></a></li>
</nav>
</ul>
</footer>
</body>
</html>
html5--2.10综合实例2-移动端页面练习的更多相关文章
- 【C语言入门教程】4.10 综合实例 - 媒体播放器
4.10.1 建立播放列表 数据字典 名称 数据类型 说明 MAX_LENGTH 符号常量 用于定义数组长度,表示列表最大长度 MAX_FILE_LENGTH 符号常量 用于定义数组长度,表示文件名最 ...
- javascript小实例,移动端页面中的拖拽
上文说到,想将移动端的拖拽说一说,那现在趁有时间,就将这个福利文带来了,哈哈! 在我还不知道怎么做移动端的手势操作的时候,我觉得这TM实在是太难了,这是多么高深的学问啊,手势操作耶,上滑下滑左滑右滑的 ...
- Web 开发中应用 HTML5 技术的10个实例教程
HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...
- [原创]MongoDB综合实例一
CentOS-6.5单机实现mongoDB分片 环境:1)CentOS 6.5系统 2)IP:本机3)MongoDB:MongoDB-linux-x86_64-2.6.1 实现:两个副本集s ...
- ReportingServies——SQLServer报表开发综合实例
如果我们安装了sqlserver2008 R2,将会自动安装一个报表开发工具 不要以为此报表开发工具只适合于sqlserver2008,其实在sqlserver2012中也是支持的,事实上我现在项目中 ...
- Loadrunner 关联 web_custom_request综合实例
Loadrunner 关联 web_custom_request综合实例 Loadrunner 关联web_custom_request,针对自带的订票系统的一个综合实例,相信看了本文大家对学习loa ...
- 使用VS2012 开发SharePoint 2013 声明式的action(activity) 综合实例
本文讲述使用VS2012 开发SharePoint 2013 声明式的action 综合实例. 需求同: http://blog.csdn.net/abrahamcheng/article/detai ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
随机推荐
- CSRF到底 是个什么玩意?
CSRF CSRF(Cross-site request forgery)跨站请求伪造,也被称为"One Click Attack"或者Session Riding,通常缩写为CS ...
- vuex 深入理解
参考自:https://mp.weixin.qq.com/s?src=11×tamp=1528275978&ver=922&signature=ZeHPZ2ZrLir ...
- HDU1323_Perfection【水题】
Perfection Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...
- python实现区块链代码
如果你明白了原理其实挺简单的. 加密算法是python自带的 需要导入hashlib import hashlib as hash sha = hasher.sha256() sha.update(' ...
- java类库中的设计模式
原帖:http://stackoverflow.com/questions/1673841/examples-of-gof-design-patterns 提问:我正在学习GoF的<设计模式&g ...
- Spring Boot从入门到实战:整合Web项目常用功能
在Web应用开发过程中,一般都涵盖一些常用功能的实现,如数据库访问.异常处理.消息队列.缓存服务.OSS服务,以及接口日志配置,接口文档生成等.如果每个项目都来一套,则既费力又难以维护.可以通过Spr ...
- 如何使用CocoaPods安装使用及配置私有库以及管理依赖库 【原创】
CocoaPods是什么 在iOS开发中势必会用到一些第三方依赖库,比如大家都熟悉的ASIHttpRequest.AFNetworking.JSONKit等.使用这些第三方类库能极大的方便项目的开发, ...
- 开启Java远程调试
在JDK启动时,加入 -Xrunjdwp:transport=dt_socket,address=9900,server=y,suspend=n -Dcom.sun.management.jmxrem ...
- Volley框架载入网络图片
Android开发中,载入网络server的图片是非经常常使用的.当然我们能够自己写server接口去实现,只是要做到server性能 优越的话,开发起来比較麻烦点.所以本博客要介绍Volley框架进 ...
- 如何利用hibernate3解决数据库丢失更新问题?
首先我们要明白什么叫丢失更新. 比如数据库有一个person表,里面有一条这样的数据 "5 zhangsan shenzhen"; 现在有两个事务A.B同时查找了这一条记录: A事 ...