A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

沉淀

注册黑马

  • 黑马币:

  • 帖子:

  • 精华:

© 沉淀 注册黑马   /  2011-12-2 09:39  /  2769 人查看  /  8 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

http://www.w3school.com.cn/tags/tag_ul.asp
进到这个网站学习,事半功倍!
应该可以帮到你!

评分

参与人数 1技术分 +2 收起 理由
陈涛 + 2

查看全部评分

回复 使用道具 举报
本帖最后由 沉淀 于 2011-12-14 11:03 编辑
  1. <div>
  2.     <ul>
  3.        <li></li>
  4.        <li></li>
  5.    </ul>
  6. </div>
复制代码
在上面的代码中,如果设置UL相对于DIV的margin属性,总是得不到想要的效果?希望高手指点!不胜感激!

评分

参与人数 1技术分 +2 收起 理由
朱勋 + 2

查看全部评分

8 个回复

倒序浏览
CSS
div ul{
    margin-left:Xpx;
     设置上下左右
  float: left;
   浮动  左右  然后你可以设置 ul之间的距离 和风格  换前面的符号 之类 具体需要什么 则需要自己选择  
}

评分

参与人数 1技术分 +2 收起 理由
陈涛 + 2

查看全部评分

回复 使用道具 举报
补充说一句,文档布局结构我也懂,主要是ul在div内,设置ul{margin-top:XXXpx;},有问题。

评分

参与人数 1技术分 +2 收起 理由
陈涛 + 2

查看全部评分

回复 使用道具 举报
会不会是你的Div没设置width和height属性的原因?

评分

参与人数 1技术分 +1 收起 理由
陈涛 + 1

查看全部评分

回复 使用道具 举报
这是我以前用无序列表写的导航。你参考一下:
<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">
  .ulClass{ width:605px; list-style:none; margin:0px; padding:0px;}/*padding为控件的内边距*/
  .ulClass li{ float:left; width:150px; font-size:12px; font-weight:bold; color:#000000; background-color:#CCCC00; line-height:20px; margin-left:1px;}
  #overClass{ background-color:#CCCCCC; color:#333399; border-style:solid; border-width:1px; border-color:#666666; border-bottom-style:none; border-bottom-width:0px; width:148px;}
   #overClass1{ width:149px; background-color:#CCCCCC; color:#333399; border-style:solid; border-width:1px; border-color:#666666; border-bottom-style:none; border-bottom-width:0px;}
  #outClass{ color:#000000; background-color:#CCCC00;}
  .divClass{ clear:both; width:603px; height:300px; border-style:solid; border-width:1px; border-color:#999999; border-top-style:none; border-top-width:0px;}
</style>
<script language="javascript">
   function  chageText(num)
   {
     switch(num)
         {
         case 1:
           document.getElementById("div1").style.display="block";
           document.getElementById("div2").style.display="none";
           document.getElementById("div3").style.display="none";
           document.getElementById("div4").style.display="none";
           break;
           case 2:
           document.getElementById("div1").style.display="none";
           document.getElementById("div2").style.display="block";
           document.getElementById("div3").style.display="none";
           document.getElementById("div4").style.display="none";
           break;
           case 3:
           document.getElementById("div1").style.display="none";
           document.getElementById("div2").style.display="none";
           document.getElementById("div3").style.display="block";
           document.getElementById("div4").style.display="none";
           break;
            case 4:
           document.getElementById("div1").style.display="none";
           document.getElementById("div2").style.display="none";
           document.getElementById("div3").style.display="none";
           document.getElementById("div4").style.display="block";
           break;
         }
   }
</script>
</head>

<body style="text-align:center; margin:0px; padding:0px;" >
           <div style="width:603px; margin:0px auto">
     <ul  class="ulClass">
        <li onmouseover="chageText(1); id='overClass'" style="margin-left:0px;" onmouseout="id='outClass'">首页</li>
         <li onmouseover="chageText(2); id='overClass'" onmouseout="id='outClass'" >公司简介</li>
          <li onmouseover="chageText(3); id='overClass'" onmouseout="id='outClass'" >产品介绍</li>
           <li onmouseover="chageText(4); id='overClass1'"  style="margin:0px; padding:0px; margin-left:2px;" onmouseout="id='outClass'" >联系我们</li>
      </ul>
      <div class="divClass" id="div1" >
      欢迎光临蓝天电子科技有限公司网页!
      </div>
      <div class="divClass" id="div2" style="display:none">
      我们公司是一家中美合资的大型电子产品生产和研发的公司。
      </div>
      <div class="divClass" id="div3" style="display:none">
      主要生产液晶显示器,背投彩电,平板电视等
      </div>
      <div class="divClass" id="div4" style="display:none">
      公司电话:010-456656125 传真:010-234684612
      </div>
      </div>
</body>
</html>

评分

参与人数 1技术分 +1 收起 理由
李荣壮 + 1

查看全部评分

回复 使用道具 举报
李荣壮 黑马帝 2011-12-3 08:17:15
7#
你跟董志什么关系  ,怎么头像都一样的
回复 使用道具 举报
董志 黑马帝 2011-12-14 10:54:39
8#
呵呵,沉淀那个是我用QQ账号登陆的,改不了名,所以就又注册了一个
回复 使用道具 举报
董志 黑马帝 2011-12-14 10:56:17
9#
ul和div的布局问题,在w3c找到了答案,主要是边框至少得指定一个,否则会margin重叠现象,想必很多同学都遇到过了吧!
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马