菜单

Html5 布局方式

2019年5月5日 - 计算机教程

在Html5之前,统一采用的是Div+css的方式进行布局,但是却和开发人员的命名方式,喜好有关。在新的Html5中,布局却显得更加人性化,更易理解了。如增加了Header,Footer,Section,Aside标签,很容易一眼就知道对应的功能是什么。布局效果如下:

402.com 1

涉及的元素,说明如下:HTML5 提供的新语义元素定义了网页的不同部分:

HTML5 语义元素

header

定义文档或节的页眉

nav

定义导航链接的容器

section

定义文档中的节

article

定义独立的自包含文章

aside

定义内容之外的内容(比如侧栏)

footer

定义文档或节的页脚

details

定义额外的细节

summary

定义 details 元素的标题

 

 

 

 

 

 

 

 

 

 

402.com, 

 

具体不多说,布局对应的Html代码如下:

402.com 2402.com 3

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>关于Web页的Html5布局</title>
  5     <style type="text/css">
  6     header
  7     {
  8         background-color:orange;
  9         color:White;
 10         text-align:center;
 11         height:120px;
 12         padding:5px;
 13      }
 14      nav 
 15      {
 16          line-height:30px;
 17          background-color:Lime;
 18          height:400px;
 19          width:15%;
 20          float:left;
 21          padding:0px;
 22        }
 23        aside
 24        {
 25            background-color:Gray;
 26            width:15%;
 27            height:400px;
 28            float:right;
 29            padding:0px;
 30        }
 31        section
 32        {
 33            width:70%;
 34            height:400px;
 35            background-color:Purple;
 36            float:left;
 37            padding:0px;
 38        }
 39        footer
 40        {
 41            background-color:Fuchsia;
 42            height:120px;
 43            color:White;
 44            clear:both;
 45            text-align:center;
 46            padding:5px;
 47         }
 48         ul
 49         {
 50             list-style-type:none;
 51         }
 52         .sp
 53         {
 54             width:15px;
 55             padding:5px;
 56         }
 57         a
 58         {
 59             text-decoration:blink;
 60         }
 61     </style>
 62 </head>
 63 <body>
 64     <header>
 65         <h1>这里是Header,一号标题</h1>
 66         <div>
 67             <a href="#">菜单1</a>|
 68             <a href="#">菜单2</a>|
 69             <a href="#">菜单3</a>|
 70             <a href="#">菜单4</a>|
 71             <a href="#">菜单4</a>|
 72             <a href="#">菜单5</a>|
 73             <a href="#">菜单6</a>|
 74             <a href="#">菜单7</a>
 75         </div>
 76     </header>
 77     <nav>
 78         <ul>
 79             <li><a href="#">链接1</a></li>
 80             <li><a href="#">链接2</a></li>
 81             <li><a href="#">链接3</a></li>
 82             <li><a href="#">链接4</a></li>
 83         </ul>
 84     </nav>
 85     <section>
 86         <h1>
 87             这里是正文</h1>
 88         <p>
 89             这里是段落1</p>
 90         <p>
 91             这里是段落2</p>
 92     </section>
 93     <aside>
 94         <h1>
 95             这里是侧边框</h1>
 96         <p>
 97             这里是段落1</p>
 98         <p>
 99             这里是段落2</p>
100     </aside>
101     <footer>
102         这里是页脚
103     </footer>
104 </body>
105 </html>

View Code

 

关于Padding , Border,Margin之间的关系,如下图所示:

402.com 4

关于样式的层叠顺序

当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?

一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字
4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表(位于 <head> 标签内部)
  4. 内联样式(在 HTML 元素内部)

因此,内联样式(在 HTML
元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head>
标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图