HTML5系列代码：section标签定义文档中的节（section、区段）

section标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。 HTML 4.01 与 HTML
5 之间的差异
section标签是 HTML 5 中的新标签。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>北国风光</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css" media="screen, projection">
body {line-height:1;color:#333;
}
ol, ul, h1 {margin:0;padding:0;list-style:none;
}
a {color: #933;text-decoration: none;
}
a:hover {color: #DF3030;
}
nav h1 {text-align:center;
}
nav h1 img {width:90%;
}
nav ul {border-top: 1px solid #999;
}
nav li {text-align: center;border-bottom:1px solid #ccc;line-height:60px;
}
nav li a {display:block;
}
nav li a:hover {background-color:#e4e4e4;
}
section {font-size:14px;font-family:"宋体";
}
section h2 {font-size:18px;text-align:center;font-family:"黑体";font-weight:lighter;
}
section span {padding:0 10px;background-color:#FFF;
}section li {text-align:center;
}
section li img {width:98%;border-radius:5px;
}
section article {border-top: 1px solid #999;margin-top:20px;padding-bottom:20px;
}
.clear {clear:both;line-height:5px;
}
footer {clear:both;border-top: 1px solid #999;font-size: 12px;text-align: center;padding: 10px 0;font-family:Arial, Helvetica, sans-serif;color:#666;
}@media (max-width: 400px) {nav li {float:left;width:32%;margin-left:1%;
}
section {clear:both;padding:20px 0;
}
section li {margin:10px 2px;
}section li span {display:block;text-align:center;font-size:12px;
}
}@media (min-width:400px) and (max-width: 600px) {nav li {float:left;width:32%;margin-left:1%;
}section {clear:both;
padding:20px 0;
}
section li {float:left;margin:10px 2px;width:48%;
}section li span {display:block;text-align:center;font-size:12px;
}
}
@media (min-width:600px) and (max-width:900px) {nav {float:left;width:35%;
}section {float:left;width: 65%;padding:20px 0;
}
section li {float:left;margin:10px 2px;width:48%;
}section li span {display:block;text-align:center;font-size:12px;
}
}
@media (min-width: 900px) {nav h1 {float:left;width:35%;height:200px;
}nav ul {float:left;width: 65%;
}nav li {float:left;width:32%;margin-left:1%;
}
section {float:left;width: 65%;padding:20px 0;
}
section li {float:left;margin:10px 2px;width:32%;
}section li span {display:block;text-align:center;font-size:12px;
}
}
</style>
</head>
<body>
<nav><h1 id="logo"><a href="#"><img src="data:images/logo.jpg" alt="北国风光"></a></h1><ul><li><a href="#">名词来历</a></li><li><a href="#">北国雾凇</a></li><li><a href="#">风光图片集</a></li></ul>
</nav>
<section><article><h2 style="margin-top:-15px;"><span>风光图片集</span></h2><ol><li> <a href="#"> <img src="data:images/Scene1.jpg" alt=""> <span>图片1</span> </a> </li><li> <a href="#"> <img src="data:images/Scene2.jpg" alt=""> <span>图片2</span> </a> </li><li> <a href="#"> <img src="data:images/Scene3.jpg" alt=""> <span>图片3</span> </a> </li><li> <a href="#"> <img src="data:images/Scene4.jpg" alt=""> <span>图片4</span> </a> </li><li> <a href="#"> <img src="data:images/Scene5.jpg" alt=""> <span>图片5</span> </a> </li><li> <a href="#"> <img src="data:images/Scene6.jpg" alt=""> <span>图片6</span> </a> </li></ol><div class="clear"></div></article><footer> 北国风光&copy; 2011</footer>
</section>
</body>
</html>

HTML5系列代码：section标签定义文档中的节（section、区段）相关推荐

html语言中,定义文档中一个正在打开的链接的颜色的代码是,2017微软认证考试精选练习（附答案）...
2017微软认证考试精选练习(附答案) 1.如果要使图像在缩放时不失真,在图像显示原始大小时,按下( )键,拖动图像右下方的控制点,可以按比例调整图像大小 B A. Ctrl B. Shift C ...
来一段word的vba代码，实现将文档中的图片尺寸统一
以下是一段VBA代码,它可以实现将Microsoft Word文档中的所有图片尺寸统一为指定的高度和宽度: Sub ResizeAllImages()Dim shp As Shape For Each ...
Word文档怎么删除html标签,Word文档中怎么删除空白页？删除空白页的六种方法
平时使用Word写文档时,经常遇到在编辑处理完文档后会发现Word中多出了一个或多个空白页,而这些空白页上已经没有任何内容却怎么都删不了,很是苦恼. 本文主要讲解了6种经过小编测试有效的删除Word文 ...
基于opencv的gpu与cpu对比程序，代码来自opencv的文档中
原文链接: http://www.opencv.org.cn/opencvdoc/2.3.2/html/doc/tutorials/gpu/gpu-basics-similarity/gpu-basi ...
html文档中的元素分为两部分,云开HTML5开发基础与应用（20秋）形考作业2【标准答案】...
HTML5开发基础与应用(20秋)形考作业2 试卷总分:100 得分:100 一.单选题 (共 10 道试题,共 40 分) 1.下列说法中错误的是:( ). A.text-overflow用于处理 ...
＜title＞标签：定义文档的标题
定义和用法: <title> 标签定义文档的标题,在所有 HTML 文档中是必需的. 1.title标签只能在head标签内出现: 2.定义浏览器工具栏中的标题: 3.浏览器中收藏夹内书签 ...
Java 读取Word文档中的文本内容
这篇文章将介绍如何使用Free Spire.Doc for Java组件在Java应用程序中读取Word文档的文本内容.Free Spire.Doc for Java提供了两种方法来读取Word文档中 ...
在html文档中建立两个表单,职称计算机考试Dreamwaver中表单的创建与应用
职称计算机考试Dreamwaver中表单的创建与应用表单在网页中主要负责数据采集功能.下面小编给大家讲述的是职称计算机考试Dreamwaver中表单的创建与应用,大家可以参考阅读,更多详情请关注应届 ...
java中用流提取文档中的文字,语言实现从word文档中提取文本
word中提取中文打开Word,CTRL+F打开"查找替换"对话框. 点击下方的"查找替换"对话框的"高级"按钮. 点击"特殊字 ...

HTML5系列代码：section标签定义文档中的节（section、区段）

HTML5系列代码：section标签定义文档中的节（section、区段）相关推荐

最新文章

热门文章