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 ...
随机推荐
- python运算符,数据类型,数据类型操作,三目运算,深浅拷贝
算数运算符: Py2中精确除法需要导入:from __future__ import division,(符由特 ,将来的.滴未省,除法) py3不需要导入 赋值运算符: 比较运算符: 成员运算符: ...
- 《Mysql 日志结构》
推荐一首歌 - <往后余生>王贰浪 发现自己每天就听这么几首歌 一:慢查询日志 - SQL 完成查询并完成对于锁资源的释放之后,msqld 会将符合条件的SQL写入慢日志.因此慢日志可能和 ...
- Beanstalkd 基本概念和使用
1:什么是 Beanstalkd ? Beanstalkd 一个高性能.轻量级的分布式内存队列系统 简单来说,就是一个队列,相比于 数据库/redis 队列相比. 更专业.能完成的功能更多.就这么理解 ...
- fiddler抓包常用功能详解
一.基础部分: 1.设置代理ip及端口,tools --> telerik fiddler options --> connections -->勾选 “ Allow romote ...
- 注解之@CookieValue
@RequestHeader以及@CookieValue这两个注解用法类似,属性也相同,所以,写在一起.二者属性和RequestParam的属性一样,用法也几乎一样. 作用 @RequestHeade ...
- 数据库使用：sql server/mysql/sqlite
本科学过sql server数据库,上研刚开始在做研究时自己想点子自己做,为了简便使用了论文中看到的一个简易数据库sqlite存储使用数据.后来随着数据量的增长,以及数据处理的需求sqlite速度明显 ...
- sql分页语句 速度比较快
select * from ( select *,ROW_NUMBER() over (order by createtime) as rank from taskInfo )
- es定制排序搜索结果
GET /company/employee/_search { "query": { "constant_score": { "filter" ...
- what's the python之自定义模块和包
模块自定义 上节说了有关模块的知识,当时所说的模块都是内置模块,现在来看自己定制的模块,即模块也可以自定义. 模块的自定义就是指写一段python文件,一般情况下里面包含了可执行的语句和函数的定义,其 ...
- NYOJ 会场安排问题
#include<iostream> #include<stdio.h> #include<string.h> #include<queue> #inc ...