【网页重构应该避免的10大CSS糟糕用法_html/css_WEB-ITnose】教程文章相关的互联网学习教程文章

CSSmargin用法详解_html/css_WEB-ITnose

CSS的margin用法详解:建议:尽可能的手写代码,可以有效的提高学习效率和深度。margin属性在网页中使用非常的频繁,所以这里详细介绍一下此属性的用法。此属性用来定义对象的外边距的,也称之为外补白,所谓的外边距就是围绕边框外侧的空白区域。可以单独定义上下左右某一方位的外边距。代码实例如下:实例一:子div没有外边距的情况: 蚂蚁部落.parent{ width:400px; height:400px; border:1px solid red;}.children...

CSS的padding用法详解_html/css_WEB-ITnose

CSS的padding用法详解:建议:尽可能的手写代码,可以有效的提高学习效率和深度。padding属性在网页中使用非常的频繁,所以这里详细介绍一下此属性的用法。此属性用来定义元素的内边距或者内补白,所谓的内边距就是元素中的内容与元素内侧之间的空白区域。可以单独定义上下左右某一方位的内边距。代码实例:实例一:没有设置父div的内边距的时候: 蚂蚁部落.parent{ width:400px; height:400px; border:1px solid red;...

css的:first-child伪类选择器用法介绍_html/css_WEB-ITnose

css的:first-child伪类选择器用法介绍:此选择器能够匹配元素集合中第一个元素。:first-child伪类选择器要和其他选择器配合使用,例如: li:first-child 以上代码可以匹配li元素集合中第一个li元素。代码实例如下: 蚂蚁部落li:first-child{color:green;} html专区 Div+css专区 Jquery专区 Javascript专区 以上代码可以将li元素集合中第一个li元素中的字体颜色设置为绿...

CSS3动画属性animation的基本用法_html/css_WEB-ITnose

CSS3新增了一个令人心动的属性:animation,尽管利用animation做出来的动画没有flash或者javascript做出的动画流畅绚丽,但是从代码量和浏览器性能上有着明显的优点。 animation基本用法是: animation: name keeping-time animate-function delay times iteration final; 第一个参数:name (animation-name): 动画的名字,即设定动画过程的名字,CSS3采用“关键帧 keyframes”来定义动画,方式形如: ...

css的!important用法介绍_html/css_WEB-ITnose

css的!important用法介绍:!important可以提升css语句的权重,下面就通过代码实例做一下简单介绍。它有些浏览器兼容性问题,出在奇葩的IE6浏览器身上,不过问题不大,因为IE6的用户以后会越来越少直到绝迹。代码如下: 蚂蚁部落#antzone{ width:150px; height:100px; background-color:green!important;}#antzone{ background-color:blue;} 上面的代码中,如果不使用!important话,那么背景颜色就是蓝色,...

css3的@keyframes用法介绍_html/css_WEB-ITnose

css3的@keyframes用法介绍:keyframes翻译成汉语是"关键帧",如果会一点flash知识的话,对它应该不陌生,原来和flash是一样的。我们可以利用它定义相关的状态,由此产生动画效果。语法结构: @keyframes animationname {keyframes-selector {css-styles;}} 参数解析:1.animationname:必需,规定动画的名称。2.keyframes-selector:必需,用来规定动画的时长,可以是百分比的形式,也可以是from to的形式。3.css-st...

移动端rem单位用法_html/css_WEB-ITnose

1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。二者都是相对单位 2.我们现在在切页面布局的使用常用的单位是px,这是一个绝对单位,web app的屏幕适配有很多中做法,例如:流式布局、限死宽度,还有就是通过响应式来做,但是这些方案都不是最佳的解决...

CSS3的calc()用法简单介绍_html/css_WEB-ITnose

CSS3的calc()用法简单介绍:calc是calculate(计算的意思)缩写。从calc()的外表来看,它类似于程序语言中的方法,具有计算功能。确实如此,它可以动态的计算css中一些元素的相关属性值,能够运用简单的"+"、"-"、"*"、"/"四则运算。基本规则如下:(1).可以使用百分比、px、em、rem等单位。(2).可以混合使用各种单位进行计算。下面看几个代码片段: .box{ border:1px solid #ddd; width:calc(100%-2px)} 上面...

Bootstrap3CSS样式基本用法总结_html/css_WEB-ITnose【图】

出于学习需要,自觉得把基本的bootstrap用法自己敲一遍,对每个用法有个较清晰的印象,所以做了本篇总结,这也是一个巩固的学习过程。 可点击左边的目录,方便速查。 按钮 a,input,button都可以设置为按钮 a标签按钮 button标签按钮 a标签按钮 button标签按钮 预置样式 default样式 primary样式 success样式 info样式 warning样式 danger...

:before和:after伪元素的常见用法总结_html/css_WEB-ITnose

1. 利用content属性,为元素添加内容修饰: 1) 添加字符串: 使用引号包括一段字符串,将会向元素内容中添加字符串。栗子: a:after { content: "after content"; } 2) 使用attr()方法,调用当前元素的属性的值: 栗子: a:after { content: attr(href); }a:after { content: attr(data-attr); } 3)使用url()方法,引用多媒体文件: 栗子: a::before { content: url(logo.png); } 4) 使用counte...

网络字体的中文用法(一)_html/css_WEB-ITnose

如果你使用的Windows XP操作系统,在浏览中文网页时,你会发现网页上的汉字基本上全部都是宋体。这是因为你的操作系统里安装了中文宋体字库,而且被设定为默认字体。浏览器会用你的默认字体显示网页上的汉字。进入Windows7/8时代,Windows系统的默认字体变成了微软雅黑,于是,所有的中文网站上的汉字使用的字体都是微软雅黑。 网页上的汉字显示时使用的字库可以用CSS指定( font-family),比如说,你不喜欢微软雅黑,你的电脑里...

[CSS]详细解释@media属性与(max-width:)and(min-width)之间的关系及用法_html/css_WEB-ITnose

前言 现在 HTML5/CSS3 很流行罢,也是未来时代的趋势。在 HTML5 带来的许多实用功能之后,CSS3也同带来了一些牛逼哄哄的功能呢。 动画 animation 转化 transform 过渡 translation 尽快这已足够让我们兴奋,许多之前必须用 JS 或 JQ 写的效果用 CSS 就能实现,现在几行 CSS3 代码就够了。 但是最值得注目的应该是 @media 多媒体查询。 @media 是什么怎么用? 苹果官网对 CSS3 @media...

alt和title的用法区别_html/css_WEB-ITnose

经常用到这两个属性,但是一直没有总结他们的区别。现在我对他们两个的用法做一下总结: 相同点:他们都会飘出一个小浮层,显示文本内容。 不同点: 1.alt只能是元素的属性,而title即可以是元素的属性也可以是标签,例如:标题。 2.alt属性则是用来指定替换文字,只能用在img、area和input元素中(包括applet元素),用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。注意,alt是替代图像作用而不是提...

absolut绝对定位的非绝对定位用法_html/css_WEB-ITnose【图】

一、absolute绝对定位的流行用法 一般而言,我们会用absolute绝对定位做什么呢?就是绝对定位,顾名思意,定死在某个位置上。例如,lightbox效果就是使用的绝对定位,例如新浪微博的弹出提示信息,我要转发李冰冰姐姐的微博,结果就会弹出: 还有就是与父relative相对定位标签结合使用,实现相对于父标签的绝对定位效果,例如人人网的搜索下拉菜单效果: 这里用法少不了的是left(right)绝对定位值或是top(bottom)值,...

看到一个用法<linkrel="stypesheethref="./abc.css?v=20130809"type="text/css">_html/css_WEB-ITnose

CSS URL 如题,想知道这时候href里面的后面的参数 ? v= 这个用法和url中的参数是一个意思吗? css也可以使用参数吗? 回复讨论(解决方案) 相当于版本信息,不一至浏览器就不会从缓存里调用了。 这个是一种公共的用法吗,换句话说这里一定是用v吗,那么浏览器把这个版本信息存在哪里了? 这个是一种公共的用法吗,换句话说这里一定是用v吗,那么浏览器把这个版本信息存在哪里了? 你不懂这个,没用cdn,用不到. 这...