在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果，这是在页面布局中基本，也是最应该首先掌握的 知识。不过，还是经常会有人问到这个问题，在这里我简单总结一下使用Div和CSS实现页面水平居中的方法：一、margin:auto 0 与 text-aligh:center 在现代浏览器（如Internet Explorer 7、Firefox、Opera等）现代浏览器实现水平居中的方法很简单，只要设定到左右两侧的空白为自动即可...
“尽量不要圆角，需要切图”“这样设计代码不好实现”云云，昨天在网上看到一个只用代码就可以设计出圆角的效果，～ 和大家一起分享~ 首先看样式表文件： .b1 {height:1px; font-size:1px; overflow:hidden; display:block; background:#000; margin:0 5px;} .b2 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:2px solid #000; border-left:2px solid #000; margin...
现在web2.0已经是一个趋势，网站重构也会盛行起来，这是我学习中收集的很不错的滑动门菜单（div+css）样式很丰富,可以参考学习 /Files/echo331/文件/CSSmenus.zip /Files/echo331/文件/CSSmenus2.zip
1.CSS ID 的命名 外 套： wrap 主导航： mainnav 子导航： subnav 页 脚： footet 整个页面： content 页 眉： header 页 脚： footer 商 标： label 标 题： title 主导航： mainbav（globalnav） 顶导航： topnav 边导航： sidebar 左导航： leftsidebar 右导航： rightsidebar 旗 志： logo 标 语： banner 菜单内容1： menu1 content 菜单容量： menu container 子菜...
长话短说，用 DIV + CSS 做液态布局（宽度自适应），具体用到“负值外补丁”的方法 （negative margins）。 下面我们来做一个三栏液态布局（three-column liquid layout） 首先 Body 和 外框 的代码： body{margin:0;padding:0px;text-align:center;} #wrap{margin:0 auto;text-align:left;} 三栏的代码分别如下： /*左边栏，固定宽度*/ .wrap_l{float:left;background:#FF0000;margin-right:-150px;width:150p...
容 器：container/box头 部：header主 导 航：mainNav子 导 航：subNav顶 导 航：topNav网站标志：logo大 广 告：banner页面中部：mainBody底 部：footer菜 单：menu菜单内容：menuContent子 菜 单：subMenu子菜单内容：subMenuContent搜 索：search搜索关键字：keyword搜索范围：range标签文字：tagTitle标签内容：tagContent当前标签：tagCurrent/currentTag标 题：title内 容：content列 表：list当前位置：currentPath侧 边 ...
Credit: http://www.865171.cn html { background: #fff; body { margin: 0; padding:0; font-family: Tahoma, Geneva, sans-serif; font-size: 12px; line-height: 1.5em; width: 100%; display: table; background: #fff; #templatemo_container { background: url(images/templaetmo_container_bg.jpg) no-repeat top; width: 960px; ...
滑动门是一种只需要鼠标悬停便可自动切换板块的JS特效。需要说明的是如果要减少板块，一定要把JS特效中的相应的板块li的id去掉，否则无法正常显示。比如要将第五项“滑动门”、“ 第五层内容 ”这两个删除的话也一定要把JS特效中的m05、mm05、mmm05和c05、cc05、ccc05删除，才能正常显示。 滑动门 h1, h2, h3, h4, h5, h6 { font-weight:bold; margin:0px; padding:0px; font-size:12px...
写了这么久的div+css代码，我还真不知道这个hack是什么？ 上网仔细查了一下。简单的说针对不同的浏览器写不同的 CSS code 的过程，就叫 CSS hack , 也叫写 CSS hack 。 Css hack 的原理： 由于不同的浏览器对 CSS 的支持及解析结果不一样，还由于 CSS 中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的 CSS 。 比如 IE6 能识别下划线 "_" 和星号 " * " ， IE7 能识别星号 " * " ，但不能识别下...
Firefox中使用display: table-cell; vertical-align: middle;可以实现div垂直居中，而IE6中则需要借助IE6中css的特点实现垂直居中。为了实现Firefox和IE6兼容的垂直居中，还需要 借助于!important标记。Firefox支持!important标记，而IE6忽略!important标记，因此可以使用! important标记区别Firefox和IE6。 [示例代码] 垂直居中，Firefox only 垂直居中，Firefox only ...
滑动门 *{font-size:12px;} html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;} UL{list-style-type:none; margin:0px;} /* 标准盒模型 */ .ttl{height:18px;} .ctt{height:auto;padding:6px;clear:both} .w936{width:936px;margin:2px 0;clear:both;border:1px solid skyblue} /* TAB 切换效果 */ .tb_{background-color: #E6F2FF; background-image: url('http://www.dc18.com/images/barbg_tab...
CSS导航条-http://www.codefans.net*{ margin:0; padding:0; list-style:none; font-size:12px; line-height:1.8;}body{ background: #333}#info{padding:50px;}#infobox{padding:0px 20px;background-color: #640000;}#center{background: #ABBAAC; border-top:2px solid #333; padding:20px;}.c{ clear:both; height:1px; overflow: hidden; background:#333}#infobox li{ border-right:1px solid #000; float:left; margin-righ...
当元素有浮动属性时，会对其父元素或后面的元素产生影响，会出现一个布局错乱的现象，可以通过清除浮动的方法来解决浮动的影响。 浮动的清理(clear): 值:none:默认值。允许两边都可以有浮动对象；left:不允许左边有浮动对象；right:不允许右边有浮动对象；both:左右两侧不允许有浮动对象。 清除浮动的方法：1.额外标签法这种方法应该是最简单的一种了，w3c建议在容器的末尾增加一个“clear:both"的元素强迫容器适应它的高度以便...
转自： http://blog.onlygrape.com/divcss-4/257 CSS命名规范 一．文件命名规范 全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css； 二．常用类/ID命名规范 页 眉：header内 容：content容 器：container页 脚：footer版 权：copyright 导 航：menu主导航：mainMenu子导航：subMenu标 志：logo标 语：banner标 题：title侧边栏：sidebar图 标：Icon注...
关于用DIV+CSS来制作列表的时候,大家最常用的是用ul和li来编写,但是这样用出现两个比较麻烦的地方： 1、如果用UL还布局，右边一栏比较麻烦； 2、文字外边的边框自适应比较麻烦； 3、很可能要定死高度； 所以，细细地看一看这个布局，想一想还是用DL.DT.DD作是合理的： 1、布局合理一些； 2、将来扩展很方便； 3、CSS一定很少； 试着写了写，看一看还行！在可控范围内！ 布局...