![[css]画房子作者再画新房](http://cache.promiseforever.com/wp/images/image-628x250-1-/wp-content/uploads/2008/02/111_2008-02-06_201640.jpg.jpg)
![[css]画房子作者再画新房](http://cache.promiseforever.com/wp3/images/image_shadow.png)
代码打包下载：附件:
阅读全文 »![[css]Div+CSS网站设计的优点](http://cache.promiseforever.com/wp/thumb/html.png)
Div+CSS网站设计的优点 业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？ Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。 <DIV>Text</DIV> 如果单独使用 DIV 而不加任何 CSS, 那么它在网页中的效果和使用 <P></P> 是一样的。 DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码 CSS是Cascading style Sheets的简称，中文译作“层叠样式表单”，在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。网上冲浪无论你用Internet Explorer还是Netscape Navigator，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。不管你用什么工具软件制作网页，都有在有意无意地使用 CSS。用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB。 Div+CSS标准的优点: 1.大大缩减页面代码，提高页面浏览速度,缩减带宽成本; 2.结构清晰，容易被搜索引擎搜索到，天生优化了seo 3.缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。 4.强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了，有了CSS，我们不再需要用FONT标签或者透明的1 px GIF图片来控制标题，改变字体颜色，字体样式等等。 5.CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。 6.提高易用性。使用CSS可以结构化HTML，例如： 标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。 7.可以一次设计，随处发布。你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。 8.更好的控制页面布局。不用多说。 9.表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。 10.更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。 11.Table 布局灵活性不大，你只能遵循 table tr td 的格式。而div 你可以 div ul li 也可以 ol li 还可以 …
阅读全文 »![[css]CSS中写入JS](http://cache.promiseforever.com/wp/thumb/css.png)
<!– /* window.onload=function(){ document.getElementById("test2").innerHTML="传说中滴JS测试者。如果你看到我，那<strong>JS</strong>也生效了"; } <!– */ <!– #test1,#test2{border:3px #000 solid;padding:5px;color:#123456;background-color:#ccc;} strong{color:red;} …… CSS处理时会忽视掉
阅读全文 »![[css]CSS2.0盒模型](http://cache.promiseforever.com/wp/images/image-628x250-1-/wp-content/uploads/2008/01/box.jpg.jpg)
css的盒子模型已经说了很长的时间了，但是到底什么是盒子呢，看看下面的图就明白了 盒子在网页中的实际占用宽度=2*margin+2*border+2*padding+width FLASH附件:
阅读全文 »1．overflow内容溢出时的设置 //水平方向内容溢出时的设置 overflow-x //垂直方向内容溢出时的设置 overflow-y 以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。 2．scrollbar-3d-light-color立体滚动条亮边的颜色 //以下七个属性设置的值都是颜色值，可以使用样式表定义的各种表达方式。 //上下按钮上三角箭头的颜色 scrollbar-arrow-color //滚动条的基本颜色 scrollbar-base-color //立体滚动条强阴影的颜色 scrollbar-dark-shadow-color //立体滚动条凸出部分的颜色 scrollbar-face-color //滚动条空白部分的颜色 scrollbar-highlight-color //立体滚动条阴影的颜色 scrollbar-shadow-color 使用以上的样式定义内容，我们可以指定浏览器窗口、多行文本框的滚动条的显示与否和颜色样式，第一组样式属性用于设定被设定对象是否显示滚动条，第二组样式属性则用于设置滚动条的颜色，要注意的本文涉及的样式属性都是ie才能支持的，第二组的样式属性只有ie5.5版本才能支持，所以请大家在调试的时候注意。 我们通过几个实例来讲解上述的样式属性： 1.让浏览器窗口永远都不出现滚动条 //没有水平滚动条 <body style="overflow-x:hidden"> //没有垂直滚动条 <body style="overflow-y:hidden"> //没有滚动条 <body style="overflow-x:hidden;overflow-y:hidden">或<body style="overflow:hidden"> 2.设定多行文本框的滚动条 //没有水平滚动条 <textarea style="overflow-x:hidden"></textarea> //没有垂直滚动条 <textarea style="overflow-y:hidden"></textarea> //没有滚动条 <textarea style="overflow-x:hidden;overflow-y:hidden"></textarea> //或 <textarea style="overflow:hidden"></textarea> 3.设定窗口滚动条的颜色 //设置窗口滚动条的颜色为红色 //scrollbar-base-color设定的是基本色， //一般情况下只需设置这个属性就可以达到改变滚动条颜色的目的。 …
阅读全文 »![[css]彻底弄懂CSS盒子模式(DIV布局快速入门)](http://cache.promiseforever.com/wp/images/image-628x250-1-/wp-content/uploads/2007/09/css.gif.jpg)
转载唐大大的经典文章。 彻底弄懂CSS盒子模式(DIV布局快速入门) 作者：唐国辉 实例网页网址：http://www.hsptc.com/css2.html 前言 如果你想尝试一下不用表格来排版网页，而是用CSS来排版你的网页，也就是常听的用DIV来编排你的网页结构，又或者说你想学习网页标准设计，再或者说你的上司要你改变传统的表格排版方式，提高企业竞争力，那么你一定要接触到的一个知识点就是CSS的盒子模式，这就是DIV排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器，比如PDA设备也能正常浏览，所以放弃自己之前钟爱的表格排版也是值得的，更重要的是CSS排版网页的优势远远不只这些，本人在这里就不多说，自己可以去查找相关信息。 理解CSS盒子模型 什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。 CSS盒子模式 这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。 由“盒子”堆出来的网页版面 现在对CSS盒子模式理解多少了，如果还不够透彻，继续往下看，我会在后面举例，并延用盒子的概念来解释它。 转变我们的思路 传统的前台网页设计是这样进行的：根据要求，先考虑好主色调，要用什么类型的图片，用什么字体、颜色等等，然后再用Photoshop这类软件自由的画出来，最后再切成小图，再不自由的通过设计HTML生成页面，改用CSS排版后，我们要转变这个思想，此时我们主要考虑的是页面内容的语义和结构，因为一个强CSS控制的网页，等做好网页后，你还可以轻松的调你想要的网页风格，况且CSS排版的另外一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。如果你想说我的网页设计的很复杂，到后来能不能实现那样的效果？我要告诉你的是，如果用CSS实现不了的效果，一般用表格也是很难实现的，因为CSS的控制能力实在是太强大了，顺便说一点的是用CSS排版有一个很实用的好处是，如果你是接单做网站的，如果你用了CSS排版网页，做到后来客户有什么不满意，特别是色调的话，那么改起来就相当容易，甚至你还可以定制几种风格的CSS文件供客户选择，又或者写一个程序实现动态调用，让网站具有动态改变风格的功能。 实现结构与表现分离 在真正开始布局实践之前，再来认识一件事——结构和表现相分离，这也用CSS布局的特色所在，结构与表现分离后，代码才简洁，更新才方便，这不正是我们学习CSS的目的所在吗？举个例来说P是结构化标签，有P标签的地方表示这是一个段落区块，margin是表现属性，我要让一个段落右缩进2字高，有些人会想到加空格，然后不断地加空格，但现在可以给P标签指定一个CSS样式：P {text-indent: 2em;}，这样结果body内容部分就如下，这没有外加任何表现控制的标签： <p>加进天涯社区有一段时间了，但一直没有时间写点东西，今天写了一篇有关CSS布局的文章，并力求通过一种通俗的语言来说明知识点，还配以实例和图片，相信对初学CSS布局的人会带来一定的帮助。</p> 如果还要对这个段落加上字体、字号、背景、行距等修饰，直接把对应的CSS加进P样式里就行了，不用像这样来写了： <p><font color="#FF0000" face="宋体">段落内容</font></p> 这个是结构和表现混合一起写的，如果很多段落有统一结构和表现的话，再这样累加写下去代码就繁冗了。 再直接列一段代码加深理解结构和表现相分离： 使用CSS排版 <style type="text/css"> <!– #photoList img{ height:80; width:100; margin:5px auto; } –> </style> <div id="photoList"> <img src="01.jpg" /> <img src="02.jpg" /> <img src="03.jpg" /> <img src="04.jpg" /> <img src="05.jpg" …
阅读全文 »
