html5-移动端布局模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合实例-移动端页面开发</title>
<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:#FFCCCC}
h4{display:inline;}
aside{width: 20%;height: 540px;background:#CCCCCC;float: left;}
section{width: 80%;height: 540px;background:#f0f0f0;float: left;overflow: auto;}
footer{width: 100%;height: 50px;background:#FFCCCC;clear: left;}
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>
<aside>
<nav>
<ul>
<li><a href=""><img src="imges/zhi.png" alt=""></a></li>
<li><a href=""><img src="imges/ka.png" alt=""></a></li>
<li><a href=""><img src="imges/tuan.png" alt=""></a></li>
<li><a href=""><img src="imges/ding.png" alt=""></a></li>
<li><a href=""><img src="imges/vip.png" alt=""></a></li>
<li><a href=""><img src="imges/sc.png" alt=""></a></li>
</ul>
</nav>
</aside>
<section>
<figure><img src="sp/sp1.png" alt="" width="50%"><img src="sp/sp2.png" alt="" width="50%"></figure>
<figcaption>食品/家电</figcaption>
<figure><img src="sp/sp3.png" alt="" width="50%"><img src="sp/sp4.png" alt="" width="50%"></figure>
<figcaption>家电/家居</figcaption>
<figure><img src="sp/sp5.png" alt="" width="50%"><img src="sp/sp6.png" alt="" width="50%"></figure>
<figcaption>数码/珠宝</figcaption>
<figure><img src="sp/sp1.png" alt="" width="50%"><img src="sp/sp2.png" alt="" width="50%"></figure>
<figcaption>食品/家电</figcaption>
<figure><img src="sp/sp3.png" alt="" width="50%"><img src="sp/sp4.png" alt="" width="50%"></figure>
<figcaption>家电/家居</figcaption>
<figure><img src="sp/sp5.png" alt="" width="50%"><img src="sp/sp6.png" alt="" width="50%"></figure>
<figcaption>数码/珠宝</figcaption>
</section>
<footer>
<nav>
<ul>
<li><a href=""><img src="imges/zy.png" alt="" width="45"></a></li>
<li><a href=""><img src="imges/qb.png" alt="" width="45"></a></li>
<li><a href=""><img src="imges/gw.png" alt="" width="45"></a></li>
<li><a href=""><img src="imges/dl.png" alt="" width="45"></a></li>
</ul>
</nav>
</footer>
</body>
</html>
html5-移动端布局模板的更多相关文章
- html5 移动端单页面布局
序 移动端的web网页使用的是响应式设计,但一般我们看到的网站页面都是跳转刷新得到的,比如通过点击一个menu后进入到另一个页面 今天来说下是移动端的单页面的布局.单页面就是一切操作和布局都是 ...
- 第九十一节，html5+css3pc端固定布局，完成首页
html5+css3pc端固定布局,完成首页 此时我们的首页就完成了 首页效果 其他页面我就不做了,原理相同,做其他页面时将头尾css分离调用即可 大纲算法 我们看看大纲算法比较清晰,说明符合规则 h ...
- 第九十节，html5+css3pc端固定布局，底部区域，说明区域，版权区域
html5+css3pc端固定布局,底部区域,说明区域,版权区域 完成: HTML代码: <!--尾部--> <footer class="wei-bu"> ...
- 第八十九节，html5+css3pc端固定布局，热门旅游取，标题介绍区，旅游项目区
html5+css3pc端固定布局,热门旅游取,标题介绍区,旅游项目区 样式: html代码: <!--主体--> <section class="zhu-ti" ...
- 第八十八节，html5+css3pc端固定布局，搜索区，插入大图，搜索框
html5+css3pc端固定布局,搜索区,插入大图,搜索框 设置一个div作为搜索区域 1.宽度为百分之百 2.最小宽度为1263,因为要考虑到手机,等小屏幕缩小后宽度会自适应,导致破坏布局,将最小 ...
- 第八十七节，html5+css3pc端固定布局，大纲算法，section和div，结构分析
html5+css3pc端固定布局,大纲算法,section和div,结构分析 一．大纲算法 在HTML5中有一个很重要的概念,叫做HTML5 大纲算法(HTML5Outliner),它的用途是为用户 ...
- 第八十六节，html5+css3pc端固定布局,网站结构,CSS选择器,完成导航
html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...
- 移动端REM布局模板(阿里高清方案)
移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...
- Html5移动端页面自适应布局详解(阿里rem布局)
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport ...
随机推荐
- selenium+iframe 如何定位元素（实战）
场景: 在同一界面,需定位iframe里面的元素, 就需要切换至Iframe块,然后定位元素,验证完成后,再切换出来. 如果不切换至iframe ,会发现不管采取什么定位,都会报元素不存在.
- 洛谷P4562 [JXOI2018]游戏 数论
正解:数论 解题报告: 传送门! 首先考虑怎么样的数可能出现在t(i)那个位置上?显然是[l,r]中所有无法被表示出来的数(就约数不在[l,r]内的数嘛QwQ 所以可以先把这些数筛出来 具体怎么筛的话 ...
- 获取 base64 的封装
/** * 1. 如何实例化 const fileInput = await FileInput.init(fileInputEle, isMulFile) */ export class FileI ...
- 10.8-uC/OS-III内部任务（中断处理任务 OS_IntQTask()）
1.当设置OS_CFG.H中的OS_CFG_ISR_POST_DEFERRED_EN为1时, uC/OS-III就会创建一个任务,它的作用是尽快完成ISR中对post函数的调用, 将信号量.消息等对象 ...
- 笔记:mysql升序排列asc，降序排列desc
经常会忘记mysql中升序和降序用什么字符来表示,现在就做个笔记:升序排列asc,降序排列desc,举个例子,下面是按时间降序调用栏目的文章,也即是栏目最新文章 [e:loop={"sele ...
- Sql server 函数--取值年月
GetDate()是获取当前时间 1.例如获取年月类似 201706 需要改为语句: Select Datename(year,GetDate())+Datename(month,GetDate())
- 正交表和TCG的使用
正交表法是一种有效减少测试用例个数的设计方法. 正交表法的依据是Galois理论,从大量的实验数据中挑选适量的.有代表性的点,从而合理的安排实验的一种科学实验设计方法.在测试用例的设计中,可以从大量的 ...
- 回文字符串 NYOJ
# include<iostream> # include<string> # include<string.h> # include<queue> # ...
- 2017-2018-2 20165236 实验三《Java面向对象程序设计》实验报告
2017-2018-2 20165236 实验三<Java面向对象程序设计>实验报告 一.实验报告封面 课程:Java程序设计 班级:1652 姓名:郭金涛 ...
- kickstart模式实现批量安装centos7.x系统
1.1 安装系统的方法 l 光盘(ISO文件,光盘的镜像文件)===>>每一台物理机都得给一个光驱,如果用外置光驱的话,是不是每台机器都需要插一下 l U盘:ISO镜像刻录到U盘==& ...