当前位置:编程学习 > html/css >>

列表导航栏实例(01)

【步骤1】无样式

一、效果

 \

二、HTML

[html]
<!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>列表与导航栏</title> 
</head> 
<body> 
    <ul> 
        <li><a href="#">home</a></li> 
        <li><a href="#">about us</a></li> 
        <li><a href="#">products</a></li> 
        <li><a href="#">services</a></li> 
        <li><a href="#">contact</a></li> 
    </ul> 
</body> 
</html> 

<!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>列表与导航栏</title>
</head>
<body>
    <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">about us</a></li>
        <li><a href="#">products</a></li>
        <li><a href="#">services</a></li>
        <li><a href="#">contact</a></li>
    </ul>
</body>
</html>

 【步骤2】基本样式

一、效果

 \

二、HTML

[html]
<!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>列表与导航栏</title> 
    <link href="css/navigation.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <ul> 
        <li><a href="#">home</a></li> 
        <li><a href="#">about us</a></li> 
        <li><a href="#">products</a></li> 
        <li><a href="#">services</a></li> 
        <li><a href="#">contact</a></li> 
    </ul> 
</body> 
</html> 

<!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>列表与导航栏</title>
    <link href="css/navigation.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">about us</a></li>
        <li><a href="#">products</a></li>
        <li><a href="#">services</a></li>
        <li><a href="#">contact</a></li>
    </ul>
</body>
</html>

三、CSS

[css]
*{ 
    margin:0;  
    padding:0; 
    } 
body{ 
    font:11px Verdana, Geneva, sans-serif;  
    background:#666; 
    } 
ul{ 
    list-style:none; 
    } 

*{
    margin:0;
    padding:0;
    }
body{
    font:11px Verdana, Geneva, sans-serif;
    background:#666;
    }
ul{
    list-style:none;
    }
 【步骤3】横向导航条

一、效果

 \

二、HTML

[html]
<ul id="nav"> 
    <li><a href="#">home</a></li> 
    <li><a href="#">about us</a></li> 
    <li><a href="#">products</a></li> 
    <li><a href="#">services</a></li> 
    <li><a href="#">contact</a></li> 
</ul> 

<ul id="nav">
    <li><a href="#">home</a></li>
    <li><a href="#">about us</a></li>
    <li><a href="#">products</a></li>
    <li><a href="#">services</a></li>
    <li><a href="#">contact</a></li>
</ul>


三、CSS

#nav
{
    margin-top: 50px;
    overflow: hidden;
    height: 1%;
    background: url(../images/nav-bg.png) repeat-x;
    text-transform: capitalize;
}
#nav li
{
    float: left;
    background: url(../images/line.gif) no-repeat center right;
    padding-right: 1px;
}
#nav li a
{
    display: block;
    hei

补充:web前端 , HTML/CSS  ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,