导航条(盒模型，行内元素布局)

作者: 沙子_32c6 | 来源:发表于2018-09-11 19:56 被阅读0次

css练习一：常用的布局实例（分页、导航条、图片列表）
导航栏01
导航条(盒模型，行内元素布局)
深入css布局（2）——元素分类
样式布局、清除浮动、垂直居中
区块、内联和内联块的区别和转换
HTML中块级元素和行内元素
Flex布局
flex布局兼容性代码
css布局

代码：

      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
<title>导航条</title>
<style type="text/css">
    *{
margin: 0;
padding: 0;
     }

    .box{
width: 896px;
height: 38px;
font-size: 12px;
border: 2px #8E8E8E solid;
margin: 0px auto;
      }
    li{
display: block;
float: left;
font: 14px "微软雅黑" #333;
margin: 10px 0;
position: relative;
left: 170px;
    }
  a{
text-decoration: none;
color: #000000;
  }
  a:hover{
color: red;
}
span{
margin: 0 20px;
}
ul{
text-align: center;
}
</style>
</head>
<body>
    <div class="box">
            <ul class="content">
                <li><a href="#">首页</a></li>
                <li><span>|</span></li>
                <li><a href="#">网站建设</a></li>
                <li><span>|</span></li>
                <li><a href="#">程序开发</a></li>
                <li><span>|</span></li>
                <li><a href="#">网络营销</a></li>
                <li><span>|</span></li>
                <li><a href="#">企业VI</a></li>
                <li><span>|</span></li>
                <li><a href="#">案例展示</a></li>
                <li><span>|</span></li>
                <li><a href="#">联系我们</a></li>
            </ul>
    </div>

    </body>
    </html>

效果如图：

选区_037.png