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 ...
随机推荐
- SVN多分支开发模式V1.0.1
1目的 规范开发模式过程,指导项目研发.质控测试.DevOps的相关活动. 2适用范围 本规范的作用范围是为互联网软件产品相关项目开发模式的管理过程. (1) 对项目团队中研发人员在开发模式过程中 ...
- 列表中文字太多 溢出使用省略号css方法
我们经常会遇到文字太多,而为了不打破原有布局,需要将多出文字用省略号代替,实现以下效果: 文字太太太太多多多啦...... 这个不多. html:这是个列表.ul/ol都行. <ul> & ...
- Python 练习：简单的购物车(二)
优化了上一个购物车程序:http://www.cnblogs.com/klvchen/p/8577269.html #输入工资salary = input("Please input you ...
- javascript: checked 不可全选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Callable接口--有返回值的线程
Callable java5之前是没有返回值的,Java5新增了Callable接口获得线程的返回值,可返回值的任务必须实现Callable接口,类似的,无返回值的任务必须Runnable接口.Cal ...
- CSS效果：CSS实用技巧制作三角形以及箭头效果
实现如图所示的三角形图标: html代码如下: <div class="arrow-up"></div> <div class="arrow ...
- 图的遍历（bfs+dfs）模板
bfs #include<iostream> #include<queue> #include<cstdio> using namespace std; queue ...
- 使用Twitter异常检测框架遇到的坑
在Github上搜索“Anomaly Detection”,Twitter的异常检测框架(基于R语言)高居榜首,可见效果应该不错: 但是活跃度并不高,3-4年没人维护了: 因此在使用时难免会遇到一些坑 ...
- tomcat 取消项目名访问路径
在server.xml 里,<host>...</host>的标签之间添加<Context path="" docBase="projec ...
- 【转】对cocos2d 之autorelease\ratain\release的理解
原文链接:http://blog.sina.com.cn/s/blog_4057ab6201018y4y.html Objective C内存管理进阶(二):理解autorelease: http:/ ...