28第二部分综合实例
来源:互联网 发布:网络打印 任务挂起 编辑:程序博客网 时间:2024/05/05 18:31
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>综合实例</title>
<meta charset="utf-8" >
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,
width=device-width,initial-scale=1.0">
<!--最大最小缩放比例为1,其实就是不允许点击缩放,设定内容和设备的屏幕等宽,等高-->
<html lang="zh-cn">
<head>
<title>综合实例</title>
<meta charset="utf-8" >
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,
width=device-width,initial-scale=1.0">
<!--最大最小缩放比例为1,其实就是不允许点击缩放,设定内容和设备的屏幕等宽,等高-->
<style type="text/css">
header{width:100%;height:80px;background:green}
aside{width:20%;height:540px;background:red;float:left}
section{width:80%;height:540px;background:gray;float:left;overflow:auto}
footer{width:100%;height:50px;background:yellow;clear:left}
figure{padding:0px}
h4{display:inline}
img{max-width:70%}
ul{list-style-type:none}
li{display:inline}
a{text-decoration:none}
</style>
header{width:100%;height:80px;background:green}
aside{width:20%;height:540px;background:red;float:left}
section{width:80%;height:540px;background:gray;float:left;overflow:auto}
footer{width:100%;height:50px;background:yellow;clear:left}
figure{padding:0px}
h4{display:inline}
img{max-width:70%}
ul{list-style-type:none}
li{display:inline}
a{text-decoration:none}
</style>
</head>
<body>
<header>
<hgroup>
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
<h4>移动端页面练习</h4>
</hgroup>
</header>
<aside>
<nav>
<ul>
<li>baidu<a href="http://www.baidu.com"><img src="E:\xampp\htdocs\html\1\baidu1.png" alt=""></a></li>
<li>baidu<a href="http://www.baidu.com"><img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" ></a></li>
<li>baidu<a href="http://www.baidu.com"><img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" ></a></li>
<li>baidu<a href="http://www.baidu.com"><img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" ></a></li>
</ul>
</nav>
</aside>
<body>
<header>
<hgroup>
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
<h4>移动端页面练习</h4>
</hgroup>
</header>
<aside>
<nav>
<ul>
<li>baidu<a href="http://www.baidu.com"><img src="E:\xampp\htdocs\html\1\baidu1.png" alt=""></a></li>
<li>baidu<a href="http://www.baidu.com"><img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" ></a></li>
<li>baidu<a href="http://www.baidu.com"><img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" ></a></li>
<li>baidu<a href="http://www.baidu.com"><img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" ></a></li>
</ul>
</nav>
</aside>
<section>
<figure>
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
</figure>
<figcaption>baidu</figcaption>
<figure>
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
</figure>
<figcaption>baidu</figcaption>
<figure>
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
</figure>
<figcaption>baidu</figcaption>
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
</figure>
<figcaption>baidu</figcaption>
<figure>
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
</figure>
<figcaption>baidu</figcaption>
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
</figure>
<figcaption>baidu</figcaption>
<figure>
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
</figure>
<figcaption>baidu</figcaption>
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
</figure>
<figcaption>baidu</figcaption>
<figure>
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
</figure>
<figcaption>baidu</figcaption>
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
</figure>
<figcaption>baidu</figcaption>
<figure>
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
</figure>
<figcaption>baidu</figcaption>
<figure>
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
</figure>
<figcaption>baidu</figcaption>
<figure>
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
</figure>
<figcaption>baidu</figcaption>
</section>
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
</figure>
<figcaption>baidu</figcaption>
<figure>
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
</figure>
<figcaption>baidu</figcaption>
<figure>
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
<img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="50px">
</figure>
<figcaption>baidu</figcaption>
</section>
<footer>
<ul>
<li><a href="http://www.baidu.com"><img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="45px"></a></li>
<li><a href="http://www.baidu.com"><img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="45px"></a></li>
<li><a href="http://www.baidu.com"><img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="45px"></a></li>
<li><a href="http://www.baidu.com"><img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="45px"></a></li>
<ul>
<li><a href="http://www.baidu.com"><img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="45px"></a></li>
<li><a href="http://www.baidu.com"><img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="45px"></a></li>
<li><a href="http://www.baidu.com"><img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="45px"></a></li>
<li><a href="http://www.baidu.com"><img src="E:\xampp\htdocs\html\1\baidu1.png" alt="" width="45px"></a></li>
</ul>
</footer>
</body>
</html>
阅读全文
0 0
- 28第二部分综合实例
- Bash 实例,第二部分
- BASH 实例 第二部分
- 综合实例
- 搜索引擎第二讲 Compas+spring+hibernate的综合实例讲解和单独Compass实例讲解
- 基于IP多播的组讨论会实例第二部分
- Bash 实例,第二部分更多的 bash 基本编程
- Java Serializable(序列化)实例 第二部分
- Windows小游戏综合实例部分截图—《3D游戏程序设计入门(DirectX10.0)》
- UML综合实例
- ExtJs EditGridPanle 综合实例
- dom修改综合实例
- cookie的综合实例
- 13_JavaWeb综合实例
- java3d综合实例
- HTML表单综合实例
- jquery综合应用实例
- 浮动综合实例练习
- poj2823(滑动窗口,单调队列模板)
- 27figure和figcaption元素
- CNN经典模型整理Lenet,Alexnet,Googlenet,VGG,Deep Residual Learning,squeezenet
- NVIDIA Jetson TX1 系列开发教程之六:SSD安装与测试
- 实战限流(guava的RateLimiter)
- 28第二部分综合实例
- 不知道怎么标题写什么(2017-7)
- 表达式的前缀后缀问题
- 获取客户端IP地址
- Log4.properties 的故事
- js
- mysql查询分组显示数据结果之GROUP_CONCAT使用
- com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException
- 29form元素与input元素