css类选择器的使用方法详解

2016年07月27日 48 阅读

类选择器 在 CSS 中，类选择器以一个点号显示：复制代码 代码如下: .center {text-align: center}在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。复制代码 代码如下: <h1 class="center"> This heading will be center-a...

不同版本IE使用不同css（css条件注释语句用法）

2016年07月27日 46 阅读

一、条件注释简介1.IE中的条件注释（Conditional comments）对IE的版本和IE非IE有优秀的区分能力，是WEB设计中常用的hack方法。2.条件注释只能用于IE5以上。3.如果你安装了多个IE，条件注释将会以最高版本的IE为标准。4.条件注释的基本结构和HTML的注释（<！– –>）是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。5.IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里...

CSS图文混排的几种方案

2016年07月27日 44 阅读

百度新闻首页的方案：复制代码 代码如下: <table><tbody><tr><td class="topic-pic"><a href=""><img src=""></a></td><td class="topic-txt">…</td></tr></tbody></table> html结构丑陋，...

Css浏览器兼容的解决方法

2016年07月27日 41 阅读

一、网页背景半透明网页背景半透明复制代码 代码如下:opacity:0.8;filter:"progid:DXImageTransform.Microsoft.Alpha（opacity=80）";IE6中CSS方法解决PNG图片半透明问题：#DIVname { width: 300px; height: 99px; background: url（"images/top.png"） no-repeat top; *background: none; *f...

css实现的对联广告代码

2016年07月27日 48 阅读

css 代码复制代码 代码如下:.couplet_ad/* 底部固定*/{position:fixed;bottom:auto; top:0; width: 120px; height: 230px; z-index:99999; margin-top:158px;}* html .couplet_ad/* IE6 底部固定*/{_position:absolute;_bottom:auto;_top:expression（eval（document.do...

iframe背景透明的设置方法

2016年07月27日 43 阅读

IE5.5开始支持浮动框架的内容透明。如果想要为浮动框架定义透明内容，则必须满足下列条件。 1.与 iframe 元素一起使用的 allowTransparency 标签属性必须设置为 true。 2.在 iframe 内容源文档，background-color 或 body 元素的 bgColor 标签属性必须设置为 transparent复制代码 代码如下:<iframe src="./ads_top_tian.html" allowtrans...

网页使用Google Font API（字体）的方法

2016年07月27日 45 阅读

在网页设计里，字体的显示是个问题。最普遍用的是宋体，但是宋体在 Win 7 下的表现真的很难看。雅黑端庄一些，但是随着字体大小，感觉汉字的大小也会有区别。小站现在用的字体是是宋体 + Arial/Georgia，因为习惯了也没多在意，其实对于英文字体有其它更好的选择。比如 Bitter 字体，用来做标题倒是不错：复制代码 代码如下:<div style="text-align:center; font-size:24px; font-family:B...

css white-space:nowrap属性用法（可以强制文字不换行输出）

2016年07月27日 44 阅读

强制不换行，直接使用white-space:nowrap即可。CSS设置不转行: overflow:hidden 隐藏 white-space：normal 默认 pre 换行和其他空白字符都将受到保护 nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象例:强制不换行复制代码 代码如下: div{white-space:nowrap;}...

IE里button设置border:none属性无效解决方法

2016年07月27日 48 阅读

某个元素设置无边框，只需要给元素设置border:none即可，当然设置border:0效果一样，但实际上两者是有性能差别的复制代码 代码如下:border:none：边框设置为为none，不做任何处理；border:0：边框宽度设置为0像素，但是实际上border-color和border-style还是在渲染的。然而在IE中，对于button和input元素确并不是这样,在IE6，7中border:none仅等价于border-style:none,而...

border:none与border:0使用区别

2016年07月27日 56 阅读

一、border:noneborder-style的简写在chrome审查元素看到以下结果复制代码 代码如下:element.style {border: none;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;border-width: initial;border-color: initial;}在fir...

html清除浮动的6种方法示例

2016年07月27日 46 阅读

使用display：inline-block会出现的情况：1.使块元素在一行显示2.使内嵌支持宽高3.换行被解析了4.不设置的时候宽度由内容撑开5.在IE6,7下步支持块标签由于inline-block属性换行的时候被解析（有间隙）故解决方法使用浮动float:left/right使用浮动时出现的情况：1.使块元素在一行显示2.使内嵌元素支持宽高3.不设置不宽高的时候宽度由内容撑开4.换行不被解析（故使用行内元素的时候清除间隙的方法可以使用浮动）5.元素添...

三个不常见的 HTML5 实用新特性简介

2016年07月27日 47 阅读

一、DNS 预解析缓存众所周知，解析 DNS 是网站性能优化的比较重要的一部分，虽然加载时间不太长，但是很难压缩起来。特别是为了并发下载资源而使用多个 CDN 域名来加载资源的大型网站，更不可忽视，每加载资源之前都要先进行 CDN 域名的 DNS 解析转换。如果采用 DNS 预加载，支持该功能的浏览器就会提前对该域名进行 DNS 解析并且缓存一下，而不会在需要请求资源再进行解析。而且这个功能应用实在是太简单：复制代码 代码如下:<link rel="...

css代码优化的12个技巧

2016年07月27日 41 阅读

1.ID 规则2.Class 规则3.标签规则4.通用规则对效率的普遍认识是从Steve Souders在2009年出版的《高性能网站建设进阶指南》开始，虽然该书中罗列的更加详细，但你也可以在这里查看完整的引用列表，也可以在谷歌的《高效CSS选择器的最佳实践》中查看更多的细节。本文我想分享一些我在编写高性能CSS中用到的简单例子和指南。这些都是受到MDN 编写的高效CSS指南的启发，并遵循类似的格式。一、避免过度约束一条普遍规则，不要添加不必要的约束。复制...

低版本IE正常运行HTML5+CSS3网站的3种解决方案

2016年07月27日 50 阅读

如果开发时按最低标准，比如IE6不支持的特性，我们统统不用，那就没有必要写这篇文章了；但我想这种情况极少，更多的开发，是在现代浏览器上使用它们支持的特性，而在早期浏览器上做一定的降级处理，这就是所谓 “渐进增强”，也是本文要说的重点。通过下面的方法，希望可以让网站也能够在低版本IE浏览器上奇迹般地运行得更好！htmlshiv.jsRemy的 HTML5shiv通过JavaScript 来创建HTML5元素（如 main, header, footer等）。...

CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera

2016年07月27日 50 阅读

现在的浏览器IE6-IE10、Firefox、Chrome、Opera、Safari。。。数量众多，可谓百家争鸣，对用户来说有了很多的可选择型，不过这可就苦了Web前端开发人员了。今天把一些常用的CSS Hack整理了一下，包括常用的IE hack以及火狐、Chrome、Opera浏览器的Hack，并把这些CSS Hack综合的一起，写了一个小的浏览器测试器。如图所示：下面就来看一下代码吧：html部分：复制代码 代码如下:<div class="c...

ie6,ie7,ie8完美支持position:fixed的终极解决方案

2016年07月27日 46 阅读

ie6对position:fixed不支持，网上有很多解决方法，有的在ie6,ie7上调试成功后，在ie8上又不好使，div层还是跟随滚动条浮 动；以下总结方法，在ie6,ie7,ie8上都调试成功，且页面滚动条滚动时，效果还挺好，div层并不会闪烁。 复制代码 代码如下:<div id="goTop_div" class="fixed ie"> </div>css: 复制代码 代码如下:.fixed{ position:fixe...

小技巧处理div内容溢出

2016年07月27日 43 阅读

前几天遇到一个问题，代码是这样一个层次：复制代码 代码如下:<div class="province"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul></div>我设置了div的边框，要想ul的内容在边框内，必须设置div高度。但是，ul内的内容是变化的，内容少的时候就不及div的高度。不设高度的...

html小技巧之td,div标签里内容不换行

2016年07月27日 43 阅读

在一些页面开发中，除自己操作外，引起换行的情况一般有：Ex一.td标签里内容长度过长引起换行；Ex二.div标签（或其他标记）里内容有文本和图片引起换行；解决方法： 针对例子一用<nobr></nobr>标签把换行的内容全部包起来，可以解决问题； 针对例子二用CSS样式white-space: nowrap;可以使图片和内容不换行，（经自己测试使用<nobr></nobr>标签也可以）....

纯CSS实现鼠标放上去改变文字内容

2016年07月27日 42 阅读

css样式复制代码 代码如下:.remind span {display:block;margin-top:-22px;}.remind a:hover {padding-top:22px;}.remind a {float:left;overflow:hidden;}.remind{height:22px;line-height:22px;overflow:hidden;padding-left:10px;}html代码复制代码 代码如下:<div...

li中插入img图片间有空隙的解决方案

2016年07月27日 44 阅读

直接加样式img{vertical-align:bottom; display:block}当然在某些情况下无效,比如我要加三个图片,上中下,中间的图片是设为背景,发现用此方法无效,只是上和中的图片空隙没了,而下与中之间还存在,方法很简单,把vertical-align:bottom改成top,可根据自己遇到的不同情况来设vertical-align的参数方法一：复制代码 代码如下:img{vertical-align:top; display:block...