<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合实例-移动端页面开发</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: 0}
    header{width: 100%;height: 50px;background:#FFCCCC}
    h4{display:inline;}
    aside{width: 20%;height: 540px;background:#CCCCCC;float: left;}
    section{width: 80%;height: 540px;background:#f0f0f0;float: left;overflow: auto;}
    footer{width: 100%;height: 50px;background:#FFCCCC;clear: left;}
    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>
    <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>    
        </ul>
    </nav>
</footer>
</body>
</html>

html5-移动端布局模板的更多相关文章

  1. html5 移动端单页面布局

    序     移动端的web网页使用的是响应式设计,但一般我们看到的网站页面都是跳转刷新得到的,比如通过点击一个menu后进入到另一个页面 今天来说下是移动端的单页面的布局.单页面就是一切操作和布局都是 ...

  2. 第九十一节，html5+css3pc端固定布局，完成首页

    html5+css3pc端固定布局,完成首页 此时我们的首页就完成了 首页效果 其他页面我就不做了,原理相同,做其他页面时将头尾css分离调用即可 大纲算法 我们看看大纲算法比较清晰,说明符合规则 h ...

  3. 第九十节，html5+css3pc端固定布局，底部区域，说明区域，版权区域

    html5+css3pc端固定布局,底部区域,说明区域,版权区域 完成: HTML代码: <!--尾部--> <footer class="wei-bu"> ...

  4. 第八十九节，html5+css3pc端固定布局，热门旅游取，标题介绍区，旅游项目区

    html5+css3pc端固定布局,热门旅游取,标题介绍区,旅游项目区 样式: html代码: <!--主体--> <section class="zhu-ti" ...

  5. 第八十八节，html5+css3pc端固定布局，搜索区，插入大图，搜索框

    html5+css3pc端固定布局,搜索区,插入大图,搜索框 设置一个div作为搜索区域 1.宽度为百分之百 2.最小宽度为1263,因为要考虑到手机,等小屏幕缩小后宽度会自适应,导致破坏布局,将最小 ...

  6. 第八十七节，html5+css3pc端固定布局，大纲算法，section和div，结构分析

    html5+css3pc端固定布局,大纲算法,section和div,结构分析 一．大纲算法 在HTML5中有一个很重要的概念,叫做HTML5 大纲算法(HTML5Outliner),它的用途是为用户 ...

  7. 第八十六节，html5+css3pc端固定布局,网站结构,CSS选择器,完成导航

    html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...

  8. 移动端REM布局模板(阿里高清方案)

    移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...

  9. Html5移动端页面自适应布局详解(阿里rem布局)

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport  ...

随机推荐

  1. 内部排序->插入排序->其它插入排序->折半插入排序

    文字描述 和直接插入排序比较,只是把“查找”操作利用“折半查找”来实现,由此进行的插入排序叫做折半插入排序. 示意图 略 算法分析 和直接插入排序比,减少了比较次数,但是移动次数没有变,所以折半插入排 ...

  2. 配置ASM以及创建恢复目录

    本次配置ASM沿用了搭建RAC的环境配置,系统选用CENTOS6.8 首先本地配置YUM,安装GRID集群件所需要的RPM包 [root@rac01 Packages]# cd /etc/yum.re ...

  3. ADO多线程数据库总结

    ADO多线程数据库查询通常会出现以下问题: 1.CoInitialize 没有调用(CoInitialize was not called):所以,在使用任何dbGo对象前,必须手 调用CoIniti ...

  4. 利用Python进行自然语言处理（笔记）第一章

    一.标识符 一个我们想要放在一组对待的字符序列--如:”hairy“.”his“或者”:“: 二.词类型 一个词在一个文本中独一无二的出现形式或拼写,也就是说这个词在词汇表中是唯一的.如果我们计数的项 ...

  5. 【PyQt5-Qt Designer】窗口操作

    1.窗口最上栏最大化 最小化 关闭按钮显示 #设置最小化与最大化按钮 self.setWindowFlags(QtCore.Qt.Window) 将其添加到Ui_***  布局代码中即可 2.窗口知识 ...

  6. LeetCode-714.Best Time to Buy and Sell Stock with Transaction Fee

    Your are given an array of integers prices, for which the i-th element is the price of a given stock ...

  7. 帝国cms文章页调用当前文章URL如何操作?

    前面我们讨论过dedecms文章页调用地址(当前文章URL)如何操作,作为同台竞技的帝国cms也能在文章页调用当前文章URL吗?答案是肯定的!那就随ytkah一起来探索一下吧 帝国cms模板是在后台直 ...

  8. centos下搭建sockets5代理

    #安装依赖及ss5 yum -y install gcc openldap-devel pam-devel openssl-devel wget https://nchc.dl.sourceforge ...

  9. 【BP算法】

    一.符号定义:  al: 第l层的输出值(经过了激活函数).在DNN中是向量,在CNN中是张量. σ:激活函数的表达形式. zl: 第l层的输出值(未经过激活函数).在DNN中是向量,在CNN中是张量 ...

  10. C语言ini格式配置文件的读写

    依赖的类 /*1 utils.h *# A variety of utility functions. *# *# Some of the functions are duplicates of we ...