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>
转载于:https://www.cnblogs.com/houweidong/p/7520476.html
html5-移动端布局模板相关推荐
- html5 手机站点,HTML5移动端手机网站基本模板 HTML5基本结构
HTML5移动端最基本网页模板代码(以下HTML代码可直接拷贝复制使用): 手机网站最基本HTML模板 body{font-size:62.5%;font-family:"Microsoft ...
- HTML5响应式手机模板：电商网站设计——房地产移动端网页模板(15个页面)
HTML5响应式手机模板:电商网站设计--房地产移动端网页模板(15个页面) HTML+CSS+JavaScript 手机模板wap 手机网站模板 手机网页模板 手机网站模板 手机模板 响应式手机网站 ...
- html代码整体移动,HTML5移动端最基本网页模板代码
HTML5移动端最根蒂根基网页模板代码(以下HTML代码可直接拷贝复制运用): 电话网站最基础底细HTML模板 body{font-size:62.5%;font-family:"Micr ...
- HTML5移动端最基本网页模板代码
HTML5移动端最根蒂根基网页模板代码(以下HTML代码可直接拷贝复制运用): <!doctype html> <html> <head> <meta cha ...
- html手机端适配怎么调试,html5面试常见问题及答案：移动端布局与适配篇
原标题:html5面试常见问题及答案:移动端布局与适配篇 1. 移动布局自适应不同屏幕的几种方式 (1)响应式布局 (2)100%布局(弹性布局) (3)等比缩放布局(rem) 2. iscroll安 ...
- web前端入门学习 css（9）广义的html5 品优购项目（html+css基础完结，js开始，移动端布局开始）
文章目录 广义的html5 品优购项目导读 网站制作流程 原型图 项目规划 项目整体介绍 项目规划 项目搭建 网站favicon图标 网站TDK三大标签SEO优化 品优购首页制作 常用模块类名命名 快 ...
- html5 自适应手机布局,科技常识：html5移动端自适应布局的实现
今天小编跟大家讲解下有关html5移动端自适应布局的实现 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关html5移动端自适应布局的实现 的相关资料,希望小伙伴们看了有所帮助. 场景:为适 ...
- 自适应响应式炫酷汽车配件类网站源码 html5高端大气汽车网站织梦模板
简介: 本套织梦模板采用织梦内核开发的模板,这款模板使用范围广,不仅仅局限于一类型的企业,汽车配件.汽车类的网站都可以用该模板.你只需要把图片和文章内容换成你的即可,颜色都可以修改,改完让你耳目一新的 ...
- 移动端通用元件库+app通用元件库+数据展示+操作反馈+通用模板+数据录入+列表页+表单页+详情页+通用版布局+移动端手机模板+业务组件+反馈组件+展示组件+表单组件+导航组件
移动端通用元件库+app通用元件库+数据展示+操作反馈+通用模板+数据录入+列表页+表单页+详情页+通用版布局+移动端手机模板+业务组件+反馈组件+展示组件+表单组件+导航组件 原型展示及下载地址:h ...
- html5 移动端单页面布局
序 移动端的web网页使用的是响应式设计,但一般我们看到的网站页面都是跳转刷新得到的,比如通过点击一个menu后进入到另一个页面 今天来说下是移动端的单页面的布局.单页面就是一切操作和布局都 ...
最新文章
- AndroidStudio 新建不同的Drawable文件夹
- Nature：植物叶际微生物组稳态维持机制
- HDU1203_I NEED A OFFER!【01背包】
- C++ sodoku solve数独算法(附完整源码)
- js判断最后一个字符是不是指定字符_结合简单的 JS 就可以让 CSS 也能做搜索
- 变异测试 java_编码的喜悦……以及Java中的变异测试
- 想念一个人是一种温馨，被别人想念是一种幸福
- SpringCloud工作笔记030---使用java提供的keytool来生成证书
- 世界名校、大厂人才汇聚，“马栏山杯”算法大赛打造 AI 视频竞技场
- python实现简单的http服务器_python实现简单http服务器功能
- （2）[wp7数据存储] WP7 IsolatedStorage系列篇——获取存储的文件或文件夹 [复制链接]...
- 关于Docker的一些问题总结
- mac下复制粘贴需要多次的问题
- 阿里云短信服务(解决个人无法申请问题)
- 通过session实现通用爬虫--爬取到开心网账户的首页界面
- 浏览器无法访问此网站，连接已被重置，无法加载
- GPS定位轨迹抽稀之道格拉斯-普克（Douglas-Peuker)算法详解
- 微信账户如何解除对第三方应用的授权
- 【面经】字节跳动C++社招5轮面试题分享
- 计算机电脑Windows系统中了faust勒索病毒，phobos勒索家族介绍，Windows用户注意