CSS H5布局-白红宇

CSS H5布局

阅读量：4931 次

发布时间：2019-06-11

本文共 3679 字，大约阅读时间需要 12 分钟。

HTML5引入了些新元素来定义页面结构。

新元素用于替换之前的<div>元素（在传统DIV约定俗成的基础进行演进）。

这些元素有：

<header> 元素用于表示页眉

<nav> 元素用于表示导航

<section> 元素用于表示相关信息集中到一块

<article> 元素用于表示文章

<aside>元素用于表示附属信息，如最新文章列表，历史存档

<footer> 元素用于表示页脚

其实，所有的元素本质上都是<div>元素。

只不过这些特殊的元素，如上面的HTML5布局元素，在浏览器渲染时添加了w3c事先约定的CSS规则。

HTML5布局新元素经典用法

下面的示例代码演示了HTML布局新元素的用法

                         
<!DOCTYPE html>
<
html
>
    
<
head
>
        
<
title
>HTML5 布局示例</
title
>
        
<
style
type
=
"text/css"
>
            
header, section, footer, aside, nav, article, figure, figcaption { 
                
display: block;}       
            
body { 
                
color: #666666;
                
margin: 0px;}
            
.wrapper { 
                
width: 940px;
                
margin: 20px auto 20px auto;
                
border: 2px solid #000000;}
            
header { 
                
height: 160px;
                
}
            
h1 { 
                
color:#000;
                
width: 940px;
                
height: 130px;
                
margin: 0px;}
            
nav, footer { 
                
clear: both;
                
color: #ffffff;
                
                
height: 30px;}
            
nav ul { 
                
margin: 0px;
                
padding: 5px 0px 5px 30px;}
            
nav li { 
                
display: inline;
                
margin-right: 40px;}
            
nav li a { 
                
color: #ffffff;}
            
nav li a:hover, nav li a.current { 
                
color: #000000;}
            
section.courses { 
                
float: left;
                
width: 659px;
                
border-right: 1px solid #eeeeee;}
            
article { 
                
clear: both;
                
overflow: auto;
                
width: 100%;}
            
hgroup { 
                
margin-top: 40px;}
            
figure { 
                
float: left;
                
width: 250px;
                
height: 240px;
                
padding: 5px;
                
margin: 20px;
                
border: 1px solid #eeeeee;}
            
figcaption { 
                
font-size: 90%;
                
text-align: left;}
            
aside { 
                
width: 230px;
                
float: left;
                
padding: 0px 0px 0px 20px;}
            
aside section a { 
                
display: block;
                
padding: 10px;
                
border-bottom: 1px solid #eeeeee;}
            
aside section a:hover { 
                
color: #985d6a;
                
}
            
a { 
                
color: #de6581;
                
text-decoration: none;}
            
h1, h2, h3 { 
                
font-weight: normal;}
            
h2 { 
                
margin: 10px 0px 5px 0px;
                
padding: 0px;}
            
h3 { 
                
margin: 0px 0px 10px 0px;
                
color: #de6581;}
            
aside h2 { 
                
padding: 30px 0px 10px 0px;
                
color: #de6581;}
            
footer { 
                
font-size: 80%;
                
text-align:center;
                
padding: 7px 0px 0px 20px;}
        
</
style
>
    
</
head
>
    
<
body
>
        
<
div
class
=
"wrapper"
>
            
<
header
>
                
<
h1
>网站标题</
h1
>
                
<
nav
>
                    
<
ul
>
                        
<
li
><
a
href
=
""
class
=
"current"
>首页</
a
></
li
>
                        
<
li
><
a
href
=
""
>产品</
a
></
li
>
                        
<
li
><
a
href
=
""
>服务</
a
></
li
>
                        
<
li
><
a
href
=
""
>关于我们</
a
></
li
>
                        
<
li
><
a
href
=
""
>联系我们</
a
></
li
>
                    
</
ul
>
                
</
nav
>
            
</
header
>
            
<
section
class
=
"courses"
>
                
<
article
>
                    
<
figure
>
                        
<
img
src
=
""
alt
=
"Bok Choi"
/>
                        
<
figcaption
>Java程序设计教程</
figcaption
>
                    
</
figure
>
                    
<
hgroup
>
                        
<
h2
>Java程序设计教程</
h2
>
                        
<
h3
>面向对象程序设计</
h3
>
                    
</
hgroup
>
                    
<
p
>Java是一种广泛使用的计算机程序设计语言，拥有跨平台、面向对象、泛型程序设计的特
                    
性，广泛应用于企业级Web应用开发和移动应用开发。</
p
>
                
</
article
>    
                
<
article
>
                    
<
figure
>
                        
<
img
src
=
""
alt
=
"Teriyaki sauce"
/>
                        
<
figcaption
>HTML5教程</
figcaption
>
                    
</
figure
>
                    
<
hgroup
>
                        
<
h2
>HTML5教程</
h2
>
                        
<
h3
>HTML5 + CSS3 + Javascript</
h3
>
                    
</
hgroup
>
                    
<
p
>HTML5 由万维网联盟（W3C）2014年10月完成標準制定，取代1999年所制定的HTML 4.01
                    
和XHTML 1.0標準。HTML5 已广泛应用于各行各业。</
p
>
                
</
article
>    
            
</
section
>
            
<
aside
>
                
<
section
class
=
"popular-recipes"
>
                    
<
h2
>火爆课程</
h2
>
                    
<
a
href
=
""
target
=
"_blank"
>JavaScript 教程</
a
>
                    
<
a
href
=
""
target
=
"_blank"
>JSTL 教程</
a
>
                    
<
a
href
=
""
target
=
"_blank"
>ajax 教程</
a
>
                    
<
a
href
=
""
target
=
"_blank"
>SQL 教程</
a
>
                
</
section
>
                
<
section
class
=
"contact-details"
>
                    
<
h2
>联系我们</
h2
>
                    
<
p
>北京市<
br
/>
                        
钟声胡同18号</
p
>
                
</
section
>
            
</
aside
>
            
<
footer
>
                
&copy; 2019 利永贞网
            
</
footer
>
        
</
div
>
<!-- .wrapper -->
    
</
body
>
</
html
>
        
      