html(三)

布局

html布局一般分为div布局和table布局，为了方便SEO等因素，推荐使用div布局。

大多数html元素可以分为块级元素或内联元素。块级元素通常以新行开始，内联元素则通常不会以新行开始。

div是典型的块级元素，没有特定含义，可用于组合其它HTML元素的容器，进行文档布局。

span是典型的内联元素，也没有特定含义，可用作文本的容器。可用于分割<、>等敏感字符，使其仅作字符显示。

Div布局

div如果不做定义，则宽度默认为100%，高度由内部元素撑出，默认为0。

text-align:center，使div内部的文本居中显示。

float:left，浮动布局使div向左浮动。相邻的div如果没有定义float属性，则分属两行，否则同行。

padding:10px; 设置内边距

元素所占宽度=width+padding-left+padding-right+margin-left+margin-right。

水平菜单栏

<div class="topnav">
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#">链接</a>
</div>

css

/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接 - 修改颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}