水平导航栏:要求如下图
1,外框架固定、居中
2,子元素的内容不同但每一个子元素的内边框距离相同
3,将鼠标放在框架内,会由颜色背景,字体颜色的改变
4,子元素刚好能够填满父元素
代码块:
eg:a链接需要去掉下划线:text-decoration:none
使子元素文字居中:line-height:(设置与父元素高度一样的值)
将a行内元素转换为块级元素:display:block
该导航栏移动到文字上的效果:利用hover实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字导航</title>
<style>
.box{
width: 1206px;
height: 48px;
background-color: whitesmoke;
/* 居中设置 */
margin: 100px auto;
}
div a{
/* 设置浮动 */
float: left;
/* 去掉下划线 */
text-decoration: none;
color: #777777;
/* 子元素在父元素内垂直居中 */
line-height: 48px;