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 ...
随机推荐
- Paired t-test
1 Continuous Dependent Variable with normal distribution 1 (2 Level) Categorical Independent Variabl ...
- 数组式访问-ArrayAccess
以前对ArrayAccess不是很熟悉,现在整理下下有关ArrayAccess相关的知识,ArrayAccess接口就是提供像访问数组一样访问对象的能力的接口. 接口内容如下: ArrayAccess ...
- sublime text3快速生成html头部信息
1.在网站开发过程中尤其写前台页面时要写头部很麻烦,怎么办呢?直接生成不更好吗? 这是快速生成的信息 2.方法: ctrl+shift+P打开命令面板 点击安装控制器 3.输入emmet 安装(以下图 ...
- Python 线程同步锁, 信号量
同步锁 import time, threading def addNum(): global num num -= 1 num = 100 thread_list = [] for i in ran ...
- 【pygame游戏编程】第五篇-----动画显示
import pygame import sys import os pygame.init() #窗口居中 os.environ[' screen_width = 600 screen_high = ...
- Windows下判断jdk是否安装好以及环境变量是否配置好
cmd下执行: 1.java 2.javac 3.where java 如果三个都没问题,说明安装成功&环境变量配置成功
- Ado.net 访问Oracle乱码问题
之前安装Oracle - OraClient10g_home1客户端,用Ado.net访问没有问题,后来安装ODP之后,自动的又安装了Oracle - OraClient12Home1,之后就出现乱码 ...
- mongodb 配置文件
本文档是在mongodb为3.4下编写的,仅作为参考,详细内容请参考:https://docs.mongodb.com/manual/reference/configuration-options/# ...
- 反射型XSS+文件上传+CSRF—DVWA
在学习的过程中,想到将几种漏洞进行组合练习,记录下学习过程.大佬请绕过!谢谢!! 测试环境:DVWA,安装方法参考上一篇:https://www.cnblogs.com/aq-ry/p/9220584 ...
- 使用if语句时应注意的问题（初学者）
(1)在三种形式的if语句中,在if关键字之后均为表达式.该表达式通常是逻辑表达式或关系表达式,但也可以是其他表达式,如赋值表达式等,甚至也可以是一个变量. 例:if(a=5)语句: if(b)语句: ...