其实很多写过前端页面的人都知道DIV和CSS其实特别简单，但是要想实现需求中的或者自己心中想象的效果，也决非易事。这里面有很多的技巧，如果你不熟悉和精通，那么你做出的页面将会达不到预期的效果，有时候会特别的难看。
首先我们来看一下DIV是啥玩意？
DIV是标记语言HTML中众多标签的一个，但是却是文档页面布局使用最频繁的一个标签。它可定义文档中的分区或者节，或者说可以将文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果使用id或者class来标记
，那么该标签的作用会变得更加有效。
是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是
固有的唯一格式表现。可以通过
的 class 或 id 应用你自定义的样式。当然你也不必为每一个
都加上类或 id，虽然这样做也有一定的好处。我们可以对同一个
元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。举个例子说，一个
可以使用多个class属性样式，但是只能使用一个id属性样式。
其次我们来看CSS是什么鬼？
上面介绍DIV的时候已经提到了CSS的一些东西，我们在给HTML页面元素添加样式的时候，经常使用的无非就是标签选择器、id选择器和类选择器。这几种选择器各有自己的特点：如果是统一样式，则使用标签选择器最好，他可以将页面所有相同标签的样式进行统一；而id选择器则提供了更为方便的个性化样式定义，至于class选择器就是多样化的样式定义了，因为CSS允许使用多个类选择器的样式定义，当然class选择器也具有“继承性”，能够派生出不同风格的样式。
可能说的有些抽象，没动过手的也许体会不到，下面我们来看几个例子：
/*标签选择器*/body{ background-color:#2a3a00; /* 深绿色背景 */ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:12px;}img{ margin:0px; padding:0px; border:none;}/*id选择器*/#pic{ position:absolute; top:5%; left:0%; width:100%; background:url(middle_bg.jpg) repeat-x; /* x方向重复 */}/*class选择器*/.center {text-align: center} 标题说的狂拽炫酷吊炸天的网页在哪里？下面给出几个例子，来展示一下CSS+DIV的威力：
模仿Google的logo
来看一下代码
Google p{ font-size:80px; letter-spacing:-2px; /* 字母间距 */ font-family:Arial, Helvetica, sans-serif;}.g1, .g2{ color:#184dc6; }.o1, .e{ color:#c61800; }.o2{ color:#efba00; }.l{ color:#42c34a; } G o o g l e
模仿网站首页的设计
我们看看这个背后的页面代码，其实很简单，但是页面就是做的好看
World Word
查看更多关于CSS+DIV：实现炫酷网页样式与布局_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did108884