HTML5+CSS3+JavaScript从入门到精通-07
原创HTML5+CSS3+JavaScript从入门到精通-07
原创
qiqi_fu
发布于 2021-12-03 14:43:37
发布于 2021-12-03 14:43:37
HTML5+CSS3+JavaScript从入门到精通
作者：王征，李晓波
第七章 HTML网页中的布局元素
案例
07-01 网页头部和底部的布局
<!DOCTYPE html>
<!--web07-01-->
<!--
header\footer都是body的子元素
div元素是块级元素，常作为其他html元素的容器；如果与css样式一起使用，可用于对大的内容块设置样式属性
-->
<html>
<head>
<meta charset="utf-8" />
<title>网页头部和底部的布局</title>
<!--body设置中，height是<body>节点下所有的height-->
<style type="text/css">
body {
height: 600px
}
header {
width: 100%;
height: 10%;
background: rgb(200,0,0);
}
#div1 {
width: 100%;
height: 82%;
background: rgb(230,230,230);
}
footer {
width: 100%;
height: 8%;
background: rgb(0,100,0);
}
</style>
</head>
<body>
<header>我是网页头部</header>
<div id="div1">我是主体</div>
<footer>我是页面底部</footer>
</body>
</html>07-02 利用article元素布局网页页面
<!DOCTYPE html>
<!--web07-02-->
<!--
article元素代表文档、页面、应用程序或网站中独立的、完整的、可以独自被外部引用的内容；
它通常有自己的标题、页脚等；
-->
<html>
<head>
<meta charset="utf-8" />
<title>利用article元素布局网页页面</title>
<style type="text/css">
body {
height: 600px;
}
header {
width: 100%;
height: 5%;
background: rgb(200,200,200);
}
footer {
width: 100%;
height: 5%;
background: rgb(150,240,200);
}
</style>
</head>
<body>
<article>
<header>
<h3 align="center">静夜思</h3>
</header>
<p align="center">
作者：李白<br />
床前明月光，疑是地上霜。<br />
举头望明月，低头思故乡。
</p>
<article> <!--article嵌套-->
<header>
<h4>网友A评论</h4>
</header>
<p>   blablabla...blablabla...</p>
<footer>
<p>评论时间：2019-6-8 15:36:12</p>
</footer>
<header>
<h4>网友B评论</h4>
</header>
<p>   Again bla bla bla... bla bla bla</p>
<footer>
<p>评论时间：2020-6-8 15:36:12</p>
</footer>
</article>
<footer>
<p>尾部：阅读：360      评论：128</p>
</footer>
</article>
</body>
</html>07-03 利用section元素布局网页页面
<!DOCTYPE html>
<!--web07-03-->
<!--
一个section元素通常由标题和内容组成，它的作用是对页面的内容分块或对文章分段；
但不能用于容器定义样式
-->
<html>
<head>
<meta charset="utf-8" />
<title>利用section元素布局网页页面</title>
</head>
<body>
<h3 align="center">利用section元素布局网页页面</h3>
<hr />
<section>
<h4 align="center">静夜思</h4>
<p align="center">
作者：李白<br />
床前明月光，疑是地上霜。<br />
举头望明月，低头思故乡。
</p>
</section>
<section>
<h4 align="center">咏柳</h4>
<p align="center">
作者：贺知章<br />
碧玉妆成一树高，万条垂下绿丝绦。<br />
不知细叶谁裁出，二月春风似剪刀。
</p>
</section>
</body>
</html>07-04 aside元素在网页布局的应用
<!DOCTYPE html>
<!--web07-04-->
<!--
aside通常表现为，侧边栏、说明、提示、引用、附加注释、广告等。
它与主内容有关，但又独立于主内容区。可拆分出来，而不会影响整体内容。
经典页面布局中，分为header,main,aside,footer
-->
<html>
<head>
<meta charset="utf-8" />
<title>aside元素在网页布局的应用</title>
<style type="text/css">
body {
height: 600px;
}
header {
width:100%;
height: 10%;
background: rgb(200,0,0);
}
section {
height: 80%;
}
main {
width: 80%;
height: 100%;
background: rgb(230,230,230);
float:left;
}
aside {
width: 20%;
height: 100%;
background: rgb(100,200,200);
float: left;
}
footer {
width: 100%;
height: 10%;
background: rgb(0,100,0);
float: left;
}
</style>
</head>
<body>
<header>header</header>
<section>
<main>main</main>
<aside>aside</aside>
</section>
<footer>footer</footer>
</body>
</html>
07-05 nav元素中的导航栏
<!DOCTYPE html>
<!--web07-05-->
<!--
nav元素可用作HTML网页导航的链接组。
-->
<html>
<head>
<meta charset="utf-8" />
<title>nav元素中的导航栏</title>
<style type="text/css">
nav {
width: 100%;
height: 60px;
background: rgb(100,200,200);
padding: 5px;
}
li {
display: inline;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="">首页</a></li>
<li><a href="">新闻</a></li>
<li><a href="">房产</a></li>
<li><a href="">家居</a></li>
<li><a href="">汽车</a></li>
<li><a href="">社区</a></li>
<li><a href="">理财</a></li>
</ul>
</nav>
</body>
</html>07-06 hgroup、address和time元素
<!DOCTYPE html>
<!--web07-06-->
<!--
hgroup:将标题和子标题分组，放置在header中；
address：定义作者信息，放置在footer中；
time:定义很多格式的日期时间，日期和时间，用T分隔。pubdate属性是可选标签，浏览器可方便识别出发布日期；
-->
<html>
<head>
<meta charset="utf-8" />
<title>hgroup、address和time元素</title>
<style type="text/css">
body {
height: 400px;
}
header {
width: 100%;
height: 20%;
background: rgb(200,200,200);
}
footer {
width: 100%;
height: 20%;
background: rgb(100,150,200);
}
</style>
</head>
<body>
<header>
<hgroup>
<h3 align="center">在那颗星子下</h3>
<h5 align="right">------中学时代的一件事</h5>
</hgroup>
</header>
<p>
     《在那颗星子下---中学时代的一件事》虚实结合，正标题把林老师喻为一颗璀璨的明星，永远留在“记忆的银河”中；副标题从时间上加以限制，具体指作者中学时代的一件事。
</p>
<footer>
<address>
作者：舒婷    联系方式：18562350306    QQ号：123456789
</address>
<p>
<time datetime="2019-07-08" pubdate="pubdate">文章发布于2019年7月08日</time>
</p>
</footer>
</body>
</html>07-07 figure和figcaption元素
<!DOCTYPE html>
<!--web07-07-->
<!--
figure:定义一块独立的内容，如图像、音频、视频、代码片段等。独立于上下文，若删除，不影响文档流；
figcaption:在figure中，定义内容的标题。
不是必选的，但最多只有一个figcaption,且是figure的第一个或者最后一个子元素。
-->
<html>
<head>
<meta charset="utf-8" />
<title>figure和figcaption元素</title>
</head>
<body>
<h3 align="center">我的爱好收藏</h3>
<hr />
<figure>
<figcaption>我喜欢的图像</figcaption>
<img src="b1.png" width="250" height="250"/>
<img src="g1.gif" width="250" height="250" />
</figure>
<figure>
<figcaption>我喜欢的动画</figcaption>
<img src="g1.gif" width="250" height="250" />
<img src="b1.png" width="250" height="250" />
</figure>
<figure>
<figcaption>我喜欢的mp3音乐</figcaption>
花海飞歌:<audio src="mp3mp4/CH002.MP3" controls></audio>
<br />
时间都去哪儿了：<audio src="mp3mp4/CH003.MP3" controls></audio>
</figure>
<figure>
<figcaption>我喜欢的flash动画</figcaption>
<embed src="mp3mp4/Win.swf" width="250" height="100" />
<embed src="mp3mp4/menu.swf" width="250" height="100" />
</figure>
</body>
</html>07-08 手机端的HTML网页
<!DOCTYPE html>
<!--web07-08-->
<!--
手机屏幕缩放设置：
maxinum-scale=1.0,mininum-scale=1.0, -- 最大最小缩放比例为1.0，即不允许缩放
user-scalable=0, -- 用户不可以手动缩放
width=device-width, -- 宽度为客户端屏幕宽度
initial-scala=1.0 -- 文字和图像的初始比例为1.0
overflow: auto; section样式中，内容在footer元素下，需添加这个，即内容超出元素容器时，会自动添加滚动条。
body{margin: 0px;} -- 删除网页四周的空白区域
h3 {
display: inline; -- 按内联模式显示，他会和周围的元素显示在一行
padding: 6px;
color: blue;
}
<figure id="my1"> -- aside实现了锚链接，所以在figure中要加上id
-->
<html>
<head>
<meta charset="utf-8" />
<title>手机端的HTML网页</title>
<meta name="viewport" content="maxinum-scale=1.0,mininum-scale=1.0,user-scalable=0,width=device-width,initial-scala=1.0" />
<style type="text/css">
header {
width: 100%;
height: 50px;
background: rgb(200,150, 0);
}
aside {
width: 20%;
height: 500px;
background: rgb(100,150, 200);
float: left;
}
section {
width: 80%;
height: 500px;
background: rgb(100,200,150);
float: left;
overflow: auto;
}
footer {
width: 100%;
height: 50px;
background: rgb(200,200,200);
float: left;
}
body {
margin: 0px;
}
h3 {
display: inline;
padding: 6px;
color: blue;
}
</style>
</head>
<body>
<header>
<img src="b1.png" width="60px" height="40px" />
<h3>我的收藏</h3>
</header>
<aside>
<p align="center">
<a href="#my1">图像</a><br />
<a href="#my2">动画</a><br />
<a href="#my3">音乐</a><br />
</p>
</aside>
<section>
<figure id="my1">
<figcaption>我喜欢的图像</figcaption>
<img src="b1.png" width="80%" height="100" />
<br /><br />
<img src="g1.gif" width="80%" height="100" />
</figure>
<figure id="my2">
<figcaption>我喜欢的动画</figcaption>
<img src="g1.gif" width="80%" height="100" />
<br /><br />
<img src="b1.png" width="80%" height="100" />
</figure>
<figure id="my3">
<figcaption>我喜欢的MP3音乐</figcaption>
花海飞歌：<audio src="mp3mp4/CH002.MP3" controls></audio>
<br /><br />
时间都去哪儿了：<audio src="mp3mp4/CH009.MP3" controls></audio>
</figure>
</section>
<footer>
<address>
网页设计：新晋有限公司    QQ:123456789
</address>
<time datetime="2019-07-18" pubdate="pubdate">网页发布于2019年7月18日</time>
</footer>
</body>
</html>
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务（Tencent Kubernetes Engine, TKE）基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务，覆盖 Serverless、边缘计算、分布式云等多种业务部署场景，业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者，主导开源项目Crane，全面助力客户实现资源优化、成本控制。