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页面基础元素

H5页面结构元素示例

container {

最新文章

热门文章