请问我的为什么上下对不齐呀?

来源:3-5 企业网站制作之导航部分制作(二)

这是一个很酷的昵称

2017-08-07 21:01

@charset "gb2312";

/* CSS Document */

* {

padding: 0;

margin: 0;

font-size: 12px;

}

body {

background-color: #F5F5F5;

}

.wrap {

width: 1000px;

margin: 0 auto;

}

.top {

width: 100%;

height: 27px;

background: url(../images/top_bg.jpg) repeat-x;

}

.top_content {

width: 1000px;

margin: 0 auto;

line-height: 27px;

}

.top_content li {

float: right;

list-style-image: url(../images/arrow.jpg);

width: 70px;

}

.top_content a:link, .top_content a:visited {

color: #8E8E8E;

text-decoration: none;

}

.top_content a:hover, .top_content a:active {

color: #C00;

text-decoration: none;

}

.logo {

height: 80px;

background-color: #FFF;

}

.logo_left {

width: 375px;

float: left;

display: inline;

}

.logo_right {

width: 300px;

height: 28px;

margin-top: 30px;

float: right;

display: inline;

color: #8E8E8E;

}

.logo_right img {

vertical-align: middle;

margin-right: 10px;

}

.tel {

font-family: "微软雅黑";

font-size: 22px;

color: #C00;

}

.nav {

height: 40px;

}

.nav_left {

width: 10px;

background: url(../images/nav_left.jpg) no-repeat;

}

.nav_mid {

width: 980px;

background: url(../images/nav_bg.jpg) repeat-x;

line-height: 40px;

}

.nav_right {

width: 10px;

background: url(../images/nav_right.jpg) no-repeat;

}

.nav_left, .nav_mid, .nav_right {

height: 40px;

float: left;

display: inline;

}

.nav_mid li {

float: left;

list-style-type: none;

width: 100px;

font-family: "微软雅黑";

text-align: center;

}

.nav_mid a:link, .nav_mid a:visited {

font-size: 16px;

color: #FFF;

text-decoration: none;

}

.nav_mid a:hover, .nav_mid a:active {

font-size: 16px;

color: #FF0;

text-decoration: none;

}

.nav_mid_left {

width: 680px;

}

.nav_mid_right {

width: 300px;

}

.nav_mid_left, .nav_mid_right {

float: left;

display: inline;

}

.search_text {

width: 190px;

float: left;

height: 25px;

margin-top: 5px;

background: url(../images/search.jpg) no-repeat right center;

background-color: #FFF;

border: 1px solid #FFF;

padding-right: 25px;

}

http://img.mukewang.com/598864200001ee9613610644.jpg

<!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>

<link href="css/main.css" rel="stylesheet" type="text/css">

<script src="js/setHomeSetFav.js" type="text/javascript" charset="gb2312"></script>>

<body>

<div class="top">

       <div class="top_content">

         <ul>

            <li><a herf="#">联系我们</a></li>

           <li><a herf="#" onclick="AddFavorite(window.location,document.title)">加入收藏</a></li><!--要收藏的网址,加入收藏的页面标题-->

          <li><a herf="#" onclick="setHome(window.location)">设为首页</a></li>

         </ul>

       </div>

</div><!--top结束--> 

<div class="wrap">

   <div class="logo">

   <div class="logo_left"><img src="images/logo.jpg" /></div><!--我们的LOGO-->

   <div class="logo_right"><img src="images/tel.jpg" width="28" height="28" />服务热线:<span class="tel">电话号码</span></div>

   </div><!--logo结束-->

</div> <!--wrap 结束-->

<div class="nav">

    <div  class="nav_left"></div>

    <div class="nav_mid">

      <div class="nav_mid_left">

        <ul>

          <li><a href="#">首页</a></li>

          <li><a href="list.html">系统简介</a></li>

          <li><a href="list.html">演示</a></li>

          <li><a href="list.html">文档下载</a></li>

          <li><a href="list.html">关于我们</a></li>

        </ul>

      </div>

      <!--nav_mid_left结束-->

      <div class="nav_mid_right">

        <form action="" method="post">

          <input type="text" class="search_text" />

          <!--<input type="text" class="search_text" x-webkit-speech />-->

        </form>

      </div>

      <!--nav_mid_right结束--> 

    </div>

    <!--导航主体nav_mid结束-->

    <div class="nav_right"></div>

  </div>

  <!--nav结束-->


</body>

</html>


写回答 关注

1回答

  • sout_main
    2017-08-07 23:26:24
    已采纳

    <div class="wrap">....</div>这个div你没有包到 .nav 这个导航菜单,所以<!--nav结束-->后面应该放<!--wrap结束-->

    sout_m...

    就是把<div class="wrap">....</div>中的</div>放到<!--nav结束-->后面

    2017-08-07 23:27:34

    共 1 条回复 >

企业网站综合布局实战

本课程重点介绍HTML/CSS实现常见企业网站布局的方法

157038 学习 · 2154 问题

查看课程

相似问题