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. composer基本操作详解

    原文转自微信公众号:qq1005349393 Composer介绍 Composer 是 PHP 的一个包依赖管理工具.我们可以在项目中声明所依赖的外部工具库,Composer 会帮你安装这些依赖的库 ...

  2. pytest文档30-功能用例与自动化用例完美对接(allure)

    前言 做自动化做久了,经常会思考一个问题,到底别人是怎么做的自动化,跟自己的有啥不一样,看过不少书和资料,都是停留在demo的层面. 真正把自动化做的好的大牛又不屑于分享自己的劳动成果,所以大部分情况 ...

  3. VC 静态库与动态库(一)介绍

    定义: 静态库与动态库都属于库,库从本质上来说就是种代码重用的方式. 把需要重复使用的公共代码抽离出来,生成库文件,外部程序只需包含库文件,调用相关接口即可 静态库与动态库区别: 静态库:需要库的.h ...

  4. JDOJ3008 圆盘染色

    JDOJ3008 圆盘染色 https://neooj.com/oldoj/problem.php?id=3008 题目描述 将一个圆盘分为N (1 <= N <= 105)个扇形,每个扇 ...

  5. hive数据库从文件插入数据得到结果NULL？

    今天第一次接触hive这个东东,跟着教程走,当把本地文件的数据装载到新建的hive的表中时,得到的结果是NULL,如图: 也不知道为什么,初次接触,对它的这个构造还不是很熟悉,看一下建表语句: 解决: ...

  6. 学习：反调试之ZwQueryInformationProcess

    SetUnhandledExceptionFilter触发条件:1.当程序有异常,且没相应的处理 2.没有人进行反调试,满足这两个条件的时候,就会其中传输的参数(实则就是一个异常处理函数) 来进行处理 ...

  7. Tableau 基础

    1.Tableau产品介绍 tableau desktop:桌面端分析工具,分个人版和专业版,可连接几乎所有数据源,速度快 tableau server:一款商业智能应用程序,用于发布和管理table ...

  8. MySQL中连接超时自动断开的解决方案

    前言: MySQL数据库一般默认的连接超时时间为3600s(1小时),但是在进行大规模的线程事务操作时,一个连接会一直等待执行,这时候如果数据库的超时时间设置的过短,就可能会出现Mysql数据连接自动 ...

  9. ASP.NET Core 进程内(InProcess)托管

    ASP.NET Core 进程内(InProcess)托管 在 ASP.NET Core 中的进程内(InProcess)托管模型 什么是 Kestrel 服务器 当一个 ASP.NET Core 应 ...

  10. 简析平衡树（四）——FHQ Treap

    前言 好久没码过平衡树了! 这次在闪指导的指导下学会了\(FHQ\ Treap\),一方面是因为听说它可以可持久化,另一方面则是因为听说它是真的好写. 简介 \(FHQ\ Treap\),又称作非旋\ ...