如何控制div模块的位置

qq_36804207 2017-06-04 10:40:50

我想把这个导航栏放到页面左边，但是不知道哪里的问题跑到中间去了，请问是哪里的问题？

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px; font-family:微软雅黑;margin:0;}
.left{ width:200px; height:100%; border-right:1px solid #CCCCCC ;#FFFFFF; color:#000000; font-size:14px; text-align:center;}
.div1{text-align:center; width:200px; padding-top:15px;}
.div2{height:40px; line-height:40px;cursor: pointer; font-size:13px; position:relative;border-bottom:#ccc 1px dotted;}
.jbsz {position: absolute; height: 20px; width: 20px; left: 40px; top: 15px; background:url(../images/1.png);}
.xwzx {position: absolute; height: 20px; width: 20px; left: 40px; top: 15px; background:url(../images/2.png);}
.zxcp {position: absolute; height: 20px; width: 20px; left: 40px; top: 15px; background:url(../images/4.png);}
.lmtj {position: absolute; height: 20px; width: 20px; left: 40px; top: 15px; background:url(../images/8.png);}
.div3{display: none;cursor:pointer; font-size:13px;}
.div3 ul{margin:0;padding:0;}
.div3 li{ height:30px; line-height:30px; list-style:none; border-bottom:#ccc 1px dotted; text-align:center;}

a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
h2.pos_abs
{
position:absolute;
left:25px;
top:5px
}
</style>

<body><div class="left">
<div class="div1">
<div class="left_top"><img src="../images/bbb_01.jpg"><img src="../images/bbb_02.jpg" id="2"><img src="../images/bbb_03.jpg"><img src="../images/bbb_04.jpg"> </div>
<div class="div2"><div class="jbsz"> </div>基本信息</div>
<div class="div3">
<ul>
<li><a href="system.jsp"> 个人信息</a></li>
<li><a href="borrowmessage.jsp"> 借阅信息</a></li>
<li><a href="improve.jsp">信息完善</a></li>
</ul>
</div>
<div class="div2"><div class="xwzx"> </div><a href="">图书检索</a></div>
<div class="div3">
</div>
<div class="div2"><div class="zxcp"> </div>其他功能</div>
<div class="div3">
<ul>
<li>我要借书</li>
<li>我要</li>
<li> 添加图片</li>
</ul>
</div>
<div class="div2"><div class="lmtj"> </div> 栏目添加</div>
<div class="div3">
<ul>
<li> 文章系统</li>
<li> 图片系统</li>
<li> 添加表单</li>
<li> 招聘系统</li>
</ul>
</div>
</div>
</div>
</body>

然后出来的结果是这样的

想把它放到页面左边，大概是图标的位置，该怎么弄？

...全文

368 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

MikeDDT009 2017-06-04

打赏
举报

这玩意一般没多少有耐心看吧，不知道你什么情况，最主要得是要有个参考点，不知道你得树状图是如何描述，你得这个div是参考得是哪个元素，看着就麻烦

qq_36804207 2017-06-04

打赏
举报

好像不是这里的问题？贴一下源代码吧…… <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ page import="java.sql.*" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test</title> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px; font-family:微软雅黑;margin:0;} .left{ width:0px; height:100%; border-right:1px solid #CCCCCC ;#FFFFFF; color:#000000; font-size:14px; text-align:center;} .div1{ text-align:center;width:200px; padding-top:10px;} .div2{height:40px; line-height:40px;cursor: pointer; font-size:13px; position:relative;border-bottom:#ccc 1px dotted;} .jbsz {position: absolute; height: 20px; width: 20px; left: 40px; top: 10px; background:url(../images/1.png);} .xwzx {position: absolute; height: 20px; width: 20px; left: 40px; top: 10px; background:url(../images/2.png);} .zxcp {position: absolute; height: 20px; width: 20px; left: 40px; top: 10px; background:url(../images/4.png);} .lmtj {position: absolute; height: 20px; width: 20px; left: 40px; top: 10px; background:url(../images/8.png);} .div3{display: none;cursor:pointer; font-size:13px;} .div3 ul{margin:0;padding:0;} .div3 li{ height:30px; line-height:30px; list-style:none; border-bottom:#ccc 1px dotted; text-align:center;} a{color:#2d374b;text-decoration:none} a:hover{color:#cd0200;text-decoration:underline} h2.pos_abs { position:absolute; left:25px; top:5px } </style> <script type="text/javascript" src="../js/jquery-1.7.min.js"></script> <script type="text/javascript"> </script> <link rel="stylesheet" href="../css/main.css" /> <script type="text/javascript" src="../js/jquery-.3.2.min.js"></script> <script type="text/javascript" src="../js/bgstretcher.js"></script> <link rel="stylesheet" href="../css/16sucai.css" /> <script type="text/javascript"> $(document).ready(function(){ // Initialize Backgound Stretcher $('#toggleAnimation').click(function(){ if($(this).val() == "Pause Animation"){ $(this).val("Resume Animation"); $(document).bgStretcher.pause(); } else { $(this).val("Pause Animation"); $(document).bgStretcher.play(); } }); }); </script> <style type="text/css"> BODY { background: #2828FF; } #page { z-index: 2; position: relative; margin:auto; height:650px; width: 800px; padding: 20px; background: #FFFFFF; font-size: 12px; color: #AAAAAA; opacity: 0.8; -moz-opacity: 0.8; filter: alpha(opacity=80); } P.larger-size { font-size: 16px; } #page STRONG { color: #FFFFFF; } <link rel="stylesheet" href="../css/style.css" media="screen" type="text/css" /> </style> <link rel="stylesheet" type="text/css" href="../css/sucai.css" /> </head> <body> <div id="page">  <div class="main_body"> <div>  <div id="container">  <div id="header">  <div id="top"> <h2 class="pos_abs"> <img src="../images/IMG_6015.JPG" height="64" width="64"/> </h2> </div> <div id="text"> <span style="font-size:30px; left: 105px; position: absolute; top: 30px;"><font color=blue >中山大学图书管理系统</font></span> </div>  </div>  </div></div>  <div class="menu_left_part2"></div> <div class="menu_body2">  <div class="menu_content2"> <ul> <table> <tr> <td> <li class="menu_content2_active"> <a href="index.jsp">首页</a> </li> </td> <td> <li> <a href="http://www.design3edge.com">新书推荐</a> </li> </td> <td> <li> <a href="http://www.design3edge.com">排行榜</a> </li> </td> <td> <li> <a href="http://www.design3edge.com">活动</a> </li> </td> <td width="200"> <li> <a href="http://www.design3edge.com">交流区</a> </li> </td> <td> <li> <a href="../login.jsp">点此登陆</a> </li> </td> </tr> </table> </ul> </div>  </div> <div class="menu_right_part2"></div>  <div class="left"> <div class="div1"> <div class="left_top"><img src="../images/bbb_01.jpg"><img src="../images/bbb_02.jpg" id="2"><img src="../images/bbb_03.jpg"><img src="../images/bbb_04.jpg"> </div> <div class="div2"><div class="jbsz"> </div>基本信息</div> <div class="div3"> <ul> <li><a href="system.jsp"> 个人信息</a></li> <li><a href="borrowmessage.jsp"> 借阅信息</a></li> <li><a href="improve.jsp">信息完善</a></li> </ul> </div> <div class="div2"><div class="xwzx"> </div><a href="">图书检索</a></div> <div class="div3"> </div> <div class="div2"><div class="zxcp"> </div>其他功能</div> <div class="div3"> <ul> <li>我要借书</li> <li>我要</li> <li> 添加图片</li> </ul> </div> <div class="div2"><div class="lmtj"> </div> 栏目添加</div> <div class="div3"> <ul> <li> 文章系统</li> <li> 图片系统</li> <li> 添加表单</li> <li> 招聘系统</li> </ul> </div> </div> </div> </div> </div> </body> </html>