html的两种导航栏效果
一种是竖着排列，一种是横着排列，这里我们用到几个属性，由于超链接是行内元素所以默认不可以竖着排且不能设置其宽度高度，所以我们用到了display:block;这个属性，利用这个属性我们可以将行内元素转化成块级元素，这样我们就可以给超链接设置宽度高度了。
实现效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.a1{
margin-left: 15px;
color: black;
display: block;
width: 100px;
height: 50px;
background: gray ;
text-decoration: none;
line-height: 50px;
margin-top:10px;
border: 1px solid black;
padding-left:10px;
font-size: 13px;
}
.a1:hover{/* 利用hover改变其指向时的颜色 */
color: white;
background-color: rgba(75, 75, 75,1);
}
</style>
</head>
<body>
<a href="#">首页</a>
<a href="#">中心简介</a>
<a href="#">政策法规</a>
<a href="#">常用下载</a>
<a href="#">技术支持和服务</a>
</body>
</html>
并排导航如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.a1{
color: red;
display: block;
width: 150px;
height: 50px;
background:rgba(170, 255, 255, 0.5);
text-decoration: none;
text-align: center;
line-height: 50px;
float:left;
margin-left:10px;
border: 1px solid rgba(170, 255, 255,1);
}
.a1:hover{
background-color: rgba(170, 6, 28, 0.6);
color: white;
}
</style>
</head>
<body>
<a href="#">首页</a>
<a href="#">中心简介</a>
<a href="#">政策法规</a>
<a href="#">常用下载</a>
<a href="#">为您服务</a>
<a href="#">技术支持和服务</a>
</body>
</html>
这里我们再来介绍一下float：left;由于设置了display：block；所以超链接变成了块级元素，如果想让块级元素并排我们需要给超链接添加浮动，这样才能实现并排效果。
扩展：每一个元素都有默认的display属性，使用最多的是block, inline和inline-block，不常用的是table-cell。根据display属性，我们可以将元素分为块级元素(block)和内联级元素(inline)。它们最大区别是:block元素可以设置宽度，独占一行。inline元素宽度由内容决定，与其他元素并列在一行。block：宽高可以自行设置，默认宽度由父容器决定，默认高度有内容决定。自己独占一行。inline：宽度和高度都有内容决定，与其他元素共占一行。
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
float有left ,right, none inherit 4个值。下面是值描述：
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。
清除浮动的话用clear:both;
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
请在支付页面继续完成支付
