四⼗四：HTML5之HTML5页⾯布局案例
HTML5新布局的意义：
1.语义化：HTML5可以让更多语义化的结构代码标签代替⼤量的⽆异议的div标签
  1.这种语义化的特性提升了⽹页的质量和语义
  2.减少了以前⽤于CSS调⽤class和id属性
2.对搜索引擎的友好：新的结构标签带来的是⽹页布局的改变及提升对搜索引擎的友好
HTML5之前的布局
HTML5布局
布局⽬标⽰例：
html结构
CSS
初始化样式和属性
/* 去除默认样式和初始化属性 */
*{margin: 0;padding: 0;border: none;font-family: Arial;font-size: 14px;} /* 去掉超链接的下划线 */
a{text-decoration: none}
/* 去掉ul标签默认的· */
ul{list-style: none}
header部分
/* header块 */
header{height: 80px; background: #000}
/* 灰度条 */
header:after{}
/* ainer容器 */
header > .container{width: 1200px; margin: 0 auto /* 左右居中 */}
/* header.logo的a标签 */
header > .container > a{
display: block; /* 把超链接变成块级元素 */
float: left; /* 左浮动 */
margin: 5px 25px;  /* 外边距，上下5，左右25 */
}
/* header.logo尺⼨ */
header > .container > a > img{width: 198px; height: 73px;}
/* 导航条 */
header > .container > nav{float: right; /* 右浮动 */}
/* 导航条下的超链接 */
header > .container > nav > a{
font-size: 24px;
width: 110px;
height: 73px;
line-height: 73px;  /* ⾏⾼==⾼度，垂直居中 */
text-align: center;  /* 左右居中 */
display: block; /* 把超链接变成块级元素 */
float: left; /* 右浮动 */html ul标签
color: #fff;  /* ⽂字⽩⾊ */
}
/* 菜单按钮背景 */
header > .container > nav > a.nav-a1{background: #433b90}
header > .container > nav > a.nav-a2{background: #017fcb}
header > .container > nav > a.nav-a3{background: #78b917}
header > .container > nav > a.nav-a4{background: #feb800}
/
* 当前选中的超链接特效 */
header > .container > nav > a:hover,  /* ⿏标经过时触发 */
header > .container > nav > a.active{padding-bottom: 7px; /* 下边距7px */}
banner部分

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。