问答详情
源自:4-1 使用jQuery实现网页定位导航(上)

为什么不行啊,图不能成一行,还有目录不能显示在右侧啊???

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

<style>

*{

margin:0;

padding:0;

}

body{

font-size:12px;

line-height:1.7;

}

li{

list-style:none;

}

#content{

width:800px;

margin:0 auto;

padding:20px;

}

#content h1{

color:#0088bb;

}

#content .item{

padding:20px;

margin-bottom:20px;

border:1px dotted #0088bb;

}

#content .item h2{

font-size:16px;

font-weight:bold;

border-bottom:2px solid #0088bb;

margin-bottom:10px;

}


<!--图片列表样式-->

#content .item li{

display:inline;

margin-right:10px;

}

#content .item li a img{

width:230px;

height:230px;

border:none;

}


<!--右侧导航样式-->

#menu {

position:fixed;

top:100px;

left:50%;

margin-left:400px;

width:80px;

}

#menu ul li a{

display:block;

margin:5px 0;

font-size:14px;

font-weight:bold;

color:#333;

width:80px;

height:50px;

line-height:50px;

text-decoration:none;

text-align:center;

}

#menu ul li a:hover,

#menu ul li a.current{

color:#fff;

background:#0088bb;

}

</style>

</head>


<body>

<div id="menu">

  <ul>

    <li><a href="#">1F 男装</a></li>

    <li><a href="#">2F 女装</a></li>

    <li><a href="#">3F 美妆</a></li>

    <li><a href="#">4F 数码</a></li>

    <li><a href="#">5F 母婴</a></li>

  </ul>

</div>

<div id="content">

   <h1>地狗购物网</h1>

   <div id="item1" class="item">

      <h2>1F 男装</h2>

      <ul> 

        <li><a href="#" class="current"><img src="../ajaxdemo/1F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/1F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/1F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/1F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/1F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/1F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/1F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/1F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/1F_爱奇艺.jpg" alt=""/></a></li>

      </ul>

   </div>

   <div id="item2" class="item">

      <h2>2F 女装</h2>

      <ul> 

        <li><a href="#"><img src="../ajaxdemo/2F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/2F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/2F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/2F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/2F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/2F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/2F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/2F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/2F_爱奇艺.jpg" alt=""/></a></li>

      </ul>

   </div>

   <div id="item3" class="item">

      <h2>3F 美妆</h2>

      <ul> 

        <li><a href="#"><img src="../ajaxdemo/3F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/3F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/3F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/3F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/3F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/3F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/3F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/3F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/3F_爱奇艺.jpg" alt=""/></a></li>

      </ul>

   </div>

   <div id="item4" class="item">

      <h2>4F 数码</h2>

      <ul> 

        <li><a href="#"><img src="../ajaxdemo/4F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/4F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/4F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/4F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/4F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/4F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/4F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/4F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/4F_爱奇艺.jpg" alt=""/></a></li>

      </ul>

   </div>

   <div id="item5" class="item">     

    <h2>5F 母婴</h2>

      <ul> 

        <li><a href="#"><img src="../ajaxdemo/5F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/5F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/5F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/5F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/5F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/5F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/5F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/5F_爱奇艺.jpg" alt=""/></a></li>

        <li><a href="#"><img src="../ajaxdemo/5F_爱奇艺.jpg" alt=""/></a></li>

      </ul>

   </div>

</div>

</body>

</html>


提问者:明日之渺 2017-06-29 15:27

个回答

  • 慕粉2011362409
    2017-07-04 11:08:21

    你把css里面的注释<!---->改成//单行注释  试试