CSS - 教程之家

222浏览

0评论

CSS文字两端对齐

css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法text-justify:auto|distribute|distribute-all-...

2018-08-14

525浏览

0评论

CSS如何正确显示人民币符号￥

我们做网页时要正确显示人民币符号可以用如下办法：CSS：在中文输入法下用shift+4输出的￥在微软雅黑（Microsoft YaHei），华文细黑（STXihei），（MingLiu）这几个字体下能正确显示 font-family:...

2018-08-14

279浏览

0评论

IE6 IE7 IE8图片等比例缩小问题

IE7、IE8设置max-width后，把高度设为auto,当图片宽度超过设置的最大宽度后，会自动缩小到设置的max-width值，但是高度并没有我们预想的按比例缩小。而在firefox中却可以完美的按...

2018-08-14

229浏览

0评论

是否该使用IE浏览器特有的expression

很多用户为了解决IE浏览器的一些CSS HACK，总是习惯性的使用 expression()，其实用expression会非常耗资源，以前referer后台有这样用，后来发现网页莫名奇妙的狂占内存，后来发现是ex...

2018-08-14

237浏览

0评论

CSS3实现隔行变色

隔行变换样式是一项基本的网页表现形式，如何通过CSS3实现呢?今天我们就拿隔行显示不同背景色为例做演示：代码如下：<head><meta http-equiv="Content-Type" content="text/html;...

2018-08-14

494浏览

0评论

CSS 中文字体的英文名称 (simhei, simsun) 宋体微软雅黑

Mac OS的一些：华文细黑：STHeiti Light [STXihei]华文黑体：STHeiti华文楷体：STKaiti华文宋体：STSong华文仿宋：STFangsong俪黑 Pro：LiHei Pro Medium俪宋 Pro：LiSong Pro Light标楷体：B...

微软

2018-08-14

159浏览

0评论

去除鼠标点击输入框所产生的边框

在表单中输入文字时，在有些浏览器中会产生边框，比如在360浏览器中，点击搜索框，就会出现边框。这种边框的出现是因为CSS中的focus伪类造成的，去除边框只需要在CSS加入:inp...

2018-08-14

1180浏览

0评论

调整input里面的输入光标大小

条件 input输入框用一个背景图模拟，设置height和line-height一样的高度，使里面的输入文字能够垂直居中。问题 IE浏览器和火狐浏览器：不管该行有没有文字，光标高度...

2018-08-14

266浏览

0评论

CSS最小宽度和最小高度的用法

min-height 限制最小高度min-width 限制最小宽度IE6不支持min-height和min-width,但是一旦内容超过容器，容器会被自动撑大，所以给IE6专门设置一个宽度就是他的最小宽度。_widt...

2018-08-14

209浏览

0评论

瀑布流布局的两种方式：传统多列浮动和绝对定位布局

传统多列浮动各列固定宽度，并且左浮动；一列中的数据块为一组，列中的每个数据块依次排列即可；更多数据加载时，需要分别插入到不同的列上；优点布局简单，应该...

2018-08-14

260浏览

0评论

CSS+jquery+JS轻松实现瀑布流布局

CSS部分核心代码<style type="text/css">.case-list {position:relative;}.case-list li {position:absolute;}.case-list li img {width:200px;}</style> HTML部分...

2018-08-14

275浏览

0评论

IE6/Chrome谷歌浏览器背景图片居中1像素偏移

场景：一张1400像素的背景图片，把这张背景图片作为居中显示，其中body的宽度为950并居中显示。在正常情况下，背景图片和body部分的内容是对齐的。经测试：IE7/8/9/10,opera,火狐...

谷歌

2018-08-14

272浏览

0评论

CSS知识：探讨清除浮动的原理

当有盒子进行浮动后，文字会环绕着浮动的盒子如果不希望文字环绕浮动的盒子，我们只要在文字所在盒子里加上clear即可。务必注意！对clear属性的设置要放到文字所在的盒子里，例如一...

2018-08-14

215浏览

0评论

CSS基础之：常用CSS命名规则

布局CSS命名规则页头:header侧栏:sideBar页面主体:main内容:content页脚:footer外套 wrap容器:container版权页标记：colophon导航CSS命名规则导航:nav子导航:subNav主导航:ma...

2018-08-14

363浏览

0评论

line-height带单位与不带单位有什么区别

line-height带单位line-height:26px; 表示行高为26个像素line-heigth:26%;表示行高为当前字体大小的26%line-height:26em; 表示行高为当前字体大小的26倍带单位的行高都有继...

2018-08-14

225浏览

0评论

CSS限制图片大小的方法

是不是在设计网页时经常遗漏图片大小问题？SJY就犯过这样的错，自以为网页设计的很完美了，上线后在某一篇文章中用到了大型图片，整个页面就此全乱了。在标准浏览器中，图片大小...

2018-08-14

353浏览

0评论

CSS去除图片超链接虚线边框

标准浏览器去除图片超链接虚线边框一般在全局定义a标签时加入outline:none;属性，如?a{outline:none; } IE浏览器去除图片超链接虚线边框在html中加入 hidefoc...

2018-08-14

247浏览

0评论

如何让IE浏览器支持CSS3属性

向让IE浏览器支持CSS3属性，首先得下载微软提供的让IE支持部分CSS3属性的脚本文件?ie-css3.htc 下载地址：https://pan.baidu.com/s/1o7HItvG 在CSS中引入ie-css3.htc...

2018-08-14

649浏览

0评论

CSS覆盖失效的原因和解决办法

我们在使用CSS给网站添加样式时，经常会用到覆盖，原则上，后添加的样式会覆盖前面的样式，但有时却会失效，这是为什么呢？今天让我们来探讨下，CSS覆盖失效的原因和解决办法。如...

2018-08-14

210浏览

0评论

解决IE6样式失效问题

为什么IE6中样式会失效？HTML页面编码与CSS编码不同（DEMO中HTML为gbk，CSS为utf-8）CSS文件中未指定@charset头声明，导致IE默认使用页面编码来解码CSS文件（DEMO中IE浏览器使用gbk来解...

2018-08-14

202浏览

0评论

CSS优先级

行内样式>嵌入式>外部样式（链接式，导入式）ID>类别>标签 #zgj>.fbox>b同级时，后面的规则会覆盖前面的规则同级嵌套的越多，优先级越高；p b>b, .fbox p b>.fbox b在跟比本身高级的选...

2018-08-14

212浏览

0评论

opacity的使用说明

由浮点数字和单位标识符组成的长度值。不可为负值。声明用来设置一个元素的透明度，opacity取值为1的元素是完全不透明的，反之，取值为0是完全透明的，看不见的。1到0之间的任...

2018-08-14

211浏览

0评论

CSS的margin-top和父元素合并怎么办？

子元素的margin-top如果是10px，父元素的是5px，那么合并之后的效果就是10px。感觉好像父元素的margin-top=10px不起作用了。如果你想避免发生父子间的margin合并现象。就必须要...

2018-08-14

272浏览

0评论

CSS让pre中的代码自动换行

<pre>元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 <pre> 标签的一个常见应用就是用来表示计算机的源...

2018-08-14

350浏览

0评论

CSS外边距为什么会失效？

位于浮动元素下方的非浮动元素的上外边距会失效CSS外边距失效解决方法给浮动元素指定底部外边距。把下方的非浮动元素变成浮动元素...

2018-08-14

174浏览

0评论

解决IE6下高度不正常

IE6下默认的字体尺寸大致在 12 – 14px 之间，如果你定义的块级元素高度小于这个默认值，IE6会自动把盒子撑大，他认为这个层的高度不应该小于字体的行高。所以即使你用 heig...

2018-08-14

178浏览

0评论

解决IE6不支持position:fixed;的问题

在网页设计中，时常要用到把某个元素始终定位在屏幕上，即使滚动浏览器窗口也不会发生变化。一般我们会使用position:fixed来进行绝对固定，但IE6并不支持position:fixed...

2018-08-14

171浏览

0评论

解决IE6下overflow:hidden失效

在IE6下，当父元素的子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效。实例 CSS代码.box{height:50px;overflow:hidden;border:1px...

2018-08-14

194浏览

0评论

float浮动元素高度自适应问题

做网页的时候时常需要用到父元素的高度随子元素的增大而增大。但当子元素进行浮动后，父元素就无法包含子元素了，给父元素增加一个边框可以看到效果。有2种方法可以解决这个问...

2018-08-14

266浏览

0评论

IE6/IE7不支持first-child的解决办法

IE6、IE7不支持 first-child 属性，不过可以用其他办法替代。#sidebar li:first-child{border-top-style:none;}#sidebar li{border-top-width:1px;border-top-style:soli...

2018-08-14

200浏览

0评论

IE6中position:absolute问题

position:absolute;是根据最近的带有position属性的父元素来定位，但是IE6中却发现错位了。原因是IE6的haslayout属性，只需要激发这个属性就解决问题了，父元素CSS属性可...

2018-08-14

210浏览

0评论

纯CSS如何实现圆形边框

border-radius可以实现圆角框，只要足够圆，变成正圆也没有问题。 HTML代码<a class="entry-date" href="#"></a> CSS代码.entry-date {display: block;width: 64px;h...

2018-08-14

232浏览

0评论

CSS教程之：IE条件注释

条件注释是一种专用的（因此是非标准的）对常规HTML注释的Microsoft扩展。顾名思义，条件注释能够根据条件（比如浏览器版本）显示代码块。尽管是非标准的，条件注释在其他所有浏览器看...

2018-08-14

199浏览

0评论

CSS教程之：display:inline-block

display:inline-block的定义将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。浏览器兼容性 Opera、Safari...

2018-08-13

214浏览

0评论

让IE6支持PNG透明图片

在网页中插入的PNG透明图片方法一：制作一张透明小图片nothing.gif 对需要处理的PNG图片运用以下样式.pngfix {azimuth: expression(this.pngSet?this.pngSet=...

2018-08-13

202浏览

0评论

清除button按钮在IE6/IE7下的黑边

表单中的提交按钮button,在清理了其默认样式后，在IE6和IE7下仍然存在黑边，显得有点丑陋，不过总归是有办法的。比如，你的登录表单中有一个登录按钮，当登录按钮得到焦点，并且消...

2018-08-13

243浏览

0评论

CSS教程之：让IE6支持:hover伪类

因为IE 7+支持:hover，因此使用条件注释，只针对IE 6-调用该JS文件。<!--[if lte IE 6]> <script type="text/javascript" language="Javascript" src="hover.js"></scri...

2018-08-13

1388浏览

0评论

各种字体显示效果

Verdana是为屏幕阅读设计的热门字体之一，设计简单直接，字母和字形不容易混淆。例如大写I和小写L有不同的形状，而在Arial字体中这两个字形很容易混淆。Arial 可能造成混淆 Ill 3...

2018-08-13

155浏览

0评论

CSS教程之：text-overflow:ellipsis

语法text-overflow : clip | ellipsis 参数 clip : 不显示省略标记（…），而是简单的裁切(一般不会用它) ellipsis : 　当对象内文本溢出时显示省略标记（…）用法...

2018-08-13

202浏览

0评论

IE6、IE7、Firefox浏览器兼容的方法

IE8和火狐（以下简称FF）基本一致，来看下IE6，IE7，FF的识别方式因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就...

2018-08-13

178浏览

0评论

CSS中box-shadow的使用方法

box-shadow是CSS3的属性，使用box-shadow终于可以使用纯代码实现阴影效果。 box-shadow有六个可设值 img{box-shadow:阴影类型 X轴位移 Y轴位移阴影模糊值阴影边...

2018-08-13

205浏览

0评论

IE6的3像素bug

IE6的3像素bug产生原因当浮动元素与非浮动元素相邻时，它们之间会有3像素的空隙，这就是著名的IE6的3像素Bug。IE6的3像素bug解决方法针对IE6给浮动元素增加-3像素的外边距，代码...

2018-08-13

184浏览

0评论

IE6浮动列表li最右侧竖直排列

在IE6中，把li左浮动后，在最右侧经常会出现竖直排列的情况,而在火狐浏览器中文字放不下了会自动换行。 CSS代码*{list-style:none;padding:0;margin:0;font-size:14px;}...

2018-08-13

177浏览

0评论

实现IE6、IE7、Firefox浏览器兼容的方法

IE8和火狐（以下简称FF）基本一致，来看下IE6，IE7，FF的识别方式 _是针对IE6的CSS HACK,其他浏览器均不能识别_body{_background:purple;} IE6,IE7能识别*,FF和IE8不能识别...

2018-08-13

209浏览

0评论

解决ie6下的双倍外边距问题

IE6下为什么会出现双倍外边距呢？这些都是IE特有的属性haslayout造成的，想知道原理的读者可以看下haslayout相关文章。IE6双倍外边距出现的条件当浮动元素的浮动方向和浮动边界...

2018-08-13

281浏览

0评论

分享一段图片居中的css代码

一般来说可以用CSS中的“text-align:center属性，margin:0 auto或定位属性”就可以居中。但是主要看是看你的页面布局是怎样的，是否用了定位。根据这些来判断到顶使...

2018-08-08

268浏览

0评论

CSS技巧：一段CSS代码让你的广告位“立起来”

很多网站上都会投放广告，但一般情况下广告都不那么“好看”，如果我们对广告位稍微进行美化，说不定能出人意料呢。今天就跟大家分享一段 CSS 代码让你的广告位“...

2018-08-05

热门文章