Html5 手机端网页
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,
width=device-width,initial-scale=1.0" />
<title></title>
<style>
body
{
margin: 0;
}
header
{
width: 100%;
height: 50px;
background: #AEFEEE;
}
header h4
{
display: inline;
}
aside
{
width: 20%;
height: 540px;
background: #708090;
float: left;
} section
{
width: 80%;
height: 540px;
background: #D8BFD8;
float: left;
overflow: auto;
}
footer
{
width: 100%;
height: 50px;
background: green;
clear: left;
}
figure
{
padding: 0;
}
img
{
max-width: 70%;
}
ul
{
list-style-type: none;
} footer li
{
display:inline;
}
</style>
</head>
<body>
<header>
<hgroup>
<img src="../Images/bb.png" width="30px"/>
<h4>移动端页面练习</h4>
</hgroup> </header>
<aside>
<nav>
<ul>
<li>
<a href="">
<img src="../Images/bb.png" width="30px"/>
</a>
</li>
<li>
<a href="">
<img src="../Images/bb.png" width="30px"/>
</a>
</li>
<li>
<a href="">
<img src="../Images/bb.png" width="30px"/>
</a>
</li>
</ul>
</nav>
</aside>
<section>
<figure>
<img src="../Images/bb.png" alt="" width="45%" />
<img src="../Images/bb.png" alt="" width="45%" />
</figure>
<figcation>衣服</figcation>
<figure>
<img src="../Images/bb.png" alt="" width="40%" />
<img src="../Images/bb.png" alt="" width="40%" />
</figure>
<figcation>衣服</figcation>
<figure>
<img src="../Images/bb.png" alt="" width="40%" />
<img src="../Images/bb.png" alt="" width="40%" />
</figure>
<figcation>衣服</figcation>
<figure>
<img src="../Images/bb.png" alt="" width="40%" />
<img src="../Images/bb.png" alt="" width="40%" />
</figure>
<figcation>衣服</figcation>
<figure>
<img src="../Images/bb.png" alt="" width="40%" />
<img src="../Images/bb.png" alt="" width="40%" />
</figure>
<figcation>衣服</figcation>
</section>
<footer>
<nav>
<ul>
<li>
<a href="">
<img src="../Images/bb.png" width="30px"/>
</a>
</li>
<li>
<a href="">
<img src="../Images/bb.png" width="30px"/>
</a>
</li>
<li>
<a href="">
<img src="../Images/bb.png" width="30px"/>
</a>
</li>
</ul>
</nav>
</footer>
</body>
</html>
Html5 手机端网页的更多相关文章
- Html5 手机端网页不允许缩放
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- 移动端调试神器vconsole,手机端网页的调试工具Eruda
移动端调试神器vconsole,手机端网页的调试工具Eruda 移动端中使用 vConsole调试 移动端调试工具vconsole安装Git地址:https://github.com/WechatFE ...
- HTML5手机端拍照上传
1.accept="image/*" capture="camera" 自动调用手机端拍照功能 accept="image/*" captu ...
- 手机端网页返回顶部js代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 关于HTML5手机端页面缩放的问题
通常在写HTML5手机端页面的时候,我们会发现页面所显示元素的比例不正确,那此时我们需要添加的就是: <meta name="viewport" content=" ...
- html5手机端播放音效不卡的方法
html5手机端播放音效不卡的方法线下载http://wxserver.knowway.cn/solosea/js/audioEngine.js 这个是性能不错 然后直接播放音效就可以了 audioE ...
- 70.JS---利用原生js做手机端网页自适应解决方案rem布局
利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, pr ...
- 手机端网页使用html5地理定位获取位置失败的解决办法
网上有很多关于html5 geolocation 获取地理定位的方法,我试了下,只有在IE edge浏览器可以成功获取到,在chrome,firefox,手机端的safari,QQ浏览器,微信浏览器, ...
- 手机端网页web开发要点
1.初始化 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
随机推荐
- Linux下编译、链接和装载
——<程序员的自我修养>读书笔记 编译过程 在Linux下使用GCC将源码编译成可执行文件的过程可以分解为4个步骤,分别是预处理(Prepressing).编译(Compilation). ...
- border-sizing属性详解和应用
box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型.它有content-box.border-box和inherit三种取值.inherit指的是从父元素继承box-sizi ...
- 9种网页Flash焦点图和jQuery焦点图幻灯片
jQuery图标放大轮播焦点图 Flash图片焦点图滑动切换 Flash右侧焦点图上下滑动切换 左右按钮滑动切换的网页幻灯片 双图同时滑动切换的焦点图 含有上下按钮的双图同时滑动切换的焦点图 常见的j ...
- jQuery点击页面其他部分隐藏下拉菜单
一.开发小要点 web页面中,我们一般不用select.option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大上的效果,但是不能像下拉框那样点击页面 ...
- NODE获取节点删除空格的操作
NODE节点操作有: object.parentNode:获取某子元素的父级: object.childNodes:是获取所有的子元素节点,返回数组类型: object.lastChild: 获取该元 ...
- js 乘除法小数问题
因为经常需要js来处理显示,就做下笔记 除法: function accDiv(arg1, arg2) { var t1 = 0, t2 = 0, r1, r2; try { t1 = arg1.to ...
- JAVA 和.NET在安全功能的比较
以下转载于: http://www.it28.cn/ASPNET/825159.html 本文根据Denis Piliptchouk的文章翻译.摘录而来,有些术语翻译不太好理解,还请参考原文. 第一部 ...
- Android开发常用的一些功能列表（转）
文章来源:http://www.cnblogs.com/netsql/archive/2013/03/02/2939828.html 1.软件自动更新下载,并提示 2.软件登录注册,以及状态保存 3. ...
- Jni OnLoad()和OnUnload()
除了前面说的自定义JNI函数之外,JNI还提供了两个特殊函数,它们是JNI_OnLoad()和JNI_OnUnload(),分别在加载库和卸载库的时候调用. 1.JNI_OnLoad() Java调用 ...
- Android基础之6.0系统以上的权限分配
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle saved ...