随笔分类 -  CSS

摘要：View Code * 职位描述： 您当前输入了 0 个文字。（字数统计包含HTML代码。） ... 阅读全文

摘要：我们用firbug浏览别人网站时会发现设计者会在很多地方使用inline-block。我们都知道inline是声明div是内联对象，block是声明块对象，那么inline-block是什么意思，即内联又成块？接下来做个测试，让我们了解一下三者的区别和作用吧：inline、block、inline-block的区别inlineinlineblockblockinline-blockinline-block我们发现内联对象inline给它设置height和width是没有用的，致使它变宽变大的原因是内部元素的宽高+padding。观察inline对象的前后元素我们会发现Inline不单独占一行， 阅读全文

摘要：CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名.CSS技巧1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。缺点是要控制内容不要换行2. margin加倍的问题设置为float的div在ie下设置的margin会加倍。这是一个ie6都 阅读全文

摘要：1.定位的专业解释：(1)语法 position:static|absolute|fixed|relative 从上面语法可以看出，定位的方法有很多种，它们分别是静态(static)，绝对定位(absolute)，固定(fixed)，相对定位(relative)。在这个教程里，我不逐一讲，只讲最常用也是最实用的两个定位方法：绝对定位(absolute)、相对定位(relative)。(2)说明 相对定位(relative)：相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 ... 阅读全文

摘要：CSS《精通CSS.DIV网页样式与布局》视频前5课总结：地对地导弹第一课：使用CSS控制页面：1，行内样式正文内容2，内嵌式 紫色、粗体、下划线、25px的效果1 紫色、粗体、下划线、25px的效果2 紫色、粗体、下划线、25px的效果23，链接式 CSS标题1 紫色、粗体、下划线、25px的效果1 CSS标题2 紫色、粗体、下划线、25px的效果21.css文件:H2{ color:#0000FF;}p{ color:#FF00FF;text-decoration:underline;font-weigth:bold;font-size:20px;}(注：rel：relationship的 阅读全文

摘要：《精通CSS.DIV网页样式与布局》视频6-10课总结图：元素定位（1）float:left/right;左浮动；脱离普通文档流向左浮动（即向左对齐）；float属性必须应用在块级元素上，也就是说浮动并不应用于行内元素，或者说当应用了float，那么这个元素将被指定为块级元素。一般页面排版时大的div块都会用到float:left/right；来进行排版，但是处于页面底端的脚本div块一般都会使用clear:both;来消除浮动影响。例如：页面已用div分好块：#container、#banner、#content、#links、#footer（#container中包含其他div块）如下图： 阅读全文

摘要：目标宽度÷上下文宽度=结果(比例宽度) 当前元素的像素宽度÷当前元素的父元素的像素宽度=当前元素的百分比宽度例如：[html] 原CSS：[css] #wrapper{width:1000px;}header{width:1000px;}aside{width:220px;float:left;}section{width:770px;float:right;}百分比宽度CSS：[css] #wrapper{width:98%;}//指定外围宽度，数值随意header{width:100%;}//套公式1000÷1000(这个1000是wrapper的宽度)=1= 阅读全文