html5--2.10综合实例2-移动端页面练习

最新推荐文章于 2022-07-14 22:21:23 发布

weixin_34407348

最新推荐文章于 2022-07-14 22:21:23 发布

阅读量346

点赞数

原文链接：http://www.cnblogs.com/Renyi-Fan/p/7913641.html

版权

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标签去掉下划线，仅作了解

实例

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
 5     <meta charset="UTF-8">
 6     <title>综合实例</title>
 7     <style type="text/css">
 8         body{margin: 0px}
 9         header{width: 100%;height: 50px;background: #FF8888}
10         h4{display: inline;color: #FD00FA}
11         aside{width: 20%;height: 540px;background: #888834;float: left;}
12         section{width: 80%;height: 540px;background: #FF8834;float: left;overflow: auto;}
13         footer{width: 100%;height: 50px;background: #88FF88;clear: left;}
14         figcaption{text-align: center;color: #00DFFA}
15         img{max-width: 70%;}
16         ul{list-style-type: none;}
17         li{display: inline;}
18     </style>
19 </head>
20 <body>
21     <header>
22         <hgroup>
23             <img src="images/ss.png" alt="">
24             <h4>移动端页面练习</h4>
25         </hgroup>
26     </header>
27     <aside>
28         <nav>
29             <ul>
30                 <li><a href=""><img src="images/zhi.png" alt=""></a></li>
31                 <li><a href=""><img src="images/ka.png" alt=""></a></li>
32                 <li><a href=""><img src="images/tuan.png" alt=""></a></li>
33                 <li><a href=""><img src="images/ding.png" alt=""></a></li>
34                 <li><a href=""><img src="images/vip.png" alt=""></a></li>
35                 <li><a href=""><img src="images/sc.png" alt=""></a></li>
36             </ul>
37         </nav>
38     </aside>
39     <section>
40         <figure>
41             <img src="sp/sp1.png" width="50%" alt=""><img src="sp/sp2.png"  width="50%" alt="">
42         </figure>
43         <figcaption>食品/家电</figcaption>
44         <figure>
45             <img src="sp/sp3.png" width="50%" alt=""><img src="sp/sp4.png"  width="50%" alt="">
46         </figure>
47         <figcaption>汽车/家居</figcaption>
48         <figure>
49             <img src="sp/sp5.png" width="50%" alt=""><img src="sp/sp6.png"  width="50%" alt="">
50         </figure>
51         <figcaption>数码/珠宝</figcaption>
52         <figure>
53             <img src="sp/sp1.png" width="50%" alt=""><img src="sp/sp2.png"  width="50%" alt="">
54         </figure>
55         <figcaption>食品/家电</figcaption>
56         <figure>
57             <img src="sp/sp3.png" width="50%" alt=""><img src="sp/sp4.png"  width="50%" alt="">
58         </figure>
59         <figcaption>汽车/家居</figcaption>
60         <figure>
61             <img src="sp/sp5.png" width="50%" alt=""><img src="sp/sp6.png"  width="50%" alt="">
62         </figure>
63         <figcaption>数码/珠宝</figcaption>
64         <figure>
65             <img src="sp/sp1.png" width="50%" alt=""><img src="sp/sp2.png"  width="50%" alt="">
66         </figure>
67         <figcaption>食品/家电</figcaption>
68         <figure>
69             <img src="sp/sp3.png" width="50%" alt=""><img src="sp/sp4.png"  width="50%" alt="">
70         </figure>
71         <figcaption>汽车/家居</figcaption>
72         <figure>
73             <img src="sp/sp5.png" width="50%" alt=""><img src="sp/sp6.png"  width="50%" alt="">
74         </figure>
75         <figcaption>数码/珠宝</figcaption>
76     </section>
77     <footer>
78         <ul>
79             <nav>
80                 <li><a href=""><img src="images/zy.png" alt="" width="45"></a></li>
81                 <li><a href=""><img src="images/qb.png" alt="" width="45"></a></li>
82                 <li><a href=""><img src="images/gw.png" alt="" width="45"></a></li>
83                 <li><a href=""><img src="images/dl.png" alt="" width="45"></a></li>
84             </nav>
85         </ul>
86     </footer>
87 </body>
88 </html>

View Code

转载于:https://www.cnblogs.com/Renyi-Fan/p/7913641.html

weixin_34407348

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5--2.10综合实例2-移动端页面练习

html5--2.10综合实例2-移动端页面练习学习要点通过一个简单的移动手机页面，复习学过的内容手机网页的测试手机布局的屏幕设定手机网页的测试方法直接在手机上测试，比较麻烦，效果好电脑上下载手机模拟器利用浏览器自带的功能name="viewport"：屏幕设定maximum-scale=1.0,minimum-scale=1.0；i...
复制链接

扫一扫