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. Python 安装cx_Oracle模块

    1.Python安装cx_Oracle模块需要安装Oracle,并在环境变量中添加Oracle的路径. 2.没有安装Oracle的需要下载一个oci.dll的文件,并把文件的路径添加到path中. 如 ...

  2. 06webpack-- html-webpack-plugin的2个作用

    <!-- 15 html-webpack-plugin的2个作用 下载 cnpm i html-webpack-plugin -D 作用在==>内存中生成页面 在webpack中 导入在内 ...

  3. IDEA优秀插件分享之---Mybatis Log Plugin

    小伙伴们在使用mybatis的时候有时候会出现一些sql异常,这个时候就需要对执行的sql语句进行检查.然而mybatis一般使用log4j打印执行的sql语句,类型下面这种的: 这个时候如果sql语 ...

  4. springboot+springcloud微服务项目全套资料（笔记+源码+代码）

    最近好几天没有写博客了,由于时间的太忙了,项目要做.各种资格证要考试,实在没有时间写了,今天正好赶上有闲暇的一刻,应许多的爱好者的要求发一份微服务项目的资料,此资料十分完整,且是最新的.希望各位读者能 ...

  5. python-新建文件夹

    import tensorflow as tf import os categories = ['folder1', 'folder2'] for folderName in categories: ...

  6. zz开源 MNN：淘宝在移动 AI 上的实践

    开源 MNN:淘宝在移动 AI 上的实践   陈以鎏(离青) 阅读数:40612019 年 6 月 28 日   随着深度学习的快速发展和端侧设备算力的不断提升,原本在云端执行的推理预测工作正在部分迁 ...

  7. pagehelper超过页数仍然可以查出数据

    spring boot中pageHelper的使用 pom文件中添加 <!--pagehelper --> <dependency> <groupId>com.gi ...

  8. 【day04】css

    一.CSS2.0[Cascading Style Sheets]层叠样式表  1.什么是CSS:修饰网页元素(标记)外观(比如给文字加颜色,大小,字体)的,W3C规定尽量用CSS样式替代XHTML属性 ...

  9. NOI2016优秀的拆分

    一种想法是枚举分割位置, 然后考虑前面部分有多少种可行的AA拆分方式, 后面部分有多少种可行的BB拆分方式, 然后乘法原理即可 那么问题是如何快速求出合法方案 解法是首先枚举长度len, 然后将序列分 ...

  10. WIMBuilder2软件包及精简方案,请把补丁包放到指定位置

    WIMBuilder2软件包及精简方案请把补丁包放到指定位置WimBuilder2-20190901\Projects\WIN10XPE\目录下面精简方案测试适用于LTSB2019.17763.316 ...