码迷,mamicode.com
首页 > 其他好文 > 详细

导航栏

时间:2018-10-14 23:00:44      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:round   ie6   文字   head   块元素   enter   spl   转化   idt   

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 导航条</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    /*去除项目符号*/
    ol, ul, li
    {
        list-style: none;
    }
    .nav{
        
        
        background: #ccc;
        /*设置宽度*/
        /*
         *在ie6中,如果为元素指定一个宽度,则会默认开启haslayout
         */
        width: 1000px;
        /*元素居中*/
        margin: 50px auto;
        /*解决高度塌陷问题*/
        overflow: hidden;
        
        
    }
    
    .nav li{
        float: left;
        
        
    }
    .nav a{
        
        /*a转化为块元素*/
        display: block;
        /*为a指定一个宽度*/
        width: 250px;
        /*设置文字居中*/
        text-align: center;
        /*内边距*/
        padding:5px 0px;
        /*去掉下划线*/
        text-decoration: none;
    }
    .nav a:hover{
        background: red;
    }    
</style>
</head>
<body>
    <div>
    <ul class="nav">
        <li><a href="#">标题1</a></li>
        <li><a href="#">标题1</a></li>
        <li><a href="#">标题1</a></li>
        <li><a href="#">标题1</a></li>
    </ul>
    </div>
    
</body>
</html>

导航栏

标签:round   ie6   文字   head   块元素   enter   spl   转化   idt   

原文地址:https://www.cnblogs.com/goodgirl----xiaomei/p/9788314.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!