<section>标签
定义和用法：<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
div和section的区别
div
定义：文档中的分区或节。
使用场合：作为布局以及样式化时使用（此时三者并无区别,但div更常用）
提示：<div> 是一个块级元素，浏览器通常会在 div 元素前后放置一个换行符。
section
定义：文档中的节，一般是具有标题性的。
使用场合：文章的章节、标签对话框中的标签页、或者论文中有编号的部分。
提示：section不仅仅是一个普通的容器标签，这区别与div标签。一般来说，当元素内容明确地出现在文档大纲中时，section 就是适用的。
display属性
http://www.w3school.com.cn/cssref/pr_class_display.asp
其中最为常用的是：
none:此元素不会被显示
block此元素将显示为块级元素，此元素前后会带有换行符
inline默认。此元素会被显示为内联元素，元素前后没有换行符
如果做项目需要单页面切换，就要使用section+display来完成
比如一个简单的例子
CSS：
#total
{
width: 650px;
height: 830px;
background-color:gold;
margin:0 auto;
}
#part1{
width: 650px;
height: 830px;
background-color:blue;
margin:0 auto;
}
#part2{
width: 650px;
height: 830px;
background-color:yellow;
margin:0 auto;
}
简单的JS控制display：
function showpart1(id) {
id.style.display="block";
total.style.display="none";
part2.style.display="none";
}
function showpart2(id) {
id.style.display="block";
part1.style.display="none";
total.style.display="none";
}
function showtotal(id) {
id.style.display="block";
part1.style.display="none";
part2.style.display="none";
}
body部分section使用：
<body>
<section id="total">
<center><button type="submit" onclick="showpart1(part1)" >total</button></center>
</section>
<section id="part1">
<center><button type="submit" onclick="showpart2(part2)" >part1</button></center>
</section>
<section id="part2">
<center><button type="submit" onclick="showtotal(total)" >part2</button></center>
</section>
</body>
效果图如下：
点击按钮实现一个页面的不同内容切换
原文地址：https://www.cnblogs.com/purple-windbells/p/8886162.html
时间： 2024-10-23 10:42:43