1.布局组件
- header 用于设置一个页面的标题部分，通常会包含标题、logo、导航
- nav用来定义导航栏、目录、超链接，并非所有超链接都放在nav中，通常只把一个文档中的主导航栏放在nav中，在文章页面nav还可以用来给文字做一个目录的超链接
- article元素内可以嵌套其他元素，它可以有自己的头、尾部、主题内容。使用时要特别注意内容的独立性，一般对独立完整的内容才使用article元素，如果一段内容的话应该使用section元素
- aside元素通常用来设置侧边栏，用于定义元素之外的内容，前提是这些内容与article元素内的内容相关，同时也可作为article内部元素使用，作为主要内容的附属信息，比如与主内容有关的参考资料，名词解释
- section元素用来定义文章中的章节，用来定义文档中特定的区块，可视为一个区域分组元素，用来给页面上的内容分块。
- footer元素通常用于设置一个页面的底部区域，会包含友情链接，版权声明，文件建立日期，联系方式
- 代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{height: 700px;text-align: center;} header{height: 30%;background-color: #1B6D85;} nav{height: 20%;background-color: #449D44;} aside{height: 30%;float:left;background-color: #F0AD4E;width: 30%;} section{height: 30%;float: left;background-color: #f0f;width: 70%;} footer{height: 20%;background-color: #0ff;clear: left;}//此时的clear的属性值也可以是both </style> </head> <body> <header>头部</header> <nav>导航</nav> <aside>边缘</aside> <section>内容</section> <footer>底部</footer> </body> </html>
效果
补充：clear属性
clear真正的作用应该是：清除前面的兄弟级元素对当前元素的影响。（另起一行，不与前面的兄弟元素同占一行）
both: 在左右两侧均不允许浮动元素。
left: 在左侧不允许浮动元素。
none: 默认值。允许浮动元素出现在两侧。
right: 在右侧不允许浮动元素。
<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .aa{ width: 100px; height: 100px; background-color: #00FFFF; float: left; } .bb{ width: 100px; height: 100px; background-color: #00F; float: left; clear: both;/* 另起一行 */ } .cc{ width: 100px; height: 100px; background-color: #f0f; float: right; } </style> </head> <body> <div class="aa">aa</div> <div class="bb">bb</div> <div class="cc">cc</div> </body> </html>
效果
2.position常用属性值
- position: absolute;绝对定位 ，相对于最近的父元素进行定位（常用）
- position: relative; 相对定位，相对于其正常位置进行定位
- position: fixed; 固定定位，相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置
3.隐藏所有内容，点击对应的导航切换到对应的内容
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> li{ float: left; list-style: none; margin-left: 15px; } div{ clear: both;/* 清除浮动 */ display: none; } div:target{ display: block;/* 点击a链接显示对应的内容 */ } </style> </head> <body> <!-- 点击对应的a链接，显示对应的内容 --> <!-- href的属性值为要显示内容的id属性值 --> <ul> <li><a href="#a">a</a></li> <li><a href="#b">b</a></li> <li><a href="#c">c</a></li> </ul> <!-- 隐藏的内容 --> <section> <div id="a">aaa</div> <div id="b">bbb</div> <div id="c">ccc</div> </section> </body> </html>
效果:
