网站列表页是啥,什么叫模板网站,流行的网站开发技术,营销活动方案模板该实例使用float 浮动实现元素浮动在水平方向#xff0c;从而实现水平导航栏效果。
overflow: hidden#xff1a;当不给父级元素设置高度的时候#xff0c;其内部元素浮动后会导致下面的元素顶上去#xff0c;这是因为子元素浮动后#xff0c;子元素脱离标准流#xff0…该实例使用float 浮动实现元素浮动在水平方向从而实现水平导航栏效果。
overflow: hidden当不给父级元素设置高度的时候其内部元素浮动后会导致下面的元素顶上去这是因为子元素浮动后子元素脱离标准流不占位父元素检测不到子元素的大小从而高度为0。下面的ul要是没有添加该属性时只显示主页其他隐藏。
去掉overflow: hidden的效果高度为零。 去掉overflow: hidden和添加高度的效果 下面是添加了 overflow: hidden的代码
style
ul {list-style-type: none;//去掉列表样式margin: 0;padding: 0;overflow: hidden;//这个很重要玄学溢出隐藏没有这个的话会导致只显示主页其他隐藏background-color: #333;
}li {float: left;//向左浮动
}li a {display: inline-block;//设置行内块color: white;text-align: center;padding: 14px 16px;text-decoration: none;//去掉文本装饰
}li a:hover {background-color: #111;//鼠标悬浮显示样式
}.active {background-color: red;//激活类样式
}
/style
/head
bodyullia href#home classactive主页/a/lilia href#news新闻/a/lilia href#contact联系/a/lilia href#about关于/a/li
/ul/body渲染效果
