html5 p1练习1，移动页面，标准标签布局
<!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，移动页面，标准标签布局的更多相关文章
- Html页面head标签元素的意义和应用场景
相信在html5之前,很少人会关注html页面上head里标签元素的定义和应用场景,可能记得住的只有"title"."keyword"和"descri ...
- HTML5/CSS3 第三章页面布局
页面布局 1 页面组成 2 布局相关的标签 <div></div> 定义文档中的分区或节 <span></span> 这是一个行内元素,没有任何意义 & ...
- TODO：Laravel 使用blade标签布局页面
TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...
- JSP 标准标签库(JSTL)
JSP 标准标签库(JSTL) JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能. JSTL支持通用的.结构化的任务,比如迭代,条件判断,XML文档操作,国际化标签, ...
- JSP-10-JSTL标准标签库
JSTL (jsp 标准标签库) 包含用于编写和开发JSP页面的一组标准标签,它可为用户提供一个无脚本的环境. JSTL 提供了4个主要的标签库: 核心标签库.国际化(I18N)与格式化标签库.XML ...
- jsp标准标签库
抄袭自:http://www.cnblogs.com/hongten/archive/2011/05/14/2046005.html JSP标准标签库 Pass by xkk ,and aut ...
- JSTL的全称：JSP Standard Tag Library, jsp 标准标签库
JSTL的全称:JSP Standard Tag Library, jsp 标准标签库 JSTL的作用 提供给Java web开发人员一个标准通过的标签函数库和EL来取代传统直接在页面上嵌入j ...
- 使用HTML5的JS选择器操作页面中的元素
文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...
- Web---JSTL(Java标准标签库)-Core核心标签库、I18N国际化、函数库
前面为JSTL中的常用EL函数,后面的为具体演示实例! JSTL简介: JSTL(Java Standard Tag Library) –Java标准标签库. SUN公司制定的一套标准标签库的规范. ...
随机推荐
- MySQL yum 在线与本地包方式安装
以下实践操作是在 liux-centos7 上安装配置 先检测是否安装mysql,然后在拆卸mysql # 检测[root@localhost ~]# yum list installed | gr ...
- node-sass 安装失败 Failed at the node-sass@4.9.2 postinstall script的解决
控制台运行npm install时报错,报错信息如下: npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! node-sass@4.9.2 postins ...
- Linux 访问权限
[TOC] Linux访问权限 Linux用户和用户组 查看当前用户用命令who am i 用命令id username可以显示指定用户的用户id.用户组id(GID).和所属附加群组的信息. 所有的 ...
- android控件RecyclerView中，如何显示自定义分割线以及最后一项去除分割线
在控件RecyclerView中,分割线DividerItemDecoration类的使用经常见,如果是使用自带的分割线,只需要这样写即可 RecyclerView mRecyclerView; mR ...
- PHP 合并有序数组
<?php //两个有序数组合并 $arr1 = [1,5,7,44,66,89]; $arr2 = [4,5,6,88,99,105,111]; $arr3 = []; $l1 = count ...
- 树pao(雾)
今天难得睡醒了,大概睡了13个小时,打算今晚把树剖学了. 嘿嘿嘿雀魂真好玩,这篇文章咕了 有学上了,找到了水平远高于我的队友,好开心的说,,, 卡空间感觉治不了了... 板子题是洛谷P3384 实在不 ...
- Educational Codeforces Round 50
1036A - Function Height 20180907 \(ans=\left \lceil \frac{k}{n} \right \rceil\) #include<bits/ ...
- Educational Codeforces Round 1
598A - Tricky Sum 20171103$$ans=\frac{n(n+1)}{2} - 2\sum_{k=0}^{\left \lfloor \log_2 n \right \rf ...
- 微信小程序模拟点击出现问题解决方法
move tools=>sensors=>Touch:Device-based 如果不行就换成Touch:force enabled,这俩个选择反复更换试试
- 20.react库 入门
vue插件: 使用方式:Vue.use(插件名称); {}/function 1.对象 export default { install(Vue,options){ } } 2.函数 export d ...