div样式左右两列+li列表
<style type="text/css">#header {width:768px;height:50%;background:#C1CDC1;border-width:1px 0;border-style:solid;border-color:#F08080;margin:2px;padding:2px;}#logo {height:100%;width:20%;background:#8B4500;float:left;margin-right:13px;}#banner {height:100%;width:78%;background:#8968CD;float:right;}</style><div id="header"><div id="logo"></div><div id="banner"></div></div>---转载列表是HTML里一种很有用的显示方式，可以把相关的并列内容整齐地垂直排列，使网页显得整洁专业，并让浏览者有一目了然的感觉。样式表为列表增加了一些功能，控制列表的样式包括列表样式、图形符号、列表位置三个部分。1．列表符号列表符号是指显示于每一个列表项目前的符号标识。基本格式如下：list-style-type：参数参数取值范围：·disc：圆形·circle：空心圆·square：方块·decimal：十进制数字·lower-roman：小写罗马数字·upper-roman：大写罗马数字·lower-alpha：小写希腊字母·upper-alpha：大写希腊字母·none：无符号显示参数中的disc是默认选项。2．图形符号图形符号指原来列表的项目符号将可以使用图形来代替。基本格式如下：list-style-image：URLURL是用来代替项目符号的图形文件的地址，可以使用相对地址或绝对地址。3．列表位置列表位置描述列表在何处显示。基本格式如下：list-style-position：参数参数取值范围：·inside：在BOX模型内部显示·outside：在BOX模型外部显示这里又出现了一个新的概念：BOX模型。BOX是指一种容器，包含了应用样式规则的对象，具体介绍将在后文中给出。使用无序列表：即UL看一个最简单的例子：<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ul>这是一个未加修饰的纵向列表1：设置列表的边界#base { border: 1px solid #000; margin: 2em; width: 10em; padding: 5px; }html中这样写，就会呈现一个带边框的无序列表<div id="base"><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ul></div>2：设定列表的图像可以设定列表的样式为左边带一个图像，样式如下：ul { list-style-type: disc; list-style-image: url(bullet.gif); list-style-position: inside; }disc表示实心的圆，list-style-image表示列表用到的小图像，如果这个图像的url不正确时，disc才会起作用，inside表示列表是在区块内部的。3：如何在段落中使用列表样式如下：#inline-list {border: 1px solid #000; margin: 2em; width: 80%; padding: 5px; font-family: Verdana, sans-serif;}#inline-list p { display: inline; }#inline-list ul, #inline-list li {display: inline; margin: 0; padding: 0; color: #339; font-weight: bold;}4：水平导航#h-contain {padding: 5px; border: 1px solid #000; margin-bottom: 25px;}#pipe ul {margin-left: 0; padding-left: 0; display: inline;}#pipe ul li {margin-left: 0; padding: 3px 15px; border-left: 1px solid #000; list-style: none; display: inline;}#pipe ul li.first {margin-left: 0; border-left: none; list-style: none; display: inline;}#h-contain定一个一个边界为1的区块，水平导航用的也是inline方式，li.first定义第一个列表元素没有左边那个象素为1的border。下面的样式是tab方式的水平导航：#tabs ul {margin-left: 0; padding-left: 0; display: inline;}#tabs ul li {margin-left: 0; margin-bottom: 0; padding: 2px 15px 5px; border: 1px solid #000; list-style: none; display: inline;}#tabs ul li.here {border-bottom: 1px solid #ffc; list-style: none; display: inline;}li的class如果为here，则是选中的 首先，是整体的布局，拿到效果图，差不多把页面分割成几大部分，比如抬头和尾部和中间的内容区域。分好几块div就行，然后分别为这些div写css控制，以便真正做到确定他们的具体位置。以下是这一部分一般会用到的经典css说明：clear：both可以独霸一行的位置~设置这个之后，就可以清楚的为抬头和结尾或中间的div定位成独立一行。然后是一些float和width和height，这些是定位在这一行里面某块区域的大小和位置。接下来的总结是一些经典的细节，总结如下：1 虚线的实现：不需要图片来填充，只需要在<td></td>中加入这么一段就可以了，可以用<div style="border-bottom:1px dashed #ccc"></div>，然后参考手册，然后你就能明白dashed、solid、dotted...等的作用，利用它们你可以制作出许多效果来，实线、虚线、双线、阴影线等等。举例：<div id="banner"></div>#banner {background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/width:730px; /*设定层的宽度*/margin:auto; /*层居中*/height:240px; /*设定高度*/border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/clear:both /*清除浮动*/}通过border很容易就绘制出一条实线了，并且减少了图片下载所占用的网络资源，使得页面载入速度变得更快。2 定位好div里面的元素位置在一个div里面，里面的文字或其他元素什么的，默认是顶格在这个div的左上角，那么怎么定位这些在div里面的元素的位置呢？我们可以这样<div style="float:left;padding-top:50px;">再用div或一个span或p来写这些属性~或者：<div style="position:relative;"> <div style="position:absolute;left:Xpx;top:Ypx;>内容区</div></div>把X.Y换成自己想要距父框的左边距，上边距就行。3 关于图片按钮的实现.button { background-image:url(image/u6.png); background-repeat:no-repeat; height:23px;width:85px; padding-top:8px;margin-left:-5px; background-color: transparent; font-size:12px; cursor: hand; border:0px solid #666666 } <div style="float:right;padding-top:50px;padding-right:35px;"> <input type="button" value="首 页" onmouseover="javascript:this.style.backgroundImage='url(image/ru6.png)';" onmouseout="javascript:this.style.backgroundImage='url(image/u6.png)';" /> </div>如果以上这个div里面有多个input，他们之间的间距调整可以在在button的css里面用：margin-left:-5px;来调整，如果是input里面的字体，可以用padding-top:8px；来调整4 关于css+div的圆形矩形圆角不是BORDER的属性。在PS里做圆角的图片然后做为DIV块的background-image就可以。也就是背景图片已经是圆角矩形了然后把这个背景图片放到div里面，把这个div的边框隐藏了就行。代码如下：#MainBodyPalt{ clear:both;width:735px;height:90px; margin-left:18px; background-image:url(image/u365.png); background-repeat:no-repeat; border:0px solid #666666;}<div id="MainBodyPalt"> </div>遇到图片没能整个覆盖，就是因为没有设置它平铺，怎么设置呢？很简答，在css里面写：background-repeat:no-repeat; 让它平铺，就行啦。5 在圆形矩形div里面放元素。要在一个div里面布局好你想要的元素，可以直接用p来规划，间隙可以用padding来定夺，也可以用span标签来拉开元素间的固定间隔，当然了，span里面也是用padding来拉开距离。6 矩形线条框+圆形抬头做法是用一个div的背景图片变成那个矩形图片，当然，实现应该准备标题的圆形图片和矩形线条的图出来。然后在这个div里加入一个<h1></h1>来放圆形背景图片的标题就可以了，然后写CSS来控制这个h1标签，就可以实现。代码如下： <div id="Sidebar"> <p id="nav1" onmouseover="chage1(1,this)" onmouseout="chage2(1,this)">首页</div> <div id="nav2" onmouseover="chage1(2,this)" onmouseout="chage2(2,this)">真题测试</div> <div id="nav3" onmouseover="chage1(3,this)" onmouseout="chage2(3,this)">弱项诊治</div> <div id="nav4" onmouseover="chage1(4,this)" onmouseout="chage2(4,this)">高分训练</div> <div id="nav5" onmouseover="chage1(5,this)" onmouseout="chage2(5,this)">错题集</div> <div id="nav6" onmouseover="chage1(6,this)" onmouseout="chage2(6,this)">考试大纲</div> <div id="nav7" onmouseover="chage1(7,this)" onmouseout="chage2(7,this)">用户管理</div> </span> <script language='JavaScript'>function chage1(n,obj){ var oTip = document.getElementById("nav"+n);oTip.style.background = "url(ztcs/ru23.jpg)";oTip.style.color="#000000";}function chage2(n,obj){ var oTip = document.getElementById("nav"+n);oTip.style.background = "";oTip.style.color="#FFFFFF";}</script>---转载