如皋网站建设-如皋网站优化-如皋SEO-如皋网页设计

如皋网站建设咨询热线:15862770030
网站首页 > 网站建设知识 > 网站建设之用div+css创建“0513web”的logo和导航部分

网站建设之用div+css创建“0513web”的logo和导航部分

时间:2017/8/29 20:40:46 标签:

这一节综合运营div创建“0513web”的logo和导航条,其实就是在上一节的基础上再加一个div,里面放一个logo即可,两个div外面再套一个总的div即可,后面的正文部分还有很多div需要用到。这一节相对比较简单,完整测试代码如下:

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.all{
      width:1100px;
      margin:0 auto;}
.top{
       margin-left:73px;}
.nav ul{
        width:1000px;
        height:40px;
        border-bottom:1px solid #E20001;
        margin:0 auto;
}
.nav ul li{
        float:left;
        list-style:none;
}
.nav ul li a{
        width:100px;
        height:30px;
        line-height:30px;
        background-color:#E20001;
        color:#FFFFFF;
        margin:10px 5px;
        font-size:12px;
        display:block;
        text-align:center;
        text-decoration:none;
}
.nav ul li a:hover{
        background-color:#FFFF00;
        }
</style>
</head>

<body>
<div class="all">
<div class="top"><a href="http://www.0513web.com/" target="_blank"><img src="bbs-logo.png" /></a></div>
<div class="nav">
<ul>
   <li><a href="#">0513web</a></li>
   <li><a href="#">0513web</a></li>
   <li><a href="#">0513web</a></li>
   <li><a href="#">0513web</a></li>
   <li><a href="#">0513web</a></li>
</ul>
</div>
</div>
</body>
</html>
  


分享

上一篇:网站建设之CSS中使用项目列表创建一个典型的下拉菜单
下一篇:没有资料