day18 html

#container{
    width: 1024px;
    margin: 0 auto;
}
#banner{
    height: 100px;
    background-image: url("imgs/banner.png");
    background-size: 100%;
}
#nav{
    list-style: none;
    height: 30px;
    margin: 0;
    padding: 0;
    border-bottom: 2px solid #2788da;
}
#nav li{
    float: left;
}
#nav li a{
    display: block;
    width: 168px;
    margin-left: 2px;
    text-align: center;
    text-decoration: none;
    color: #000;
    height: 26px;
    padding-top: 4px;
    background-color: #ececec;
}
#nav li a:hover{
    color: #ffffff;
    background-color: #cccccc;
}
#category{
    float: left;
}
#lnav{
    list-style:none;
    margin: 0;
    padding: 0;
    width: 120px;
}
.menu1{
    display: block;
    height: 24px;
    padding: 2px 0 0 4px;
    font-size: 16px;
    background-color: #cccccc;
}
#lnav li{

}
#lnav li a{
    display: block;
    padding-left: 4px;
    text-decoration: none;
    font-size: 14px;
    color: #000000;
    background-color: #ececec;
    margin:1px 0;
}
#lnav li a:hover{
    color: #ffffff;
    background: #cccccc;
}
#primary{
    margin-left: 124px;
    padding: 2px;

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
    <title>nav 3</title>
    <link rel="stylesheet" href="nav3.css"/>
</head>
<body>
<div id="container">
    <div id="banner"></div>
    <div id="header">
        <ul id="nav">
            <li><a href="#">首页</a></li>
            <li><a href="#">文章</a></li>
            <li><a href="#">参考</a></li>
            <li><a href="#">BLOG</a></li>
            <li><a href="#">论坛</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </div>
    <div id="main">
        <div id="category">
            <ul id="lnav">
                <li class="menu1">CSS</li>
                    <li><a href="#">CSS 入门</a></li>
                    <li><a href="#">CSS 进阶</a></li>
                    <li><a href="#">CSS 高级技巧</a></li>
                <li class="menu1">WebUI</li>
                    <li><a href="#">理论知识</a></li>
                    <li><a href="#">实战应用</a></li>
                    <li><a href="#">高级技巧</a></li>
                <li class="menu1">DOM</li>
                    <li><a href="#">DOM 入门</a></li>
                    <li><a href="#">DOM 应用</a></li>
                    <li><a href="#">DOM 与浏览器</a></li>
                <li class="menu1">XHTML</li>
                    <li><a href="#">XHTML 参考手册</a></li>
                    <li><a href="#">XHTML 论坛</a></li>
            </ul>
        </div>
        <div id="primary">
            primary
        </div>
    </div>
</div>
</body>

猜你喜欢