css-css最新消息-电脑技术网-专业的电脑技术,领先的电脑组装技术网站
首页标签关于“css”的最新内容
css

css

CSS 教程 通过使用 CSS 我们可以大大提升网页开发的工作效率! 在我们的 CSS 教程中,您会学到如何使用 CSS 同时控制多重网页的样式和布局。

全部内容

用CSS代码将网页内容全部变成灰色的教程

想要让网站网页整体变成灰色,那么只需要将以下代码添加到站点页面的<head></head>中间即可,PS:该代码针对 IE11 浏览器无效。<style type="text/css">*{webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%...[详细]

2018-04-02 09:47:30 包小可

vue如何引用其他组件(css和js)

  1.vuejs组件之间的调用components  注意:报错Do not use built-in or reserved HTML elements as component id:  修改组件的名字,例如不能使用address为组件名字  组件名字不要使用内置的或保留HTML元素为...[详细]

2017-06-14 08:57:26 包小可

CSS Grid布局指南

简介CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式。如我们所知,CSS 总是用于网页的样式设置,但它并没有起到很好的作...[详细]

2016-05-27 15:02:42 包小可

Css Expression究竟该不该用?

  前一段时间在做项目的时候碰到了经常会遇到的一个场景,也就是图片居中及等比例缩放的问题,一般都是采用如下办法:  Demo:    HTML代码:    CSS代码:  div.imgbox...[详细]

2015-12-29 08:49:43 huang199

纯 CSS 创建各种不同的图形形状

介绍  今天,我们要学习如何使用简单的CSS来创建不同类型的平面图形。 使用代码  矩形.rectangle { width: 250px; height: 150px; background-color: #6DC75F;...[详细]

2015-11-10 12:57:33 huang199

css代码优化的12个技巧

1.ID 规则2.Class 规则3.标签规则4.通用规则对效率的普遍认识是从Steve Souders在2009年出版的《高性能网站建设进阶指南》开始,虽然该书中罗列的更加详细,但你也可以在这里查看完整的引用列表,也可以在谷歌的《高效CSS...[详细]

2015-08-26 19:43:06 huang199

低版本IE正常运行HTML5+CSS3网站的3种解决方案

如果开发时按最低标准,比如IE6不支持的特性,我们统统不用,那就没有必要写这篇文章了;但我想这种情况极少,更多的开发,是在现代浏览器上使用它们支持的特性,而在早期浏览器上做一定的降级处理,这就是所谓 “渐进增强”,也是本文...[详细]

2015-08-26 19:43:05 huang199

CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera

现在的浏览器IE6-IE10、Firefox、Chrome、Opera、Safari。。。数量众多,可谓百家争鸣,对用户来说有了很多的可选择型,不过这可就苦了Web前端开发人员了。今天把一些常用的CSS Hack整理了一下,包括常用的IE hack以及火狐、...[详细]

2015-08-26 19:43:05 huang199

纯CSS实现鼠标放上去改变文字内容

css样式复制代码 代码如下:.remind span {display:block;margin-top:-22px;}.remind a:hover {padding-top:22px;}.remind a {float:left;overflow:hidden;}.remind{height:22px;line-height:22px;overflow:hidden;pa...[详细]

2015-08-26 19:43:02 huang199

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

1、transition-property的语法[css]transition-property :all(所有属性改变) || [attr] (指定要运动的样式)|| none(没有属性改变)  2、transition-property的属性值  (1)none:transition马上停止执行  (2)all:元...[详细]

2015-08-26 19:43:01 huang199

从零学CSS系列之文本属性

1.line-height可以给某个元素指定一个不带单位的缩放因子,这样它的后代元素就会继承这个缩放因子,再根据自身的字号大小来计算自己的行高(line-height)值,复制代码 代码如下:body { font-size: 12px; line-height: 1.5...[详细]

2015-08-26 19:42:58 huang199

CSS3+Js实现响应式导航条

今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query。具体可以查看浅谈响应式布局这篇文章,这里就不花费大量的篇幅介绍了,主要看...[详细]

2015-08-26 19:42:57 huang199

CSS3实例分享之多重背景的实现(Multiple backgrounds)

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

2015-08-26 19:42:57 huang199

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

方法一:复制代码 代码如下:<div style="width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"> 任意长度的字符串 </div>说明:优点是内容可以为任何HTML元素,包括超链接和图片等,在IE6中还会在...[详细]

2015-08-26 19:42:56 huang199

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

1.float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。div一个典型的块级元素,会单独占据一行。先...[详细]

2015-08-26 19:42:55 huang199

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

在我写“你未必知道的JavaScript和CSS交互的5种方法”一文时,人们对于JavaScript和CSS是如何重叠的感到惊讶。今天,我将重点强调你能用CSS完成的7种工作――不需要通过JavaScript或图片。  CSS@supports  在使用一...[详细]

2015-08-26 19:42:55 huang199

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

在当前流行的的网站上,我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单),简单的方式可以使用一张图片代替,但是随着前端技术的发展,以及开发者对于前端性能的“吹毛求疵”,越来越多的前端开发者开始“返璞归真”,在...[详细]

2015-08-26 19:42:53 huang199

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

最终效果图:
基本原理先设定一个背景色的普通div盒子,然后使用上篇post得到的三角型图标,把div盒子设置为相对定位模式,三角型图标设置为绝对定位,位置相对于div盒子,调整到合适的位置。这样就得到一个基本的tooltip,但是没...[详细]

2015-08-26 19:42:52 huang199

讨论CSS中的各类居中方式

今天主要谈一谈CSS中的各种居中的办法。
首先是水平居中,最简单的办法当然就是复制代码 代码如下:margin:0 auto;也就是将margin-left和margin-right属性设置为auto,从而达到水平居中的效果。那么其他的办法呢?容我一一...[详细]

2015-08-26 19:42:48 huang199

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

刚学习了这个案例,然后觉得比较好玩,就练习了一下。然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易 的事,至少我是这么觉得。但是,用CSS3画出来确实是第一次接触,所以很乐意去尝试一下,对...[详细]

2015-08-26 19:42:48 huang199

纯CSS3代码实现滑动开关效果

废话不多说了,炫下效果图并附上演示和源码下载。实现效果如下:查看演示 源码下载 HTML结构代码:CSS代码:
/*表单开关样式*/.ui-switch {position: absolute;font-size: .16rem;right:0.07rem;top: 50%;margin-top: -...[详细]

2015-08-20 16:04:55 huang199

10个必备的CSS技巧总结

CSS是网页设计师的基础,对CSS的了解能使他们能够设计出更加美观别致的网页。使用CSS技巧来巧妙地处理CSS是非常令设计师着迷的事情。在CSS的深海世界里有很多有意思的东西,你...[详细]

2015-07-04 23:25:18 huang199

jQuery和CSS3价格表和结账表单切换动画特效

简要教程  这是一款非常实用的jQuery和CSS3价格表和结账表单切换动画特效。该特效先向用户展示各种价格表,当用户选择了一个价格表之后,价格表会变形为结账表单,效果非常的炫...[详细]

2015-07-02 09:14:11 huang199

最新CSS4选择器前瞻

W3C发布了最新的CSS选择器4级草案。本文将介绍这些最新的CSS4选择器的使用方法和注意事项。2015年4月30日,W3C发布了最新的CSS选择器4级草案。在我们开始介绍这些新的CSS选择...[详细]

2015-07-02 09:13:42 huang199

Gulp学习指南之CSS合并、压缩与MD5命名及路径替换

这里主要记录一下用 gulp 来合并、压缩CSS以及进行 MD5命名以及替换文件中引入的CSS文件,当然这一系列操作都是用基于gulp插件的,主要会用到下面的几个插件:var concat = requi...[详细]

2015-06-27 10:58:12 huang199

网站速度优化技巧:Nginx设置js、css过期时间方法

网站设置Js、css等文件的过期时间,是提升网站速度的基本技巧方法之一,之前写过如何在IIS设置网页内容过期时间一文,满足了部分网友的需要,最近有网友在群里提到,他们使用的...[详细]

2015-06-07 12:22:52 huang199

CSS 连接后面加上"?"表示什么意思?

<link rel="stylesheet" href="http://static.ak.facebook.com/css/actionspro.css?44:72882" type="text/css"/>facebook上的css连接后面都跟了个参数.. 这是表示什么意思呢?可以看成是css的一个版本...[详细]

2015-03-01 14:14:26 admin

国产开源CSS框架推荐

1.拼图Pintuer拼图是优秀的响应式前端CSS开源框架,国内前端框架先驱及领导者,自动适应手机、平板、电脑等设备,让前端开发像游戏般快乐、简单、灵活、便捷。拼图:中国版的Bootstrap,优秀的跨屏响应式布局...[详细]

2015-03-01 14:14:21 admin

分享两个DEDECMS分页样式css代码

分页样式虽然很短,但是复用率非常高,早就想过整理下这个东西,一直拖着没弄,今天开个头,以后用起来也方便点。模板中的分页部分页部分源码:<div class="pagination-wrapper"> <div class="pagination"> {ded...[详细]

2015-02-28 17:51:53 admin