展开菜单

详细介绍css display:block的用法

根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级”元素(block-level);而span元素的默认display属性值为“inline”,称为“行内”元素。 块级元素: 动占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形的样子; 行内元素: 自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度、宽度、内外边距等属性,都是无效的。 ...

div嵌套导致子区域margin-top失效不起作用的解决方法

有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会“转移”给外层div,使父元素产生上外边距。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

实现网页布局的自适应@media screen各max-width和min-width大小

不同分辨率设备或不同窗口大小下布局 @media screen and(min-width:1200px) { } @media screen and(min-width:960px)and(max-width:1199px) { } @media screen and(min-width:768px)and(max-width:959px) { } @media only screen and(min-width:480px)and(max-width:767px) { } @media only screen and(max-width:479px) { }

CSS3选择器nth-child(n)实现隔几行选择元素

nth-child(n),n 可以是数字、关键词或公式。选择器匹配属于其父元素的第N个子元素,不论元素的类型。 序号写法: li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/ 倍数写法: li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/ 倍数分组匹配: li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/ li:nth-child(3n+5...

list-style-image失效background替换方法

使用css+html制作网页时,经常会出现css代码在某浏览器没有效果的情况,如list-style-image代码就经常不能显示出图标,有些时候是因为使用了float的原因,有些时候却难以发现是什么原因。解决的方法一般是使用background背景图片的方法。 如以下css代码: #sidebar ul {margin:15px 0;} #sidebar ul li {line-height:1.5em; padding-left:10px; background:url(images/post.jpg) no-repeat center left; font-...

jQuery hover改变div边框颜色

今天在做一个网页,需要用到鼠标悬浮hover改变当前div边框颜色,由于IE6之类的浏览器不支持非a以外的伪类,所以就用jQuery实现。刚开始使用addClass添加样式的方法,发现不能成功,后来就直接通过jquery给当前div添加一个border的样式。 实现效果的方法: $(document).ready(function() { $('.themelist').hover(function() { $(this).addClass('add'); },function(){ $(this).removeClass('add'); });...

CSS overflow 属性介绍

overflow 属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。overflow属性默认值为auto 设置 overflow 属性: div { width:960px; height:150px; overflow:scroll; } overflow其它值如下: visible     默认值。内容不会被修剪,会呈现在元素框之外。 hidden...

DIV+CSS单行文字怎么垂直居中?CSS单行文字垂直居中的方法

DIV+CSS里单行文字垂直居中仅需要在DIV添加height属性后再添加个line-height属于就可以了。 #neirongorg {height:25px;line-height:25px;} 仅需要这样就可以达到单行文字垂直居中的效果。也可以应用到DIV垂直居中里。 也可以使用Vertical center现实,不它只对(X)HTML元素中拥有valign特性的元素才会生效,如表格元素中的td、th、caption等,但像span、div这样的元素是没有valign特性的,所以使用vertical-align对它们也就不起作...

在IE6中使用了float浮动元素导致margin产生双边距的解决方法

使用CSS+DIV制作网页的时候,由于目前浏览器太多,每个浏览器都有不同的CSS的BUG问题,其中IE浏览器特别多,加上用户总坚持着老版本不放,也加重了网页设计师的麻烦。float浮动之后margin产生双边距便是IE6中很明显的BUG。 什么是双边距? 先看以下CSS代码: #neirong{float:left;width:250px;height:250px;margin:10px;} 表示宽高为250像素的DIV左浮动,上右下左的边距margin为10像素。在其它浏览器中会如实显示,但在IE6中,左边距会变成20像素。这便是双边距。 产生的条件。 对于I...

CSS 实现logo图像链接替换文本链接

现在的网页设计一般用logo图片代码纯文本链接,而大部分网页设计师是直接在网页相关位置使用(&lt;img src="images/logo.gif"&gt;)实现的,其实更好的方法是直接使用CSS设置其背景图片,然后再对a标签进行样式定义,这样即利于搜索引擎辨别,也利于以后的变动修改。 如何利于CSS实现logo图片链接替换纯文本链接: 原html代码如下: <div id="logo"> <a href="http://neirong.org" title="资源共享"><img src="images/logo.gif"...

CSS中border-collapse:collapse;作用是什么?

border-collapse:collapse; 作用:用于表格属性, 表示表格的两边框合并为一条;然后可以对表格应用border属性!