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 Server 两条数据创建时自动关联

    begin ),(, ))) from workplan a join org_employee b on b.id = a.idowner , LEN(aa.sglzbbh))) glh from ...

  2. Python从零开始——循环语句

    一:Python循环语句知识概览 二:while循环 三:for遍历 四:循环控制

  3. Transformer模型---encoder

    一.简介 论文链接:<Attention is all you need> 由google团队在2017年发表于NIPS,Transformer 是一种新的.基于 attention 机制 ...

  4. tar命令-解压和压缩文件

    tar命令 可以用来压缩打包单文件.多个文件.单个目录.多个目录. Linux打包命令_tar tar命令可以用来压缩打包单文件.多个文件.单个目录.多个目录. 常用格式: 单个文件压缩打包 tar ...

  5. sikuli 搜索例子

    #coding:utf-8kw = input(u"请输入您要搜索的关键字:")#openAPP('‪C:\Users\ceshi\AppData\Local\Google\Chr ...

  6. <console>:14: error: not found: value spark import spark.implicits.

    启动 ./spark-shell 出现问题 启动 hadoop, 并创建,解决 hadoop fs -mkdir /directory 解决了

  7. NOIP 2004 合并果子

    洛谷P1090 https://www.luogu.org/problemnew/show/P1090 JDOJ 1270 题目描述 在一个果园里,多多已经将所有的果子打了下来,而且按果子的不同种类分 ...

  8. Python进阶-XI 常用模块之一：collections、time、random、os、sys

    简要介绍一下各种集合: 列表.元组.字典.集合(含frozenset).字符串.堆栈(如手枪弹夹:先进后出).队列(如马克沁机枪的弹夹:先进先出) 1.collections 1)queue 队列介绍 ...

  9. Spring事务异常rollback-only 笔记

    造成以上异常的原因情形: 在spring里面我们配置了事务的传播机制是REQUIRED,所以这两个事务最终会合并成一个事务.当a方法调用b方法时,程序中a方法中由于某某原因导致抛出异常(或者明确将该事 ...

  10. 阿里邮箱地址,smpt

    企业邮箱的POP3.SMTP.IMAP地址是什么? 企业邮箱POP.SMTP.IMAP地址列表如下: (阿里云邮箱web端通用访问地址:https://qiye.aliyun.com/),客户端推荐以 ...