<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p1</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: 0px;}
h4{display: inline;}
header{width: 100%;height: 50px;background: #AEFEEE;}
aside{width: 20%;height: 540px;background: #708090;float: left;}
section{width: 80%;height: 540px;background: #D88FD8;float: left;overflow: auto;}
footer{width: 100%;height: 50px;background: green;clear: left;}
figure{padding: 0px;}
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>
</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>
    <li><a href=""><img src="imges/vip.png" alt="" width="45"></a></li>
    <li><a href=""><img src="imges/vip.png" alt="" width="45"></a></li>
</ul>
</nav>
</footer>
</body>
</html>

html5 p1练习1，移动页面，标准标签布局的更多相关文章

  1. Html页面head标签元素的意义和应用场景

    相信在html5之前,很少人会关注html页面上head里标签元素的定义和应用场景,可能记得住的只有"title"."keyword"和"descri ...

  2. HTML5/CSS3 第三章页面布局

    页面布局 1 页面组成 2 布局相关的标签 <div></div> 定义文档中的分区或节 <span></span> 这是一个行内元素,没有任何意义 & ...

  3. TODO：Laravel 使用blade标签布局页面

    TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...

  4. JSP 标准标签库(JSTL)

    JSP 标准标签库(JSTL) JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能. JSTL支持通用的.结构化的任务,比如迭代,条件判断,XML文档操作,国际化标签, ...

  5. JSP-10-JSTL标准标签库

    JSTL (jsp 标准标签库) 包含用于编写和开发JSP页面的一组标准标签,它可为用户提供一个无脚本的环境. JSTL 提供了4个主要的标签库: 核心标签库.国际化(I18N)与格式化标签库.XML ...

  6. jsp标准标签库

    抄袭自:http://www.cnblogs.com/hongten/archive/2011/05/14/2046005.html JSP标准标签库     Pass by xkk ,and aut ...

  7. JSTL的全称：JSP Standard Tag Library, jsp 标准标签库

    JSTL的全称:JSP Standard Tag Library, jsp 标准标签库 JSTL的作用     提供给Java web开发人员一个标准通过的标签函数库和EL来取代传统直接在页面上嵌入j ...

  8. 使用HTML5的JS选择器操作页面中的元素

    文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...

  9. Web---JSTL(Java标准标签库)-Core核心标签库、I18N国际化、函数库

    前面为JSTL中的常用EL函数,后面的为具体演示实例! JSTL简介: JSTL(Java Standard Tag Library) –Java标准标签库. SUN公司制定的一套标准标签库的规范. ...

随机推荐

  1. weblogic 整合cxf 报错：cannot create a secure XmlInputFactory

    weblogic 整合cxf 报错:cannot create a secure XmlInputFactory ================================ ©Copyright ...

  2. 11.7luffycity项目(2)

    2018-11-7 18:53:17 等把项目做完再发完整代码和github连接 这里只整理笔记和新学的知识点! 1.url的两种写法 urls.py from django.conf.urls im ...

  3. JavaScript Promise：去而复返

    原文:http://www.html5rocks.com/en/tutorials/es6/promises/ 作者:Jake Archibald 翻译:Amio 女士们先生们,请准备好迎接 Web ...

  4. laravel的csrf token 的了解及使用

    之前在项目中因为没有弄清楚csrf token的使用,导致发请求的话,一直请求失败,今天就一起来看一下csrf的一些东西. 1.Cross-site request forgery 跨站请求伪造,也被 ...

  5. mac 初次配置apache，及mac下安装mysql

    先打开apache,在浏览器上输入  localhost     回车后会如果屏幕上显示:It works! 如下图: 这说明你的apache已开启 mac 下apache配置(mac自带apache ...

  6. Java基础&面向对象（二）

    (七)函数 1.数的定义:具有特定功能的一段小程序,也称为方法: 2.函数的特点: 3.函数的应用:结果.是否需要未知内容参与运算: 4.函数的重载:在同一个类中,允许存在一个以上的同名函数,只要它们 ...

  7. 主流框架的搭建（VUE，React）

    vue脚手架:cnpm install vue vue-cli -gvue init webpack/webpack-simple shuaige(新建文件夹的名字)cd shuaigecnpm in ...

  8. GitLab上传项目到新的分支

    多人协同开发,GitLab上的group仓库里的master分支作为开发分支(最终从dev提交的代码),dev分支作为每个人的代码测试后合并的分支,每个人需要定期merge request自己的分支到 ...

  9. vue的数据双向绑定和ref获取dom节点

    vue是一个MVVM的框架 业务逻辑代码即js部分是model部分, html是view部分. 当model改变的时候,view也会改变 view 改变是,model也会改变 <template ...

  10. particles.js中文开发手册

    2017年6月17日01:06:28 因为自己需要做产品,所以一个好的UI界面也是很重要的,发现这种散射的原子颗粒特效还不错,就弄了一个 官方github:https://github.com/Vin ...