CSS资料,CSS文章,CSS文档-易库教程_www.escdns.com

易网时代-编程资源站

首页 / 脚本样式 / CSS

CSS3中Transition属性详解以及示例分享

CSS3中Transition属性详解以及示例分享

2016年07月27日 46 阅读

1、transition-property的语法[css]transition-property :all（所有属性改变） || [attr] （指定要运动的样式）|| none（没有属性改变） 2、transition-property的属性值（1）none：transition马上停止执行（2）all：元素产生任何属性值变化时都将执行transition效果（3）attr：指定要运动的样式一、transition-property——指定...

父div高度不能自适应子div高度的解决方案

父div高度不能自适应子div高度的解决方案

2016年07月27日 36 阅读

复制代码代码如下:<div id="parent"><div id="content"> </div></div>当content内容多时，即使parent设置了高度100%或auto，在不同浏览器下还是不能完好的自动伸展。解决方案如下：复制代码代码如下:<div id="parent"> <div id="content"></div> <div style="...

告别AJAX实现无刷新提交表单

告别AJAX实现无刷新提交表单

2016年07月27日 43 阅读

通常对于无刷新提交表单，我们都是运用ajax实现的。前段时间跟着老大了解到另一种无刷新提交表单的方法。现在整理出来分享给大家。第一种：（html页面）复制代码代码如下:<！DOCTYPE HTML><html lang="en-US"><head> <meta charset="utf-8"> <title>无刷新提交表单</title> <style type="text/c...

从零学CSS系列之文本属性

从零学CSS系列之文本属性

2016年07月27日 43 阅读

1.line-height可以给某个元素指定一个不带单位的缩放因子，这样它的后代元素就会继承这个缩放因子，再根据自身的字号大小来计算自己的行高（line-height）值，复制代码代码如下:body { font-size: 12px; line-height: 1.5;}h1 { font-size: 36px;}这里，body 的 line-height 是 18px（12 * 1.5），而 h1 的 line-height 则是 54px（36 *...

HTML <！DOCTYPE> 标签

HTML <！DOCTYPE> 标签

2016年07月27日 47 阅读

在默认情况下，FF和IE的解释标准是不一样的，也就是说，如果一个网页没有声明DOCTYPE，它就会以默认的DOCTYPE解释下面的HTML。在同一种标准下，不同浏览器的解释模型都有所差异，如果声明标准不同，不用我说，您自己想就可以了。学习网页标准，浏览器兼容，从哪里开始您自己决定，但是，请认识DOCTYPE：一、什么是DOCTYPEDOCTYPE是Document Type（文档类型）的简写，在页面中，用来指定页面所使用的XHTML（或者HTML）的版...

CSS3+Js实现响应式导航条

CSS3+Js实现响应式导航条

2016年07月27日 44 阅读

今天制作了一个响应式导航条，能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式，这里主要用到的就是CSS3的Media Query。具体可以查看浅谈响应式布局这篇文章，这里就不花费大量的篇幅介绍了，主要看一下这个导航条该怎么做。另外需要提到的是，ie6-ie8是不支持CSS3的Media Query的，因此对于ie6-ie8我们需要特殊处理，就让他们保持默认样式，这对于布局及样式上都要考虑到这一点。首先看一下布局这一块，html代码如下：...

CSS3实例分享之多重背景的实现（Multiple backgrounds）

CSS3实例分享之多重背景的实现（Multiple backgrounds）

2016年07月27日 41 阅读

CSS3的诞生为我们解决了这一问题，在CSS3里，通过background-image或者background可以为一个容器设置多张背景图像，也就是说可以把不同背景图象只放到一个块元素里。首先我们来看一下语法吧：background ： [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [backg...

用css截取字符的几种方法详解（css排版隐藏溢出文本）

用css截取字符的几种方法详解（css排版隐藏溢出文本）

2016年07月27日 43 阅读

方法一：复制代码代码如下:<div style="width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"> 任意长度的字符串 </div>说明：优点是内容可以为任何HTML元素，包括超链接和图片等，在IE6中还会在结尾自动显示省略号。缺点是必须指定宽度数值，并且宽度不能是百分数，否则在IE中会被认为是字符总长的百分比。方法二：复制代码代...

页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理

页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理

2016年07月27日 45 阅读

实现思路：1、需要有一个层将body遮住，放在body上方。2、修改body的overflow属性值为：hidden废话不多说了，将关键代码贴出来了，兼容火狐，谷歌，ie遮罩层的样式代码，红色部分是关键的部分复制代码代码如下:.cover {position:fixed; top: 0px; right:0px; bottom:0px;filter: alpha（opacity=60）; background-color: #777;z-index: 1...

CSS可以做的几个令你叹为观止的实例分享

CSS可以做的几个令你叹为观止的实例分享

2016年07月27日 41 阅读

在我写“你未必知道的JavaScript和CSS交互的5种方法”一文时，人们对于JavaScript和CSS是如何重叠的感到惊讶。今天，我将重点强调你能用CSS完成的7种工作——不需要通过JavaScript或图片。 CSS@supports 在使用一些浏览器可能没有的特性时，每一个优秀的前端开发者都需要进行特性测试。特性测试一直以来都是由JavaScript来做的，许多人使用Modernizr，一个由许多测试良好的案例构成的优秀实用工具，来做特性测试...

详细分析css float 属性以及position:absolute 的区别

详细分析css float 属性以及position:absolute 的区别

2016年07月27日 45 阅读

1.float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。div一个典型的块级元素，会单独占据一行。先看看最基本的块级元素如何排列的。html代码，以下样式都是基于此。复制代码代码如下:<div class="boxBg"> <div class="box1"> 框框1 </div> <di...

IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案

IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案

2016年07月27日 44 阅读

IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值，重现代码如下复制代码代码如下:<！DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>IE6-IE9中tbody的innerHTML不能复制bug</title> </head> <body style="height:3000px...

使用css实现全兼容浏览器的三角形

使用css实现全兼容浏览器的三角形

2016年07月27日 45 阅读

在当前流行的的网站上，我们经常会看到一些小三角形的下拉提示（微博顶部的下拉菜单），简单的方式可以使用一张图片代替，但是随着前端技术的发展，以及开发者对于前端性能的“吹毛求疵”，越来越多的前端开发者开始“返璞归真”，在能不使用图片的场景中减少图片使用，css图标相对于图片还有个优势是我们可以方便的定制图标的大小以及颜色。css实现三角形图标已不是什么新鲜技术，之前也有很多相关的技术文章，这篇文章主要是分析下在实际场景中使用时遇到的问题以及如何回避这些问题。基...

使用css实现全兼容tooltip提示框

使用css实现全兼容tooltip提示框

2016年07月27日 44 阅读

最终效果图：基本原理先设定一个背景色的普通div盒子，然后使用上篇post得到的三角型图标，把div盒子设置为相对定位模式，三角型图标设置为绝对定位，位置相对于div盒子，调整到合适的位置。这样就得到一个基本的tooltip，但是没有边框看起来总是不舒服，我们可以给div盒子设置一个边框，这没什么难度，但是三角形图标如何设置边框呢？这里我们通过一个取巧的方式，让两个不同颜色的三角形图标叠加，并且位置错开1px，这样底层三角形top border被遮盖，只露...

HTML实现title 属性换行小技巧

HTML实现title 属性换行小技巧

2016年07月27日 51 阅读

在换行的地方添加或实现换行<trtitle="指标名称：${target.intename} 指标说明：${target.remark} 指标名称：${target.intename}">是不是超级美观~，简单的2个字符就搞定了，有需要的小伙伴参考下吧。...

表单中Readonly和Disabled的区别详解

表单中Readonly和Disabled的区别详解

2016年07月27日 42 阅读

Readonly和Disabled是用在表单中的两个属性，它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：Readonly只针对input（text / password）和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，...

完美实现浮动元素横排居中显示

完美实现浮动元素横排居中显示

2016年07月27日 48 阅读

经常会遇到这样的页面布局：在一排显示几个不同的区域内容，但它们相对于页面是居中对齐的。注意这些区域内容不只是文字，也许还有图片或者其它元素混合而成。一般这样的布局我们很容易想到要用浮动float，但是怎么样居中对齐而又兼容低端浏览器哪？请接着往下看。首先看html代码：<div class="webFooter"><div class="wrap"><div class="tabs"><ul><li&g...

讨论CSS中的各类居中方式

讨论CSS中的各类居中方式

2016年07月27日 45 阅读

今天主要谈一谈CSS中的各种居中的办法。首先是水平居中，最简单的办法当然就是复制代码代码如下:margin:0 auto;也就是将margin-left和margin-right属性设置为auto，从而达到水平居中的效果。那么其他的办法呢？容我一一道来：line-height首先介绍文字的水平居中方法：复制代码代码如下:<div class="wrap">刘放</div>利用line-height设为height的一样即可：复...

如何使用CSS3画出一个叮当猫

如何使用CSS3画出一个叮当猫

2016年07月27日 42 阅读

刚学习了这个案例，然后觉得比较好玩，就练习了一下。然后发现其实也不难，如果你经常使用PS或者Flash的话，应该就会知道画个叮当猫是很容易的事，至少我是这么觉得。但是，用CSS3画出来确实是第一次接触，所以很乐意去尝试一下，对于我这种菜鸟，确实是帮助不少，至少懂得如何去画一个简单的人物形象出来，再加上一些动画效果，就活了，那就更好玩了！OK，开始之前，先把效果图晒一下：PS:说实话，我觉得挺可爱的，小时候经常看多啦A梦，突然感觉很亲切，很童真，瞬间年轻...

利用CSS3新特性创建透明边框三角

利用CSS3新特性创建透明边框三角

2016年07月27日 44 阅读

先来看一下效果，这在CSS3之前，完全是不可想象的，只有图片才能做的到，但在HTML5和CSS3大行其道的今天，实现这种效果，那都不是事啊。看一下实现的代码：<！DOCTYPE html><html><head><style type="text/css">/* 上三角 */.arrow-up { width: 0; height: 0; border-left: 20px solid transparent...

<< 81 82 83 84 85 86 87 88 89 >>

版权所有©石家庄振强科技有限公司2024 冀ICP备08103738号-5 网站地图