div+css页面布局练习*{margin:0px; padding:0px;}#top,#nav,#mid,#footer{ width:500px; margin:0PX auto;}#top{height:80px; background-color:#F0F;}#nav{height:25px; background-color:#0FF;}#mid{height:300px;}#left{width:98px; height:298px; border:1px solid #FF0; background-color:#00F; float:left;}#right{ height:298px; background-color:#900;}.content{width:98px; height:148px; background-color:#030; borde...
一、善用css缩写规则 /*注意上、右、下、左的书写顺序*/ 1. 关于边距（4边）： 1px 2px 3px 4px (上、右、下、左) 1px 2px 3px （省略的左等于右） 1px 2px (省略的上等于下) 1px （四边都相同） 2. 简化所有： */ body{margin:0}------------表示网页内所有元素的margin为0 #menu{ margin:0}------------表示menu盒子下的所有元素的margin为0 3. 缩写（border）特定样式： Border:1px sol...
(4). 多重阴影效果 box-shadow可以同时使用多次，我们来个四色的阴影。img{box-shadow:-10px 0 10px red, box-shadow:10px 0 10px blue,box-shadow:0 -10px 10px yellow,box-shadow:0 10px 10px green}
今天看到一个Div+CSS 布局的经典教程，奉献给大家，本人一向偏好DIV+CSS，但由于关注seo 和网站运营较多，造成了DIV+CSS 做网页模板的技术生疏，为了培养自己成全才，不得不好好消化一翻，其实很简单滴。这个DIV+CSS 布局教程很不错。教程共分5 节，其实就一点点内容，不过通过学习，一定能让你领会到DIV+CSS的精髓，不要嫌文字多，一个小时一定能让你学完，当然是针对熟悉网页制作基础的朋友。在网页制作中，有许多的术语，例如：...
一、CSS文件及样式命名 1、CSS文件命名规范 全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css； 2、CSS样式命名规范本人建议：用字母、_号工、-号、数字组成，必须以字母开头，不能为纯数字。为了开发后样式名管理方便，大家请用有意义的单词或缩写组合来命名，让同事一看就明白这样式大概是哪一块的，这样就节省了查找样式的时间，例如： 头部样式用header，...
简介 如果你经常网上冲浪，这样参差不齐的多栏布局，是不是很眼熟啊？ 类似的布局，似乎一夜之间出现在国内外大大小小的网站上，比如 Pinterest (貌似是最早使用这种布局的网站了)，Mark之，蘑菇街，点点网，以及淘宝最新上线的“哇哦” 等等，倒是很流行哈~ 在淘宝即将上线的众多产品中，你还会大量看到这样的形式呢。 这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不...
DIV+CSS的30条进阶技能 许许多多的网页新手正徘徊在专业编码的门槛前，而网上的教程参差不齐，鱼龙混杂，很容易让新手迷茫。这里总结了30条网页编码的“秘技”，只要在编码过程中牢记它们，灵活运用，你一定会写出一手漂亮的代码，早日迈入专业开发者的行列。 1. 一定要闭合标签 在以往的页面源代码里，经常看到这样的语句： Some text here. Some new text here. You get the idea. 也许过去我们可以容忍这样的非闭合标...
div+CSS绝对定位absolute属性 绝对定位就是和文档中的元素没有任何关系，完全脱离的文档中的内容，独立出来显示在某个固定的区域。绝对定位的块也可以嵌套，嵌套内的块将会以父元素作为参照位置绝对定位。 例如： CSS代码： body{ background-color:#FFFFFF; } .x{ position:absolute; width:200px; background-color:#CCCCCC; top:100px; height:20px; } .xx{ position:absolute; width:200px; background-color:#999999; top:...
1、 文本、图片等行内元素的水平居中 给父元素设置text-align:center；即可实现居中，例如： 自由飞翔 若要实现自由飞翔四字的居中，只需在样式中写.top{text-align:certer;} 2、 确定宽的块级元素的水平居中 需设置marin属性，为margin：0 auto； 例如：内容 若要实现整个div块的水平居中，而定义块宽为70px，需在样式中写入.top{width:70px; margin:0 auto;} 3、 不确定宽度的块级元素的水平居中 有...
写在前面的话：由于个人兴趣爱好，学习Web编程一些知识，自己做一些笔记来记录学习的过程。如果大家哪里不懂或者是有错误的地方，欢迎指正。同时乐意同大家相互交流编程的一些经验。 笔记正式开始：在很早的网页编程中，人们编程用到的网页布局一般是table式的布局。但是由于table布局的一些缺点，慢慢的table这种布局被DIV+CSS的布局方式所代替。但是table并未被废除，而是融合到了DIV+CSS的布局方式中去，因为table在显示数据的...
学习了div+css布局以后，总会出现跨浏览器测试页面差异太大的问题，学习了这章之后，知道了差异的来源。 部分css属性在不同的浏览器解析的结果会有差异，是由于个别浏览器的开发商对一些css属性的解析没有按w3c的标准设计，可以使用的浏览器有很多种，但通常在页面布局调试时，将其划分为IE和非IE两类即可。主要原因是微软公司的IE浏览器没有按W3C的标准设计，而非IE的浏览器几乎都是符合W3C标准的，另外，更令人发恼的死IE还有很...
1. 四种框的存在： （1）块元素的框； （2）内联元素的框； （3）行内框；（和内联元素的框不同） （4）行框。 2. 按照标准，行内框中的文字是居中显示的。即行内框的上边和文字顶部的距离应该是行距（文字底部和下行文字顶部的距离）的一半。 但是在不同浏览器下，文字的位置会和正中间有1到2个像素的差别，由于这种差别很小，可以忽略不计。 3. 若没有设置height。 （1）块元...
无标题 1* { margin: 0; padding: 0;}body { margin:30px; font:14px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体, sans-serif;}.main { overflow: hidden; width: 500px; margin: 0 auto;}.left { float: left; width: 250px; overflow: hidden;}.right { float: right; width: 245px; overflow: hidden;}.bor_top { height:1px; background:#FB9D51; overflow:hidden;}.equal { padding-bottom: 32767px; margin-bottom: -32...
CSS层叠样式表 优势：使页面结构和表现分离1.引入方式： 1）行内样式：Hello World 2）内部样式： h2{ color:#F00; } 3）外部样式： 推荐 @import url("a.css"); // @import “a.css”; 问题：link和@import的区别： Link和@import的区别： ...
#head{height:40px;background-color:#0033CC;margin:0;}#content{background:#CCCCCC;height:200px;margin:0;}#left{width:20%;height:200px;background:#CCCC66;float:left;margin:0;}#c{width:60%;height:200px;background:red;margin:0;float:left;}#right{width:20%;height:200px;background:#339966;float:right;margin:0;}#foot{background:#0099CC;height:40px;margin:0;}head left content rigthfoot