今天练习到一个导航栏居中,要实现的效果如下:
现将实现的代码如下,仅供参考(所有代码仅针对上图实例):
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
*{margin: 0;padding: 0}
div{margin:0 auto;}
#first{
border:1px solid gold;
height: 50px;
width:694px;
text-align: center;
}
span{
display: inline-block;
font:bold 16px/50px '雅黑';
color: pink;
width:90px;
border-left:1px solid gold;
}
</style>
<div>
<div id="first">
<span style="display: inline-block;width:100px;border-left: 0">首页</span>
<span>公司简介</span>
<span>解决方案</span>
<span>公司新闻</span>
<span>行业动态</span>
<span>招贤纳才</span>
<span>联系我们</span>
</div>
</div>
</body>
</html>
以上是实现的一种代码途径,实现效果如下:
以上代码仅供参考!