-
纯CSS3实现移动端展开和收起效果的示例代码
所属栏目:[系统] 日期:2020-05-11 热度:159
HTML代码 section class=blockinput type=checkboxdiv class=case-blockdiv展开/divdiv收起/div/divdiv class=detaildiv唧唧复唧唧,木兰当户织。不闻机杼声,惟闻女叹息。(惟闻 通:唯)问女何所思,问女何所忆。女亦无所思,女亦无所忆。昨夜见军帖,可汗[详细]
-
CSS中层叠上下文的具体使用
所属栏目:[系统] 日期:2020-05-11 热度:177
层叠上下文与层叠顺序 层叠上下文(stacking content)是 HTML 中的三维概念,也就是元素z轴。层叠顺序(stacking order)表示层叠时有着特定的垂直显示顺序。 层叠准则 谁大谁上 当具有明显的层叠水平标示的时候,如识别的 z-indx 值,在同一个层叠上下文[详细]
-
CSS自定义select下拉选择框的样式(不用其他标签模拟)
所属栏目:[系统] 日期:2020-05-11 热度:150
今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方案就是用其他的元素(如ul,li)模拟下拉菜单,或[详细]
-
css控制UL LI 的样式详解(推荐)
所属栏目:[系统] 日期:2020-05-11 热度:148
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-11 热度:90
腾讯首页近日改版了,现在将自己从其中学到和感悟到的几点总结出来分享: 1、宽屏设计: 1)不管腾讯处于什么考虑,宽屏总是让人看的很舒服,而且页面整体缩短了近1半,这让浏览信息的用户会方便很多。 2)同时大家注意到了,腾讯的宽屏不是完全的宽屏,而[详细]
-
解决网站防挂IFRAME木马的原理
所属栏目:[系统] 日期:2020-05-11 热度:101
相信大多数朋友都是iframe木马的受害者,有朋友的网站被注入了n回iframe,心情可想而知。而且现在ARP攻击,注入iframe也是轻而易举的事,仅局域网里都时刻面临威胁,哎,什么世道。接近年关,为了防止更多的朋友受到攻击,于是细细说下。 灵儿曾经在经典论[详细]
-
Web标准:文档类型和网页浏览器
所属栏目:[系统] 日期:2020-05-11 热度:168
原文: 作者:Aaron Gustafson 译者:zhaozy in 3user.com 转载请注明作者和译者信息,谢谢! 进步总是要有代价的. 对网页浏览器来说, 由于开发者像是宣传真理一样的拍着胸部担保着一些编辑器和浏览器(特别是Internet Explorer), 用户们为此花费很多的成本.[详细]
-
Web标准前途是否依赖浏览器技术
所属栏目:[系统] 日期:2020-05-11 热度:132
原文: 作者:Eric Meyer 当我读了一遍Aaron Gustafson的Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8 后,我心里的第一反应就是深深的否定这种观点. Aaron描述的version-targeting机制是完全错误的, 是完全倒退的, 是和我们应该做的事[详细]
-
背投广告设计:用最少的时间来做最效率的事情
所属栏目:[系统] 日期:2020-05-10 热度:121
对于背投广告的原理来说并没有什么难度,无非打开的窗口失去焦点(blur),而原来页面得到焦点(focus)。但对于流行的浏览器来说,如果非用户行为的弹出窗口(即 onload 时,直接window.open ),会被浏览器默认拦截。 背投广告,既然被称为广告,那如何[详细]
-
CSS教程:使用ul进行网页的多列布局
所属栏目:[系统] 日期:2020-05-10 热度:74
几天在用CSS写三列布局的时候突然想到的这样一个方法,这个想法自己都觉得有些疯狂,如果其中有什么不对的地方请各位不吝指教。 当需要写一个三列布局的时候,一般情况下我会选择使用如下的DIV布局方式: 使用这样的嵌套方式无疑可以使代码出错的概率减少[详细]
-
网页超级链接该以什么方式打开?
所属栏目:[系统] 日期:2020-05-10 热度:126
一直以来都有这样一个困惑,那就是打开页面间的链接时是在原窗口转换还在新窗口打开呢?如果是在原窗口里转换页面的话,那我还想使用原页面的信息呢?但是在新窗口打开的话,到时候可能是一屏幕的窗口(现在的浏览器都提供标签式浏览我认为这是浏览器至今[详细]
-
以HTML为基础学习DIV CSS
所属栏目:[系统] 日期:2020-05-10 热度:94
点击这里浏览本站 网页设计教程 栏目内容 在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基[详细]
-
CSS盒模型制定网页的宽度和高度的原理
所属栏目:[系统] 日期:2020-05-10 热度:165
当我们布局一个网页的时候,经常会遇到这样的一种情况,那就是最终网页成型的宽度或是高度会超出我们预先的计算,其实就就是所谓的CSS的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;} 如上一段的代码,很多时候我们会把它所[详细]
-
细说CSS3中的选择符
所属栏目:[系统] 日期:2020-05-10 热度:78
英文原文: 中文翻译: ?id=197 注:本文写于2006年1月,当时IE7、IE8和Firefox3还未发行,文中所有说的浏览器支持均未包括这三个版本的浏览器。在IE8和Firefox3中,文中的大部分选择符已经被支持[dudo注] 在2005年的9月和10月,我先后发表了几篇关于CSS2.[详细]
-
CSS教程:闭合CSS浮动元素的几种方法
所属栏目:[系统] 日期:2020-05-10 热度:122
按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种[详细]
-
CSS:何制作一个向各个方向延展box?
所属栏目:[系统] 日期:2020-05-10 热度:134
在HTML中, 如果过你没有指定一个确定的宽度的话, 块级元素本身就会在垂直方向上延展. 想象一个无序清单. 这个清单会自己扩展来适应它所有的清单元素. 如果用户在他们的浏览器中增加了字体大小, 清单会在垂直方向上延展, 来适应变大的内容. 有时候, 感觉仅[详细]
-
基于ccs3的timeline时间线实现方法
所属栏目:[系统] 日期:2020-05-10 热度:155
实现 该控件的实现过程较为简单,主要由test.html文件和timeline.css文件组成。具体代码如下: 1、test.html文件 !DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8meta name=viewport content=width=device-width, initial-scale=1.0meta http-equiv=X-UA[详细]
-
基于CSS 判断鼠标进入的方向
所属栏目:[系统] 日期:2020-05-10 热度:164
在之前某一个前端技术群里,有一个群友说他面试的时候遇到了一个问题,就是面试官让他用纯 CSS 来实现一个根据鼠标移动位置觉得物体移动方向的 DEMO。 给出的初始结构如下: stylebody {padding: 2em;text-align: center;}.block {position: relative;disp[详细]
-
css3媒体查询中device-width和width的区别详解
所属栏目:[系统] 日期:2020-03-30 热度:124
定义:定义输出设备的屏幕可见宽度。 不管你的网页是在safari打开还是嵌在某个webview中,device-width都只跟你的设备有关,如果是同一个设备,那么他的值就不会变。 比如iphone6的device-width*device-height为375*667,而跟他的dpr等无关。 2.width 定义[详细]
-
CSS 漂亮搜索框美化代码
所属栏目:[系统] 日期:2020-03-30 热度:147
效果图: 实现这种效果有两种方法:一是整体处理一个背景,以透明gif图的方式定位到搜索框,或者切分开,这种方法加载快,而且灵活性更高。 文中用到的图片 提示:您可以先修改部分代码再运行[详细]
-
Css实现手机端页面强制横屏的方法示例
所属栏目:[系统] 日期:2020-03-29 热度:169
@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 热度:188
自从学习、实践CSS以来,问题层出不穷,实在是自己学习的太肤浅,对CSS的理解也不够。 本篇摘录一段对CSS大师Eric的采访记录,希望加深认识,准备重拾对CSS的学习劲头。 关于作者和此篇采访 原文于2004年4月21日采访,载于webstandardgroup.org由国内CSS的[详细]
-
CSS网站布局技巧几则总结
所属栏目:[系统] 日期:2020-03-29 热度:105
1.若有疑问立即检测 在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS都有检测工具可用,请见。请注意,在文件开头的错误,可能因为不当的结构等因素造成更多错误;我们建议先修正一些最明显的错误之后重新检测,这样也许会让错[详细]
-
Web标准:结构,表现和行为分离
所属栏目:[系统] 日期:2020-03-29 热度:66
Web标准:讨论内容结构表现行为分离 内容与表现分离,从标准到国人重视那天起,就已经讨论了,但是停留在div cssxhtml css纯代码的分离,思想上流程上,到底如何分离? 古老的话题:一首古诗的分离 1.给你一首古诗,保存为毫无格式的一堆文字,你去理解它[详细]
-
用CSS遮罩实现过渡效果的示例代码
所属栏目:[系统] 日期:2020-03-29 热度:119
副标题#e# 今天我们展示如何用CSS遮罩创建一个有趣又简单但吸引人的过渡效果。与裁剪一样,遮罩是另外一种定义可见性和元素组合的方式。在下面的教程中,我们将向你展示如何应用新属性实现现代转换效果。我们将使用steps()和位于图片之上的PNG实现一个有趣[详细]