CSS构造列表和导航

2022-02-23 21:44:53

CSS构造列表和导航
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS构造列表</title>
</head>
<style type="text/css">
    /*body默认是有边距的*/
    body{
        margin:0;
    }
    /*ul默认是有边距的所以先将边距去掉IE78只要加上margin就可以了 但IE6不行 所以要加上padding  可以实现所有浏览器的兼容*/
    ul{
        list-style:none;
        margin:0;
        padding:0;
    }
</style>
<body>
    <ul>
        <li>习近</li>
        <li>李克</li>
        <li>温家</li>
        <li>胡锦</li>
        <li>贾庆</li>
    </ul>
</body>
</html>
CSS构造列表和导航

 

使用图片作为项目列表图标：

CSS构造列表和导航
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS构造列表</title>
</head>
<style type="text/css">
    body{
        margin:50px;
    }
    ul{
        list-style:none;
        margin:0;
        padding:0;
        list-style-image:url(fasfas.gif);
        line-height:150%;
    }
</style>
<body>
    <ul>
        <li>习近</li>
        <li>李克</li>
        <li>温家</li>
        <li>胡锦</li>
        <li>贾庆</li>
    </ul>
</body>
</html>
CSS构造列表和导航

 

以背景图片作为项目列表图标：这种方法比较好，可以随意调动

CSS构造列表和导航
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS构造列表</title>
</head>
<style type="text/css">
    body{
        margin:50px;
    }
    ul{
        list-style:none;
        margin:0;
        padding:0;
    }
    ul li{
        background:url(fasfas.gif) no-repeat left 50%;/*只显示一个*/
        padding-left:20px;
    }
</style>
<body>
    <ul>
        <li>习近</li>
        <li>李克</li>
        <li>温家</li>
        <li>胡锦</li>
        <li>贾庆</li>
    </ul>
</body>
</html>
CSS构造列表和导航

 

 

内联列表：ul和li默认是区块的，查看是否是区块可以加上颜色测试，将列表转换为内联之后项目图标会不见，可以使用浮动或者使用下面的列子来实现

这里的 display 属性是块级值的设置,定义是否要成为块.Inline 是是内联,block 是区块.

CSS构造列表和导航
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS构造列表</title>
</head>
<style type="text/css">
    body{
        margin:50px;
    }
    ul{
        list-style:none;
        margin:0;
        padding:0;
    }
    li{
        display:inline;
    }
</style>
<body>
    <ul>
        <li>习近</li>
        <li>李克</li>
        <li>温家</li>
        <li>胡锦</li>
        <li>贾庆</li>
    </ul>
</body>
</html>
CSS构造列表和导航

 

 

 

背景图片和内联列表：使用这种方法再将li变成内联的时候背景图片仍然还在

CSS构造列表和导航
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS构造列表</title>
</head>
<style type="text/css">
    body{
        margin:50px;
    }
    ul{
        list-style:none;
        margin:0;
        padding:0;
    }
    li{
        display:inline;
        background:url(fasfas.gif) no-repeat left center;
        
        padding-left:20px;
    }
</style>
<body>
    <ul>
        <li>习近</li>
        <li>李克</li>
        <li>温家</li>
        <li>胡锦</li>
        <li>贾庆</li>
    </ul>
</body>
</html>
CSS构造列表和导航

 

垂直导航栏：

CSS构造列表和导航
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS构造列表</title>
</head>
<style type="text/css">
    body{
        margin:50px;
    }
    ul{
        list-style:none;
        Margin:5px;
        Padding:2px;
        width:250px;
        Font-size: 19px;
        
    }
    Li {
        Background: #ddd url(fasfas.gif) no-repeat 10px center;
        Margin: 0;
        Padding: 2px 35px;
        Border-left: 1px solid #fff;
        Border-top: 1px solid #fff;
        Border-right: 1px solid #666;
        Border-bottom: 1px solid #aaa;
    }
</style>
<body>
       <div>
        <ul>
            <li><a href="#">Drubjs Menu</a></li>
            <li><a href="#">Beer</a></li>
            <li><a href="#">Spirits</a></li>
            <li><a href="#">Cola</a></li>
            <li><a href="#">Lemonade</a></li>
            <li><a href="#">Tea</a></li>
            <li><a href="#">Coffee</a></li>
        </ul>
</div>
</body>
</html>
CSS构造列表和导航

 

 

创建垂直翻转的列表：

CSS构造列表和导航
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS构造列表</title>
</head>
<style type="text/css">
    body{
        margin:50px;
    }
    ul{
        list-style:none;
        margin:0;
        font-size:16px;
    }
    ul li a{
        display:block;
        width:200px;
        height:40px;
        line-height:40px;
        color:#000;
        text-decoration:none;
        background:#94b8e9 url(2014-03-08_220129.gif) no-repeat left center;
        Text-indent:50px;
    }
    a:hover{
        background-position: right bottom;
    }
    
</style>
<body>
       <div>
        <ul>
            <li><a href="#">Drubjs Menu</a></li>
            <li><a href="#">Beer</a></li>
            <li><a href="#">Spirits</a></li>
            <li><a href="#">Cola</a></li>
            <li><a href="#">Lemonade</a></li>
            <li><a href="#">Tea</a></li>
            <li><a href="#">Coffee</a></li>
        </ul>
</div>
</body>
</html>
CSS构造列表和导航

 

 

 

创建水平导航条：

CSS构造列表和导航
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS构造列表</title>
</head>
<style type="text/css">
    body{
        margin:50px;
    }
    ul{
        list-style:none;
        margin:0px;
        padding:0px;
        width:798px;
        line-height:50px;
        background:#faa819 url(2014-03-08_223706.png) repeat-x;
        font-size:16px;
        float:left;/*要浏览器兼容，这里也要浮动*/
    }
    
    /*这里不要用内联，因为调不了高度*/
    ul li {
        float: left;
        width:114px;
        background: url(2014-03-08_223754.png) no-repeat right center;
        text-align:center;
    }
    ul a {
        color:#fff;
        padding: 0 4px;
        /*background: url(2014-03-08_223754.png) no-repeat right center;*/
        text-decoration: none;
    }/**/
    
</style>
<body>
       <div>
        <ul>
            <li><a href="#">Menu</a></li>
            <li><a href="#">Beer</a></li>
            <li><a href="#">Spirits</a></li>
            <li><a href="#">Cola</a></li>
            <li><a href="#">Lemonade</a></li>
            <li><a href="#">Tea</a></li>
            <li><a href="#">Coffee</a></li>
        </ul>
</div>
</body>
</html>
CSS构造列表和导航

CSS构造列表和导航,布布扣,bubuko.com

CSS构造列表和导航

上一篇：使用jquery获取单选radio的值


下一篇：Web服务器（Apache）虚拟主机的配置