-
CSS高级技巧:图片替换
所属栏目:[系统] 日期:2020-05-11 热度:70
上一篇CSS教程 文章:CSS高级技巧:CSS Sprites 图像替换技术有相当的用处, 特别是注重视觉的设计, 而且在一定程度上也不会影响非可视化浏览器的用户群(屏幕阅读器). 本节用到的图片只有一个: 经典FIR 在文字外包上一组span标签, 并在CSS中将这个span进行di[详细]
-
CSS高级技巧:滑动门技术
所属栏目:[系统] 日期:2020-05-11 热度:78
上一篇CSS教程 文章:CSS高级技巧:图片替换滑动门(Sliding Doors) 还是决定把滑动门单独提作一种单独的技术. 它是CSS引入的一项用来创造漂亮且实用的界面的新技术, 它使用简单, 我们只需要使用两张单独的背景图片, 就可以实现. 滑动门一般用做网站Tab导航,[详细]
-
Web标准:文档类型和网页浏览器
所属栏目:[系统] 日期:2020-05-11 热度:200
原文: 作者:Aaron Gustafson 译者:zhaozy in 3user.com 转载请注明作者和译者信息,谢谢! 进步总是要有代价的. 对网页浏览器来说, 由于开发者像是宣传真理一样的拍着胸部担保着一些编辑器和浏览器(特别是Internet Explorer), 用户们为此花费很多的成本.[详细]
-
Web标准前途是否依赖浏览器技术
所属栏目:[系统] 日期:2020-05-11 热度:101
原文: 作者:Eric Meyer 当我读了一遍Aaron Gustafson的Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8 后,我心里的第一反应就是深深的否定这种观点. Aaron描述的version-targeting机制是完全错误的, 是完全倒退的, 是和我们应该做的事[详细]
-
CSS实例:三列等高布局
所属栏目:[系统] 日期:2020-05-11 热度:88
三列等高CSS布局的一个实例, 修改国外的一个demo, 兼容到了IE5.5 和标准的浏览器OperaFirefoxSafari。 不过hack太多,不是很喜欢这样做。 全部代码如下: ?xmlversion=1.0encoding=gb2312? !DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN htmlx[详细]
-
如何利用定位使元素居中(web端页面布局小技巧)
所属栏目:[系统] 日期:2020-05-10 热度:143
元素在浏览器窗口居中的方法 这里先给出代码块,如果有同学已经看出来点眉目可以先自己尝试一下。 position:fixed; /*给想要居中的元素设置*/ left:50%; /*或者right:50%*/ top:50%; /*或者bottom:50%*/ margin-left:-元素宽度的一半; /*或者margin-right*[详细]
-
WEB标准学习经验总结
所属栏目:[系统] 日期:2020-05-10 热度:179
今天在群里,熊猫君提议整理一个帖子,一方面为初学者提供一个入门指南,另一方面也象借此和已经在从事这个行业进行一点交流。下面是我从事这个行当多年的一些经验总结,希望抛砖引玉,大家不吝赐教。 1、必备工具 其实web标准并不是很复杂的技术,实现we[详细]
-
IE对网页中引入CSS样式表的限制
所属栏目:[系统] 日期:2020-05-10 热度:88
首先介绍一下HTML文档与CSS 的关联常见有4种方式: 1、使用link标记 linkrel=stylesheettype=text/csshref=sheet.css/ 2、使用style元素 styletype=text/css body{background:#fff;} h1{font-size:2em;} /style 3、使用@import指令 styletype=text/css @im[详细]
-
CSS实现聊天气泡效果
所属栏目:[系统] 日期:2020-05-10 热度:151
模拟的效果 二、原理 准备一个高度和宽度为0的盒子 将这个盒子设置一个边框 将边框不需要的地方用 transparent 来代替,需要显示的地方设置对应的颜色 如果需要改变其大小,直接设置边框的宽度 border-width 将字体 font-size 和行高 line-height 设置为0[详细]
-
纯CSS3实现移动端展开和收起效果的示例代码
所属栏目:[系统] 日期:2020-05-10 热度:170
HTML代码 section class=blockinput type=checkboxdiv class=case-blockdiv展开/divdiv收起/div/divdiv class=detaildiv唧唧复唧唧,木兰当户织。不闻机杼声,惟闻女叹息。(惟闻 通:唯)问女何所思,问女何所忆。女亦无所思,女亦无所忆。昨夜见军帖,可汗[详细]
-
CSS中层叠上下文的具体使用
所属栏目:[系统] 日期:2020-05-10 热度:55
层叠上下文与层叠顺序 层叠上下文(stacking content)是 HTML 中的三维概念,也就是元素z轴。层叠顺序(stacking order)表示层叠时有着特定的垂直显示顺序。 层叠准则 谁大谁上 当具有明显的层叠水平标示的时候,如识别的 z-indx 值,在同一个层叠上下文[详细]
-
CSS自定义select下拉选择框的样式(不用其他标签模拟)
所属栏目:[系统] 日期:2020-05-10 热度:144
今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方案就是用其他的元素(如ul,li)模拟下拉菜单,或[详细]
-
css控制UL LI 的样式详解(推荐)
所属栏目:[系统] 日期:2020-05-10 热度:50
div ul lia href="#"首页/a/li li/li lia href="#"博客/a/li li/li lia href="#"设计/a/li li/li lia href="#"相册/a/li li/li lia href="#"论坛/a/li li/li lia href="#"关于/a/li /ul /div CSS: 复制代码 代码如下: #menu ul {list-style:none;margin:0p[详细]
-
从腾讯网站首页改版学到的几点体会心得
所属栏目:[系统] 日期:2020-05-10 热度:178
腾讯首页近日改版了,现在将自己从其中学到和感悟到的几点总结出来分享: 1、宽屏设计: 1)不管腾讯处于什么考虑,宽屏总是让人看的很舒服,而且页面整体缩短了近1半,这让浏览信息的用户会方便很多。 2)同时大家注意到了,腾讯的宽屏不是完全的宽屏,而[详细]
-
解决网站防挂IFRAME木马的原理
所属栏目:[系统] 日期:2020-05-10 热度:191
相信大多数朋友都是iframe木马的受害者,有朋友的网站被注入了n回iframe,心情可想而知。而且现在ARP攻击,注入iframe也是轻而易举的事,仅局域网里都时刻面临威胁,哎,什么世道。接近年关,为了防止更多的朋友受到攻击,于是细细说下。 灵儿曾经在经典论[详细]
-
Css实现手机端页面强制横屏的方法示例
所属栏目:[系统] 日期:2020-03-29 热度:142
@media screen and (orientation: portrait) {html{width : 100vmin;height : 100vmax;}body{width : 100vmin;height : 100vmax;}#gyroContain{width : 100vmax;height : 100vmin;transform-origin: top left;transform: rotate(90deg) translate(0,-100vm[详细]
-
CSS大师Eric采访实录
所属栏目:[系统] 日期:2020-03-29 热度:139
自从学习、实践CSS以来,问题层出不穷,实在是自己学习的太肤浅,对CSS的理解也不够。 本篇摘录一段对CSS大师Eric的采访记录,希望加深认识,准备重拾对CSS的学习劲头。 关于作者和此篇采访 原文于2004年4月21日采访,载于webstandardgroup.org由国内CSS的[详细]
-
CSS网站布局技巧几则总结
所属栏目:[系统] 日期:2020-03-29 热度:158
1.若有疑问立即检测 在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS都有检测工具可用,请见。请注意,在文件开头的错误,可能因为不当的结构等因素造成更多错误;我们建议先修正一些最明显的错误之后重新检测,这样也许会让错[详细]
-
Web标准:结构,表现和行为分离
所属栏目:[系统] 日期:2020-03-29 热度:52
Web标准:讨论内容结构表现行为分离 内容与表现分离,从标准到国人重视那天起,就已经讨论了,但是停留在div cssxhtml css纯代码的分离,思想上流程上,到底如何分离? 古老的话题:一首古诗的分离 1.给你一首古诗,保存为毫无格式的一堆文字,你去理解它[详细]
-
用CSS遮罩实现过渡效果的示例代码
所属栏目:[系统] 日期:2020-03-29 热度:112
副标题#e# 今天我们展示如何用CSS遮罩创建一个有趣又简单但吸引人的过渡效果。与裁剪一样,遮罩是另外一种定义可见性和元素组合的方式。在下面的教程中,我们将向你展示如何应用新属性实现现代转换效果。我们将使用steps()和位于图片之上的PNG实现一个有趣[详细]
-
详解css透明度之rgba和opacity的区别及兼容
所属栏目:[系统] 日期:2020-03-29 热度:78
对于设置透明度,我们有两个可以选的css3属性:rgba 和 opacity opacity 用法: #box{background-color:rgb(125,25,0);opacity: 0.5} IE9, Firefox, Chrome, Opera 和 Safari 使用属性opacity来设定透明度。 opacity 属性能够设置的值从 0.0 到 1.0。值越[详细]
-
聊一聊CSS中的长度单位的使用
所属栏目:[系统] 日期:2020-03-29 热度:67
CSS中有很多属性可以接受长度值,比如: width, height, margin, padding, border-width, font-size, text-shadow。因为使用场景多,因此CSS也提供了许多长度单位。有的是日常生活中使用的单位,比如:厘米(cm)和英寸(in);有的是印刷行业使用的单位,[详细]
-
详解利用clear清除浮动的一些问题解决
所属栏目:[系统] 日期:2020-03-29 热度:69
下面这段代码是用来清除浮动带来的高度塌陷问题 .clearfix:before {content: .;display: block;height: 0;clear: both;visibility: hidden;} Question 1: 上面的代码的能够实现清除浮动的问题吗? Answer: Can't. 因为clear属性只能控制元素本身与前面的[详细]
-
css隐藏移动端滚动条并且ios上平滑滚动的方法
所属栏目:[系统] 日期:2020-03-29 热度:183
css隐藏移动端滚动条并且ios上平滑滚动的方法 HTML代码如下 !DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8meta name=viewport content=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0meta http-equi[详细]
-
如何使用css绘制钻石的方法
所属栏目:[系统] 日期:2020-03-29 热度:118
听说你想要钻石:gem:?买不起,还是用css来画一个吧,但你敢送给自己女朋友,不保证不被打。 下午两点要相亲,要不把这个送相亲对象? 效果 先看下效果吧,想一想怎么构图先。 上图是已经完成的效果。钻石整体都是由三角形构成,上五下三。上边是五个等边[详细]