当前位置:爱推吧 » Div+CSS

网站的建设离不开网页的布局和优化,WordPress工作站注重于CSS+Div布局,将给大家展示CSS+div布局过程中的一些技巧和精典的布局方式。

表格td 属性 noWrap 防止折行、撑开的方法

最近在使用表格的过程中,如果td元素里面的内容比较多,那么表格会被撑的好大,界面就不美观了,于是查了一下,发现可以使用nowrap这个属性来防止表格的td元素撑开。 nowrap是什么意思? HTML中td元素的nowrap属性表示禁止单元格中的文字自动换行。 但使用时要注意的是,td元素noWrap属性的行为与td元素的width属性有关。 td元素中nowrap属性的行为与td元素的width属性有关。如果未设置td宽度,则nowrap属性起作用的,如果设置...

ie7(8) z-index失效的解决办法

两个层叠加时在ie浏览器下z-index将失效。 解决办法: 父级元素加上position:relative;并设置z-index. 父级元素的z-index优先,其中包含的元素的z-index是相对于父级元素的index. <div style="position:relative;z-index=2"> <p style="position:absolute;z-index=99"> ...(要在上层显示的内容)</p> </div> <div style="position:relative;z-index=1"> ... </div> 上面的例子中,倘若将...

相对路径与绝对路径详解

表示文件路径的方式有两种,相对路径和绝对路径。在网页设计中通过路径可以表示链接,插入图像、Flash、CSS文件的位置。 相对路径:以当前文件所在位置为参考点,而建立出的目录路径。 绝对路径:以Web 站点根目录为参考点的目录路径。不管怎么引用,都只有一个url,如http://ituibar.com。 先来看 相对路径: 表示同级目录文件的引用 2.html和3.html在同一个文件夹下, 如果2.html链接到3.html,可以在2.html中这样写: <a h...

CSS2 :first-child 伪类用法实例

当有一个列表项时,您希望第一个元素与其它的列表项不一样时,您可以使用 :first-child 伪类来选择元素的第一个子元素。这个特定伪类很容易遭到误解,所以有必要举例来说明。考虑以下标记: <div> <p>These are the necessary steps:</p> <ul> <li>Intert Key</li> <li>Turn key <strong>clockwise</strong></li> <li>Push accelerator</li> &l...

CSS position:fixed固定定位用法实例

Position定位属性可以应用于所有的标签,以前一般都用绝对定位(position:absolute)或相对定位(position:relative)来进行排版、布局。关于布局的问题,你可以移步《消除div+css布局之定位与浮动的难点》查看。 对于固定定位(position:fixed)用的比较少,今天在用的时候,发现使用position:fixed,框的大小是随里面内容的多少进行变化,而不管你用的是div或span。而有时候,我们往往需要把应用position:fixed属性的标签表现...

用box-shadow实现框的阴影效果

随着CSS3的到来,越来越多的效果可以用css来实现,且实现起来也十分的方便。单纯的一个边框看起来呆板,千篇一律,没有美观可言,有了css3,那么你可以下面的一句代码就可以使有边框的块级元素显示阴影的效果。当然配上圆角的话,就更完美了,如果你想知道怎么实现圆角矩形,那么请移步《正确用PS绘制圆角矩形》。 边框的阴影效果,本站的 首页的分类或内页的引用等等均使用了box-shadow阴影效果。 代码如下: div{box-shadow:1...

实现文章内图片img居中的方法

img作为一个行内元素,用text-align:center;来设置居中显示是无效的,虽然有多种实现图片居中的方法,但是大多数的方法对于img来说是无效的。下面的代码让你实现img居中,且各个浏览器包括ie6,都行的通。 img{ display: block; margin-left: auto; margin-right: auto; } 好了,如果你也需要图片img居中,那么就去试试吧。

关键词”div css line-height”在百度排名下降的原因分析

前几天Era在WordPress工作站上发表了一篇名为《div+Css布局中行高line-height详解 》的文章,刚发完的前两天吧。我用的是360浏览器 应用盒子 里的站长工具查询一下关键词”div css line-height” ,”div line-height”和”css line-height”,其中关键词”div css line-height”在百度的排名是第二,”css line-height” 在百度中排名是第九,”div line-height”在百度排名也在前几页,昨天一查,悲剧了,前二十页都木了,伤心ing…!另外还...

div+Css布局中行高line-height详解

行高在div+Css布局中对很多人来说,都是一个比较难缠的属性,恰好今天在网上逛的时候发现ddcat的一篇文章介绍行高line-heigt,写得非常不错,所以就转载过来并加以整理供大家学习。 大片密密麻麻的文字往往会让人觉得乏味,因此适当地调整行高(line-height)可以减低阅读的困难与枯燥,并且使页面显得美观。行高指的是文本行的基线间的距离,但是文本之间的空白距离不仅仅是行高决定的,同时也受字号的影响。 1.1语法 line-heig...

一步让你行内元素的css修饰如此简单

行内元素在Div+Css布局中也是大量的存在,相对块框来说,行内元素更加不好用css修饰,行内元素又分置换元素与非置换元素,关于它们之间的区别,请移步《Html中的非置换元素与置换元素》。height,padding及margin在非置换元素中都不起作用,你只有使用font-size,line-height来设置它的高度,但是单行的行内元素line-height起的作用似乎不大,那我们应该怎么办?下面就用一行代码让你的行内元素的修饰如同块级元素一样简单,但是...