H5页面结构元素示例

<!DOCTYPE html>

<html lang="zh">

<head>

	<meta charset="UTF-8">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<meta http-equiv="X-UA-Compatible" content="ie=edge">

	<link rel="stylesheet" href="style.css">

	<title>h5结构</title>

</head>

<body>

	<header>

		<h1>网页标题</h1>

		<h2>次级标题</h2>

		<h4>提示信息</h4>

	</header>

	<div id="container">

		<nav>

			<h3>导航</h3>

			<a href="#">链接1</a>

			<a href="#">链接2</a>

			<a href="#">链接3</a>

		</nav>

		<section>

			<article>

				<header>

					<h1>文章标题</h1>

				</header>

				<p>文章内容。。。</p>

				<footer>

					<h2>文章注脚</h2>

				</footer>

			</article>

		</section>

		<aside>

			<h3>相关内容</h3>

			<p>相关辅助信息或者服务...</p>

		</aside>

		<footer>

			<h2>页脚</h2>

		</footer>

	</div>

</body>

</html>
style.css
```
body {
background-color: #CCCCCC;
font-family: Geneva, Arial, Helvetica, sans-serif;
margin: 0px auto;
max-width: 900px;
border: solid;
border-color: #FFFFFF;
}

header {

background-color: #F47D31;

display: block;

color: #FFFFFF;

text-align: center;

}

header h2 {

margin: 0px;

color: #FFFFFF;

}

h1 {

font-size: 72px;

margin: 0px;

}

h2 {

font-size: 24px;

margin: 0px;

text-align: center;

color: #F47D31;

}

h3 {

font-size: 18px;

margin: 0px;

text-align: center;

color: #F47D31;

}

h4 {

color: #F47D31;

background-color: #fff;

-webkit-box-shadow: 2px 2px 20px #888;

-webkit-transform: rotate(-45deg);

-moz-box-shadow: 2px 2px 20px #888;

-moz-transform: rotate(-45deg);

position: absolute;

padding: 0px 150px;

top: 50px;

left: -120px;

text-align: center;

}

nav {

display: block;

width: 25%;

float: left;

}

nav a:link,

nav a:visited {

display: block;

border-bottom: 3px solid #fff;

padding: 10px;

text-decoration: none;

font-weight: bold;

margin: 5px;

}

nav a:hover {

color: white;

background-color: #F47D31;

}

nav h3 {

margin: 15px;

color: white;

}

container {

background-color: #888;

}

section {

display: block;

width: 50%;

float: left;

}

article {

background-color: #eee;

display: block;

margin: 10px;

padding: 10px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

-webkit-box-shadow: 2px 2px 20px #888;

-webkit-transform: rotate(-10deg);

-moz-box-shadow: 2px 2px 20px #888;

-moz-transform: rotate(-10deg);

}

article header {

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

padding: 5px;

}

article footer {

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

padding: 5px;

}

article h1 {

font-size: 18px;

}

aside {

display: block;

width: 25%;

float: left;

}

aside h3 {

margin: 15px;

color: white;

}

aside p {

margin: 15px;

color: white;

font-weight: bold;

font-style: italic;

}

footer {

clear: both;

display: block;

background-color: #F47D31;

color: #FFFFFF;

text-align: center;

padding: 15px;

}

footer h2 {

font-size: 14px;

color: white;

}

/* links */

a {

color: #F47D31;

}

a:hover {

text-decoration: underline;

}

![](https://img2018.cnblogs.com/blog/740100/201904/740100-20190427221924891-1541389230.jpg)

H5页面基础元素的更多相关文章

  1. H5页面 绝对定位元素被 软键盘弹出时顶起

    H5页面 绝对定位元素被 软键盘弹出时顶起 在h5页面开发的过程中,我们可能会遇到下面这个问题,当页面中有输入框的时候,系统自带的软盘会把按钮挤出原来的位置.那么我们该怎么解决呢?下面列出一下的方法: ...

  2. APP端有原生态的控件，但嵌入了H5页面，怎么定位到H5页面的元素

    appium 通常有很多种定位元素方法,例如xpath,driver.find_element_by_accessibility_id等,安卓sdk自带的uiautomatorviewer但是对于H5 ...

  3. 本地调试H5页面

    摘要 详细讲述微信H5页面调试(安装在安卓或iOS手机上的),钉钉内H5页面的调试,QQ.微博以及各浏览器上H5页面的调试方法 背景 大学毕业快要一年了,用leader的话说我也是有一年开发经验的前端 ...

  4. Hybrid APP基础篇(三)->Hybrid APP之Native和H5页面交互原理

    本文已经不维护,新地址: http://www.cnblogs.com/dailc/p/8097598.html 说明 Hybrid模式原生和H5交互原理 目录 前言 参考来源 前置技术要求 楔子 A ...

  5. Appium Inspector定位Webview/H5页面元素

    目录 操作步骤 Python操作该混合App代码 Appium在操作混合App或Android App的H5页面时, 常常需要定位H5页面中的元素, 传统方式是 翻墙 + 使用Chrome://ins ...

  6. C#开发微信门户及应用(44)--微信H5页面开发的经验总结

    在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...

  7. H5页面适配所有iPhone和安卓机型的六个技巧

    http://www.th7.cn/web/html-css/201605/166006.shtml http://www.th7.cn/web/html-css/201601/153127.shtm ...

  8. 关于H5页面在iPhoneX适配

    ​1.  iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...

  9. 基于Jquery WeUI的微信开发H5页面控件的经验总结（1）

    在微信开发H5页面的时候,往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发,由于本人喜欢在Asp.net的Web界面上使用JQuery,因此比较倾向于使用 jQuery WeUI ...

随机推荐

  1. 探究分析---利用sql批量更新部分时间的同比数据

    问题:如何将social_kol_tmp表 中的字段cost_YA中日期为201901-201909中的值替换为相同brand和pltform对应18年月份的col_cost字段的数据,其他日期的co ...

  2. 3-10 Pandas 常用操作

      1.构造数据 In [1]: import pandas as pd data=pd.DataFrame({'group':['a','a','a','b','b','b','c','c','c' ...

  3. 2016 ACM-ICPC Asia Regional Dalian Online HDU 5875 Function（线段树）

    题意 求区间l~r的a[l]%a[l+1]%--%a[r]的值 思路 因为取模的变化是很快的,所以线段树查找区间内第一个小于等于a[l]的数的位置,更新ans后继续查找即可. 注意查询满足某种条件的位 ...

  4. @RequestMapping和@GetMapping和PostMapping

    简介 - @GetMapping是一个组合注解,是@RequestMapping(method = RequestMethod.GET)的缩写.该注解将HTTP Get 映射到 特定的处理方法上. - ...

  5. Python 函数小程序初解

    目录 作业 ==程序代码自上往下运行,建议自上而下的完成下列任务== 作业 文件a.txt内容:每一行内容分别为商品名字,价钱,个数,求出本次购物花费的总钱数 sum = 0 f = open('a. ...

  6. 201871010124-王生涛《面向对象程序设计（java）》第四周学习总结

    项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>http ...

  7. springboot整合OSS实现文件上传

    OSS 阿里云对象存储服务(Object Storage Service,简称 OSS),是阿里云提供的海量.安全.低成本.高可靠的云存储服务.OSS可用于图片.音视频.日志等海量文件的存储.各种终端 ...

  8. AI AND THE BOTTOM LINE: 15 EXAMPLES OF ARTIFICIAL INTELLIGENCE IN FINANCE

    https://builtin.com/artificial-intelligence/ai-finance-banking-applications-companies f there's one ...

  9. Mybatis ResultMap多表映射DTO

    解决问题:n+1问题,之前我的习惯是拿到单表里面的数据,然后遍历,再拿到一个与其他表对应的逻辑上的外键,然后for循环去查找其他表的数据(原因是数据量小,没有在意,还有主要是不想建外键,你知道的,外键 ...

  10. python的可变类型和不可变类型

    Python有六种数据类型:数字类型.字符串类型.列表类型.元组类型.字典类型和集合类型 其中不可变类型包括三种:数字类型.字符串类型和元组类型 剩余三种为可变类型:列表类型.字典类型和集合类型 可变 ...