1: 底部对齐的代码(相对于父块)： .box1 {border:1px #cccccc solid; width:500px; height:600px;position:relative;}.box2 {border-top:1px #cccccc solid; background:#f2f6fb; width:498px; height:22px; position:absolute; bottom:0;} 2： .box1 {border:1px #cccccc solid; width:500px; height:600px;}.box2 {border-top:1px #cccccc solid; border-bottom:0; background:#f2f6fb; width:500px; height:22px;}
如何使整个页面内容居中，如何使高度自适应内容自动伸缩，这是学习CSS布局最常见的问题。 下面给出一个实际的列子，附详细说明。 首先可以将下列代码复制到html文件中运行一下，在mozilla、opera和ie浏览其中，均可达到居中且自适应高度的要求。 body { background:#999; text-align:center; color:#333; font-family:Arial, Verdana, Sans-serif; } #header { wid...
前不就公司项目要求做一个比较蛋疼的布局，类似于window xp桌面图片布局方式，而且要求尽量不要用嵌入js脚本，用纯div+css布局，在不断探索和摸索下也只现实了IE8+,firfox, chrome浏览器，别的不多说，直接上代码。 1 2 3 4 5 window xp桌面图标布局 6 7 html,body{ margin:0; border:0; padding:0; width:100%; height:100%; } 8 .parent{ display:block; background:gray; width:100%; height:100%; } 9 .parent{10 ...
dropdown? /* common styling */ .menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;} .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;} .menu ul {padding...
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还有很...