标签‘CSS’

为什么建议不要使用「h5」这个简称?

最近发现好多人喜欢将 HTML5 说成 h5,甚至是代指移动端的 Web 页面或者 Web App。虽然说起来朗朗上口,但是小编真的不建议这样来使用。

小编很早之前做过一个关于「h5 这个说法是否喜欢」的调查,总共有 552 位粉丝参与,最终结果是:有 16.7% 的人认为「很好」,37.5% 的认为「无所谓」,有 45.8% 的人认为「不喜欢」(投票数据的原始查看地址: http://vote.weibo.com/poll/2905710 )。那究竟为什么会有那么多人不喜欢「h5」这个简称呢?

「h5」这个简称非常不专业,容易造成误导。

与 JavaScript 被简称为「JS」不同,据小编了解到的情况,h5 这个说法目前只在中国大陆地区的程序员中使用,台湾、印度和美国等地区并没有这个简称,会造成国内外技术说法不一致。而更重要的一点是,JS 是一个指代清晰的简称,没有歧义,就指 JavaScript 这种程序语言。但 h5 却不是,至少 HTML 中还有个 h5 标签。 查看更多...

纯CSS实现Footer固定底部,超过一屏自动撑开

日常开发中经常遇到网页内容过少时底部版权区域上浮,网页是经典的Header、Content、Footer三部分组成的情况下,之前要么采用js修改Footer的position,高度低于一屏时采用fixed,超出改用static,但是这样会出现抖动,也试过初始化时设置Content的min-height,但终归是使用了js,不太完美,CSS的也试过使用margin-bottom:-10000px;padding-bottom:10000px的方法填充底部颜色,但效果不见得有多好看。

最近又遇到此类问题,尝试采用之前提到过的CSS水平垂直居中方法来解决,最终找到比较靠谱的方法,就此总结一下,以备后用。

废话不说,直接上代码,以下为CSS,采用border-box,所以IE7下面无效,由于工作原因,只测试到IE8,没考虑低版本浏览器。 查看更多...

关于HTML5不得不说的一些事

近两年来,IT界炒的最火热的发展方向无非是O2O,而炒的火热的技术也无非是HTML5,但实际上,HTML5究竟是什么?能做什么呢?知其然,更要知其所以然,这是中国人对知识真理的追求写照。然而在关于HTML5的问题上,这句话并没有显现出来。HTML5会改变下一代互联网,HTML5潜力无限,这些观点在互联网上多之甚多。为什么呢?HTML5在互联网上究竟带来了什么?这些问题一抛出,全行就愕然了。甚至HTML5究竟是什么,都很难让人阐述清楚。

首先,简单而言HTML5就是超文本标记语言规范的5.0版本,当然对于不同的人来说,HTML5具有不同的意义。对某些人来说,它仅仅意味着"页眉"和"页脚"之类的新标签,以及一系列出现于标记的新属性。对其他人而言,这意味着出现在网络上的新鲜有趣事物,其中包括植入单个浏览器或其他非HTML5规格的技术。 查看更多...

几种有用的网页排版技巧分享

在网页设计中经常会忽略排版,其实这是很不利于SEO和提高用户体验的举动,因为注重网页排版可以提高你的网页设计水平和可读性。下面分享几种有用的排版技巧,希望有用。

1、纠正行高

最常见的网页布局错误之一是定义了不正确的行高。行高是定义一行文本的高度,所以我们必须按照文本字体大小来设定行高。
一般来说,在设置文本行高的时候,我经常在字体大小的基础上加上7个像素(对12-17像素的字体而言)
查看更多...

CSS3动画技术应用基础分享

随着网络的发展,浏览器具有更强的渲染更高级代码的能力,我们正逐步实现跨越所有平台和浏览器的目标。我们不但可以要花费更少的时间来确保我们的盒模型在IE6中看起来正常,而且形成了鼓励创新、避免hack、重前端脚本的氛围。

网络是一个非常好的环境,也是一个有丰富的知识来分享的协作社区。我们想要有圆角 ,我们就实现了它;我们想要 多背景图片,我们实现了它;我们想要 边框图片,我们也让它实现了。所以需求从来不是问题,否则,我们可能还都仍然在使用table来布局页面而且使用过多的代码呢。我们都知道,网络无所不能。

为网络而生

CSS 3的属性比如border-radius、box-shadow和 text-shadow 在webkit(Safari、Chrome等)和Gecko(Firefox)等先进的浏览器中的使用开始出现增长的势头。它们(这些CSS属性)已经为用户创建更轻量的页面和更丰富的体验,而且它们可以优雅的降级。然而,这些只是CSS 3能为我们做的众多事情中的一小部分。 查看更多...

常用浏览器CSS hack汇总表及部分示例

1. 此汇总表中测试浏览器的版本为:
微软系统自带:IE6、 IE7、IE8
火狐:Firefox 3.6.6
Safari:Safari 5.0
谷歌浏览器:Chrome 6.0.458.1 dev
Opera浏览器:Opera 10.60
2. 其中,多数CSS hack是在selector{property:value;}基础上更改的。
selector代表CSS选择器,property代表CSS特性,value代表特性的值。

3. FF代表Firefox,Ch代表Chorme,Sa代表Safari,Op代表Opera 查看更多...

jsp页面中使用iframe几个问题总结

最近做项目,jsp的,我做前台的输出,因为不常用jsp做界面美化,更不常用iframe控制页面。这回可算遇到不少问题了,首先,在iframe内部使用link获取css和jsp整个文档中获取获取js脚本都有问题,其次就是,遇到了ff的onclick未定义情况。这里不再赘述,相信大家都遇到过了吧,可恶的网络,卡的要命。刚刚写了近一千字的内容,居然没有保存,发布后只有两个字,杯具啊!平时几分钟保存一次草稿,这次居然没有自动保存,果断不写了。直接给出我网上搜集的解决方法。

首先就是link问题,这里我还没有找到问题根源,直接jsp include动态写页内了。

然后就是ff的onclick事件。找了以下解决方案。
firefox没有这个事件,需要自己处理一下,代码如下:

function doClick(obj) {
if (document.all) {//如果支持的话,是ie下,默认有这个事件,
obj.click();
} else { //否则就自己添加一个
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, true);
obj.dispatchEvent(evt); 查看更多...

CSS中IE6、7和火狐对margin、padding的兼容性解析

1、IE与Fire Fox识别CSS属性区别标签 !important

#page_body{
width: 1000px !important;
height:30px !important;

width: 980px ;
height:36px ;
}

查看更多...

浅析CSS中ID和Class、Margin和Padding的区别

这两个区别都是比较容易混淆的问题,尤其是Class与ID,相信很多人并没有仔细了解过之中区别。以下是我的一些理解:

1. ID与Class的区别

ID,通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时(比如说通常一个页面都是由一个页眉,一个报头,一个内容区域和一个页脚等组成),一般使用ID比较理想,因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中很少会出现大于一次的情况。 查看更多...

网页中的 CSS 元素透明法

1、HTML 元素透明

其实本身,CSS 实现元素透明是件容易事儿。直接上代码:

opacity:.5

opacity 指的是不透明度,取值为 0~1 之间,1 表示完全不透明,0 表示完全透明。

A 级浏览器基本都支持 opacity 属性,但碰上 IE,总没好事。不过 IE 有滤镜,可以帮助我们拐弯抹角地搞定不透明度:

filter:alpha(opacity=50);

注:事实上会碰到透明背景层,而 opacity 属性是会继承的,避免这个问题,需要结合定位来实现。 查看更多...