f
  • A 首页
  • F 发现
  • G 手机版
  • J 更多
  • 注册
  • QQ登录

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

知道啦!

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

知道啦!
  • 社区
  • 门户
  • 咨询 ›
  • 学习 ›
  • 站长那点事儿
  • 征文
  • 互联网资讯
  • 投稿
  • 帮助中心
  • 发现
  • 七街号

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

小七 发表于 2017-05-20 15:59 复制链接
阅读数:1727
这一节综合运营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>



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