DIV+CSS 网页布局_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 12:32:111121浏览
----------------------------------------------------------------------------------------------------------------------------
***********************************************************************************************************
前言：为方便大家学习css，我的朋友凌雨草特花了些时间为大伙的制作一个方便的txt教程。其实div+css布局，主要就是会用css贝，你学会了他写的
教程一般的div+css布局就没啥不明白的了。再加上自己多做了例子就可以拿出手了。嘿嘿，这些都是些基础技术，供小虾学习用的了。
***********************************************************************************************************
----------------------------------------------------------------------------------------------------------------------------
什么是样式表：
CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
----------------------------------------------------------------------------------------------------------------------------
如何将样式表加入您的网页：
你可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。例外请参阅 !important 声明。
----------------------------------------------------------------------------------------------------------------------------
一。你可以先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下：
二。定义内部样式块对象
三。内联定义
这一行被增加了左右的外补丁
----------------------------------------------------------------------------------------------------------------------------
属性：
1.字体：
font-family: "宋体";
color:#ff0000;
font-size:12px;
font-style: inherit;/*正常*/
font-style:italic;/*斜体*/
font-style: oblique;/*偏斜体*/
font-style:inherit;/*默认继承父对象属性*/
font-weight:lighter;/*字体粗细,相当于400*/
font-weight:900;/*字体粗细*/
font-weight:bold;/*粗体,相当于700,相当于*/
font-weight:bolder;/* 比normal >粗*/
font-weight:lighter;/*比 normal >细 */
text-decoration:overline;/* 默认值*/
text-decoration:inherit;/*默认继承父对象属性*/
text-decoration:blink;/* 闪烁*/
text-decoration:underline;/*下划线*/
text-decoration:line-through;/*贯穿线*/
text-decoration:overline;/*上划线*/
line-height: normal;/*默认行高*/
line-height:21px;/*21px高*/
letter-spacing: 2px;/*字体间距*/
word-spacing:2px;/*英文字体间距*/
2.文本:
text-align:left;/*文本左对齐*/
text-align:right;/*文本右对齐*/
text-align: center;/*文本居中对齐*/
text-align:inherit;/*默认父对象的属性*/
text-align:justify;/*文本两端对齐*/
text-indent:inherit;/*默认父对象的属性*/
text-indent:10px;/*文本缩进10像素*/
vertical-align : middle;/*垂直居中对齐*/
word-wrap: break-word;/*纯英文字母也会换行*/
3.背景:
background-attachment:fixed;/*背景固定*/
background-attachment:scroll;/*背景滚动*/
background-color:#ffffff;/*背景颜色*/
background-image:url(未标题-1.gif);/*背景图片*/
background-position:center;/*背景图片居中*/
background-repeat:no-repeat;/*背景图不重复*/
background:transparent none repeat scroll 0% 0%/*默认值*/
4.定位
position:absolute;/*绝对定位;不占空间；可重叠*/
position:relative;/*静态定位;存空间；不重叠*/
position:static;/*默认值*/
z-index: auto;/*默认你对象的属性*/
z-index:1;/*放到第一层(可以看看photoshop的层一个道理)*/
top:auto;/*默认*/
left:auto;/*默认*/
bottom:auto;/*默认*/
right:auto;/*默认*/
5.尺寸
height:auto;/**/
max-height:200px;/*最大高*/
min-height:100px;/*最小高*/
width:auto;/**/
max-height:200px;/**/
min-height:100px;/**/
6.布局
clear:both;/*清除两边浮动*/
float:left;/*左浮动*/
overflow:visible;/*默认的。都显示*/
overflow:hidden;/*不显示超出尺寸的内容*/
display:block;/*做为块对象*/
display:inline;/*做为内联对象*/
visibility: visible;/*显示对象*/
7.内外补丁,伪对象,边框,列表
margin:auto;
padding:0px;
a:link{};/*正常时*/
a:visited{};/*点击后*/
a:hover{};/*指向时*/
a:active{};/*点击与释放之间发生*/
a:focus {};/*得到输入焦点时，*/
border:1px solid #FF0000;
list-style-image: url("images/ie.gif");
list-style-position:outside/*默认的在文字外*/
list-style-position: inside; /*的在文字内*/
list-style-type: disc/*实心圆*/
----------------------------------------------------------------------------------------------------------------------------
**********************************************************
兼容浏览器的方法:
常用方法1:
#wrapper
{
width: 100px!important; /* IE7+mozillafirefox */
width: 80px; /* IE6 */
}
或
#wrapper{
margin:0 0 3px !important;margin:0 0 10px/* 前面是IE7+mozillafirefox,后面是IE6 */
}
--------------------------------------------------------
常用方法2：
#1 { color: #333; } /* mozillafirefox */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
--------------------------------------------------------
常用方法3[显示html+css]:
1. 除IE外都可识别
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
**********************************************************
注意的事项:明白继承性。记得清除两端浮动.用常规的属性.知道以上的内容，你就已经算学会css了。http://validator.w3.org/上这个网站检查是不是合格了的xhmtl语言.作者：凌雨草 QQ:477764498 E-mail:lingyucao@yahoo.cn
----------------------------------------------------------------------------------------------------------------------------
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
想成高手，再向下看吧!css写标点儿，就不咋用调bug了。
1.ul的默认用的宽为width:auto;
2.清除浮动的层加上line-height:0px;font-size:0px;
3.body中记得有字体
4.清除浮动的层加上一定不能有height:0px;
5.有宽高的层不要用padding.
6.无宽高的层默认不用width:auto width:100%
7.width:100%,height:100%完全撑满父对象. width100%对ie5偶尔有问题
8.height:auto针对当前对象内元素。width:100%针对父对象.
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
----------------------------------------------------------------------------------------------------------------------------
1.CSS字体属性简写规则一般用CSS设定字体属性是这样做的：
font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;
但也可以把它们全部写到一行上去：
font: bold italic small-caps 1em/1.5em verdana,sans-serif;
真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。
2. 同时使用两个类
一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：
…
同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。
补充：对于一个ID，不能这样写
…
也不能这样写3. CSS border的缺省值
通常可以设定边界的颜色，宽度和风格，如：
border: 3px solid #000
这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。
如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。
4. CSS用于文档打印
许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。
也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：
第1行就是显示，第2行是打印，注意其中的media属性。
但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。
5. 图片替换技巧
一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。
比如你想整个卖东西的图标，你就用了这个图片：
这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：
Buy widgets
但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：
h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }
注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。
6. CSS box模型的另一种调整技巧
这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：
#box { width: 100px; border: 5px; padding: 20px }
这样调用它：
这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。
但用CSS也可以达到同样的目的，让它们显示效果一致。
#box { width: 150px } #box div { border: 5px; padding: 20px }
这样调用：
这样，不管什么浏览器，宽度都是150点了。
7. 块元素居中对齐
如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：
#content { width: 700px; margin: 0 auto }
你会使用
body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }
这会把网页内容都居中，所以在Content中又加入了:text-align: left 。
8. 用CSS来处理垂直对齐
垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。
CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。
9. CSS在容器内定位
CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：
#container { position: relative }
这样容器内所有的元素都会相对定位，可以这样用：
如果想定位到距左30点，距上5点，可以这样：
#navigation { position: absolute; left: 30px; top: 5px }
当然，你还可以这样：
margin: 5px 0 0 30px
注意4个数字的顺序是：上、右、下、左。当然，有时候定位的方法而不是边距的方法更好些。
10. 直通到屏幕底部的背景色
在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS：
#navigation { background: blue; width: 150px }
较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？
不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。
body { background: url(blue-image.gif) 0 0 repeat-y }
----------------------------------------------------------------------------------------------------------------------------
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
想成高手，再向下看吧!
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
----------------------------------------------------------------------------------------------------------------------------
使用 line-height 垂直居中
line-height:24px;
使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致），更多的垂直居中总结可以看这里。
清除容器浮动
#main {
overflow:hidden;
}
期前也提到过这样的问题，更多信息可以看这里。
不让链接折行
a {
white-space:nowrap;
}
上面的设定就能避免链接折行，不过个人建议长链接会有相应的这行（有关换行方面的讨论，参看圆心的记录）。
始终让 Firefox 显示滚动条
html {
overflow:-moz-scrollbars-vertical;
}
更多的 Mozilla/Firefox 私有 CSS 属性可以参考这里。需跨浏览器的支持，也可以使用
body, html {
min-height:101%;
}
使块元素水平居中
margin:0 auto;
其实就是
margin-left: auto;
margin-right: auto;
这个技巧基本上所有的 CSS 教科书都会有说明，别忘记给它加上个宽度。Exploer 下也可以使用
body{
text-align: center;
}
然后定义内层容器
text-align: left;
恢复。
隐藏 Exploer textarea 的滚动条
textarea {
overflow:auto;
}
Exploer 默认情况下 textarea 会有垂直滚动条（不要问我为什么）。
设置打印分页
h2 {
page-break-before:always;
}
page-break-before 属性能设置打印网页时的分页。
删除链接上的虚线框
a:active, a:focus {
outline:none;
}
Firefox 默认会在链接获得焦点（或者点击时）加上条虚线框，使用上面的属性可以删除。
最简单的 CSS 重置
* {
margin: 0; padding: 0
}
----------------------------------------------------------------------------------------------------------------------------
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
想成高手，再向下看吧!
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
----------------------------------------------------------------------------------------------------------------------------
单行一列
以下是引用片段：
body { margin: 0px; padding: 0px; text-align: center; }
#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
两行一列
以下是引用片段：
body { margin: 0px; padding: 0px; text-align: center;}
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;}
#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}
三行一列
以下是引用片段：
body { margin: 0px; padding: 0px; text-align: center; }
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
#content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
单行两列
以下是引用片段：
#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }
#bodycenter #dv1 {float: left;width: 280px;}
#bodycenter #dv2 {float: right;width: 410px;}
两行两列
以下是引用片段：
#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}
#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
#bodycenter #dv1 { float: left; width: 280px;}
#bodycenter #dv2 { float: right;width: 410px;}
三行两列
以下是引用片段：
#header{ width: 700px;margin-right: auto; margin-left: auto; }
#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }
#bodycenter #dv1 { float: left;width: 280px;}
#bodycenter #dv2 { float: right; width: 410px;}
#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
单行三列
绝对定位
以下是引用片段：
#left { position: absolute; top: 0px; left: 0px; width: 120px; }
#middle {margin: 20px 190px 20px 190px; }
#right {position: absolute;top: 0px; right: 0px; width: 120px;}
float定位一
xhtml:
以下是引用片段：
CSS:
以下是引用片段：
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
float定位二
xhtml:
以下是引用片段：
This is the main content.
This is the left sidebar.
This is the right sidebar.
CSS:
以下是引用片段：
body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}
.column {position: relative;float: left;}
#center {width: 100%;}
#left {width: 180px; right: 240px;margin-left: -100%;}
#right {width: 130px;margin-right: -100%;}
两行三列
xhtml:
以下是引用片段：
CSS:
以下是引用片段：
#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
三行三列
xhtml:
以下是引用片段：
CSS:
以下是引用片段：
#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
#footer{width:100%; height:auto;}
*************************************************************************************************************************
想成为高手，继续向下看。
*************************************************************************************************************************
扩展框问题这样排版容易导致 扩展框问题.
尽量定义宽高给定值
* 浮动下降问题
加上 ｛float：left；｝ 即可```
IE6的双倍边距BUG
解决办法是加上display:inline
IE6下为什么图片下方有空隙产生
解决这个BUG的方法也有很多，可以是改变html的排版，或者设置img 为display:block或者设置vertical-align属性为vertical-align:top | bottom |middle |text-bottom都可以解决.
IE6下这两个层中间怎么有间隙
这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left
如何对齐文本与文本输入筐
遇到此种问题，设置文本框的 vertical-align:middle 就可以了
为什么FF下文本无法撑开容器的高度
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义：
{
height:auto!important;
height:200px;
min-height:200px;
}
怎么样才能让层显示在FLASH之上呢
解决的办法是给FLASH设置透明或者
怎样使一个层垂直居中于浏览器中
使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二.
方法二:首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，
只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
{
width:300px;
margin-left:auto;
margin-right:auto;
}
针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，
但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针
对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
现在写一个CSS可以这样：
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。
页面的最小宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，
而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个
然后CSS这样设计：
#container{ min-width: 600px; width:expression(document.body.clientWidth 第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
最狠的手段 - !important;
如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.
关于容器的包涵关系
很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。
1.写两句代码来控制一个属性，区别Firefox与IE：
background:orange; *background:green;
//这一句代码写出来时，你用Firefox浏览，会发现背景是橙色的，而IE里却是绿色的，很简单，因为Firefox不能识别*，而IE6，IE7都可以识*,标准浏览器(如Firefox,Opera,Netscape)不能识别*;。
2.写两句代码来控制一个属性，区别IE7与IE6：
background:green !important;background:blue;
//这一句代码写出来时，你用IE7浏览，会发现，写了该代码的区域背景是绿色的，如果用IE6浏览，却是蓝色的，这是因为IE7能识别!important*，一但识别了，就执行，忽略了后面的那一句，但IE6却不能识别!important，所以前面部分跳过，直接执行了后半部份.
3.写三句代码来控制一个属性，区别Firefox，IE7，IE6：
background:orange;*background:green !important;*background:blue;
//这一句会使在Firefox在，背景呈橙色，IE7中为绿色，IE6中为蓝色，道理和前面一样，Firefox不能识别*，所以后面两句都不执行，直接执行第一句，IE7当然也能执行第一行代码，但是因为第二句，他也能识别，所以就执行了第二句代码，把前面的效果给过滤了，而最后一句，IE7是不能识别的。IE6不能识别!imprtant，本来运行了第一句代码了，第二句不能识别，那就理所当然的执行了最后一句。
注：IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*；IE6能识别*，但不能识别 !important,IE7能识别*，也能识别!important;FF不能识别*，但能识别!important;
***********************************************************************************************************************