未来往事
人生的苦难是那么多,为了在灾难不期而至时不至于毫无能力,你必须更加努力! [2017年 第42周/共52周]

ul菜单居中_水平居中css样式

ul li导航菜单居中/水平居中css样式。这个方法较简单,是将容器转成display:inline-block行内块级元素,然后就可以直接用text-align:center使其达到水平居中效果,也是推荐的方法。

示例ul导航菜单HTML代码:

  1. <div class="nav">
  2. <ul>
......
+阅读全文

CSS样式优先级

一、CSS样式选择器优先级

ID选择器(形如#divMain{}) > 类(形如.divSpecial{}) > 标签(形如body{})

二、CSS文件的优先级

1、标有”!important”的规则有最高优先级
一个样式规则可以有一个”important”附带标签,表示该样式规则具有最高优先级。例如下面例子中,前景色被标为important。

  1. h1<

......
+阅读全文

高级CSS样式选择器

CSS选择器,CSS样式选择器,CSS选择器详解,高级CSS选择器,高级CSS选择器参考手册,CSS选择器参考指南

我们知道CSS 2 开始引入了属性选择器。属性选择器可以根据元素的属性及属性值来选择元素。简单的说即在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。本文主要描述CSS样式表中选择器的一些用法,当然你可能已经对CSS样式选择器不在生疏,但是通过本文你将能更好的掌握CSS样式的一些高级选择器使用。





......
+阅读全文

div+css不换行超出部分省略号显示避免半字

div+css不换行出现半字问题,推荐超出部分省略号显示:

在显示文章标题时,为了提高可视性,常常要将超长部分省略,并用title提示完整标题。以下代码可用来达到超长部分用省略号显示的效果。
style=”white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:break-all;”

不过,这段代码在部分早期FireFox版本下面不会出现省略号,而是直接将超长文字隐藏,而且会出现半个字现象。在部分版本Firefo......
+阅读全文

图片等比例缩放CSS样式:max-width:100%兼容IE6方法

图片自动等比例缩放css: max-width:100%兼容IE6、IE7、IE8、Firefox
CSS的防止图片撑破页面的代码,图片会自动按比例缩小适应当前容器的宽度。

max-width, min-width, max-height 和 min-heigh是CSS2的属性,它工作于IE7以及更高版本和或者Mozilla Firefox、Chrome等支持CSS2的浏览器,但不能与IE 6和更低版本IE浏览器兼容,比较常用的解决方案是通过CSS表达式让IE6实现相同的效果。例如:如果有一个或多个图像,显示图像的宽度应该......
+阅读全文

IE6 img标签png图片透明方法

在页面的< head>与< /head>之间加上
undefined
当然你也可以把以上js代码单独写入到文件中,然后进行引入,例如:
<script language="JavaScript" type="text/javascript" src="xxxx.js"></script>


在需要透明的png img标签处修改格式为(只是多了onload="fixpng(this)"而已):
undefined

补充说明:这种方法解决的是在html里面使用img标签时遇到的png透明问题。如果你需要解决css样式背景png透明问题请自行Google。......
+阅读全文

Chrome浏览器最小字体12px限制问题解决方法

在 DIV+CSS3 的布局中,我一直以为 IE6 是最难伺候的,一会这个 bug,一会那个 bug,如果能把 IE6 摆平了,那也就天下太平了,兼容其他的浏览器应该也就不成问题。但是,我在制作新的 bo-blog 主题中碰到了一个不属于 IE 的杯具问题,在 Firefox、Opera、Safari 甚至在 IE 下都能正常显示的页面居然在 Chrome 下错位了!?这是让人无法容忍的,我可以 kill IE,但我不能把 Chrome 也给 kill 了。

......
+阅读全文

全站黑白CSS样式代码

......
+阅读全文

DIV 居中|CSS中怎么让DIV居中

CSS定义DIV居中,我们一般情况所用的样式是
.xxx{margin:0 auto;}

今天遇到了一个问题是在MSIE中显示居左,但在FireFox下已经居中显示。经过一番排查发现原来EditPlus默认没有在HTML前加上DTD,于是IE就以HTML方式来解释而不是XHTML来解释文档。所以问题并不在CSS而在XHTML网页本身

加上下面这句后发现MSIE下也显示正常了:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
......
+阅读全文

带三角关闭按钮图标的内容提示框实例(Tips)

带三角关闭按钮图标的内容提示框实例(Tips)
+阅读全文

DIV水平垂直居中 CSS写法

HTML使用CSS让DIV水平垂直居中的方法

<html>

<head>

<title>DIV水平垂直居中</title>

<style>

body{font-size:12px; margin:0; padding:0;}

.div1{position:absolute;top:50%;left:50%;width:500px;height:300px; margin-top:-150px; margin-left:-250px; border:1px #999 solid; background:#CEE7FF;}

</style>

</head>

<body>

<div class="div1">
......
+阅读全文

CSS布局实例教程:DIV+CSS三列式页面布局的实现方法 详解

  首先我们大致的花了一个草图,理清一下思路。在实际操作中,你面对的可能不是草图,而是美工设计人员所设计的网站效果图,但大体上的结构是相当的,我们看下面的图片:

点击在新窗口中浏览此图片



图片文字说明:
我们将顶部和底部设置为宽度960px左右,并居中对齐,以适应更大分辨率的需要。将中部的三列,即左侧,主内容区,右侧。置于一个div容器中,并将此div设置为宽度960px左右,并居中对齐。再将此

......
+阅读全文

div水平居中及margin:0 auto参数说明

通过本文你将了解到div如何设置水平居中
margin:0 auto参数说明


很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其实就是~~水平居中的意思,呵呵!小一在这里说两个典型的错误引起的不能居中的问题:

1、没有设置宽度
<div style="margin:0 auto;"></div>

看看上面的代码,根......
+阅读全文

浅谈line-height 在各浏览器中的特性

通过阅读本文你将了解到line-height的五种定义方法及在各浏览器中的特性与最佳定义方法。

首先看2个问题:

1)line-height和font-size 有联系吗,什么联系?

2)line-height的继承特性有什么特殊性?

如果你对这2个问题很清楚的话,你可以跳过本文。

首先看看w3c的解释:line-height 属性设置行间的距离(行高,行间距)。

该属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。原始数字值指定了一个缩放因子,后代元素会继承这个缩放因子而不是计算值。什么是基线(baseline)?在我之前的一篇文章中已经给出了一个地址,如果不太清楚的话,可以去看看。一个重要的特性就是line-height可以被继承。

浏览器的默认值不一样

各个浏览器的默认值不一样(在1~1.2),所以我们看到的行高都不一样,也是由于这个原因,一般网站都有reset。

line-height有5种定义方式

1)div{line-height:nomal}就是默认的形式,不太推荐这种方式,因为各个浏览器都不一样,会有差异,firefox大概是34px。oprea大概是30px。

2)div{line-height:inherit}继承的方式,就是继承父级元素的形式,不定义的默认值,也不推荐这种方式。

3)div{line-height:150%} 百分比的形式,比较的灵活。/*基于当前字体尺寸的百分比行间距*/

4)div{line-height:20px} 长度的形式,关于常见的一些CSS中的长度单位,后面我将讲述一下。

5)div{line-height:1.5} 纯数字的方式,我推荐的方式,能适应各种。

关于继承特性

1)百分比的继承:继承下来的元素会忽略font-size的大小,都是用同一值。如下图所示:
点击在新窗口中浏览此图片

代码如下:
+阅读全文

list-style 属性详解及隐藏双倍边距

定义和用法:
list-style 简写属性在一个声明中设置所有的列表属性。


说明:
该属性是一个简写属性,涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素,所以在普通的 HTML 和 XHTML 中只能用于 li 元素,不过实际上它可以应用到任何元素,并由 list-item 元素继承。


可以按顺序设置如下属性:
      list-style-type

      list-style-position

      list-style-image

......
+阅读全文