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;
}

 

posted @ 2019-09-09 21:56  蓝色风扇  阅读(108)  评论(0编辑  收藏  举报