用div+css创建“七街”的logo和导航部分

小七 发表于:2017-05-20 15:59 复制链接 ?提问题 +写文章
阅读数:1689
这一节综合运营div创建“七街”的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.SEOwhy7.com/" target="_blank"><img src="bbs-logo.png" /></a></div>
<div class="nav">
<ul>
   <li><a href="#">七街</a></li>
   <li><a href="#">七街问答</a></li>
   <li><a href="#">夫唯学院</a></li>
   <li><a href="#">工具</a></li>
   <li><a href="#">招聘</a></li>
</ul>
</div>
</div>
</body>
</html>



返回列表 使用道具 举报
条评论
您需要登录后才可以回帖 登录 | 注册
高级
我有我道 我有我道 发表于 2017-05-22 16:53 | 阅读全部
学习了,谢谢分享
使用道具 举报
回复
七夕沫 七夕沫 发表于 2017-06-03 11:35 | 阅读全部
谢谢分享
使用道具 举报
回复
又出糗了 又出糗了 发表于 2017-06-05 15:26 | 阅读全部
这个需要实践。。
使用道具 举报
回复
121340751 121340751 发表于 2017-06-06 16:01 | 阅读全部
提示: 作者被禁止或删除 内容自动屏蔽
使用道具 举报
回复
mojsxj mojsxj 发表于 2017-06-30 19:17 | 阅读全部
有待我去操作一遍
使用道具 举报
回复
flanker flanker 发表于 2017-09-21 10:22 | 阅读全部
很受用学习了
使用道具 举报
回复
addison addison 发表于 2018-07-22 17:23 | 阅读全部
鼓励一下,帖子非常好
使用道具 举报
回复
相关推荐

您的等级不够,“高级及以上会员” 开启

您的等级不够,“vip会员”开启