<!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. 使用winsw部署spring boot jar 项目

    参考:用winsw让任何Windows程序都能运行为服务 简介在linux下部署springboot项目是一件很简单的事,直接后台运行就行了,最多写个shell脚本开机自启就行了.我们最近做的项目需要 ...

  2. C#项目”XXXXX”针对的是”.NETFramework,Version=v4.7.1”但此计算机没有安装它

    遇到这样一个问题:C#项目”XXXXX”针对的是”.NETFramework,Version=v4.7.1”但此计算机没有安装它 就是我在打开别人的项目,发现别人的项目.Net Framework的版 ...

  3. 织梦移动版页面点击下一篇获取不到id

    1.首先找到网站目录下面的/include/arc.archives.class.php文件 2.找到837行的如下内容 if ( defined('DEDEMOB') ) { $mlink = 'v ...

  4. Nginx 配置参数详解

    #定义Nginx运行的用户和用户组 user www www;   #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8;   #全局错误日志定义类型,[ debu ...

  5. 24访问者模式Visitor

    一.什么是访问者模式 Visitor模式也叫访问者模式,是行为模式之一 ,它分离对象的数据和行为,使用Visitor模式, 可以不修改已有类的情况下,增加新的操作. 二.访问者模式的应用示例 比如有一 ...

  6. VS每次F5都重新编译代码，即使没有任何修改

    遇到一个奇怪现象,不知道怎么设置了,突然工程的Release模式下,F5每次都要重新编译代码,而且是全部代码都重新编译 而Debug模式没问题 重启VS,重启机器,清理工程重新生成工程都无法解决 最后 ...

  7. Eclipse 左侧树形展示字体调节

    eclipse中项目导航字体大小由配置文件中的设置决定 1.配置文件:找到eclipse安装位置(或解压路径): eclipse\plugins\org.eclipse.ui.themes_1.2.0 ...

  8. STC15单片机最小系统DIY

    DIY计划简介 STC15F2K60S2简介: STC-Y5高速内核,工作频率可配置为1T(sysclk=mclk) 2K RAM(256字节 idata + 1792字节 xdata) + 60K ...

  9. java基础编程

    java的类和常用编程模式还是要多练习,多手写java代码 return new String(filecontent, encoding); 看懂这个意思了吗?第一次见这个构造函数吧,而String ...

  10. java开学考试有感以及源码

    一.感想 Java开学测试有感 九月二十号,王老师给我们上的第一节java课,测试. 说实话,不能说是十分有自信,但还好,直到看见了开学测试的题目,之前因为已经做过了王老师发的16级的题目,所以当时还 ...