CSS3分成了不同类别,称为“modules”.而每一个“modules”都有于CSS2中额外增加的功能,以及向后兼容.CSS3早于1999年已经开始制订.[18]直到2011年6月7日,CSS 3 Color Module终于发布为W3C Recommendation.[19] CSS3里增加了不少功能,如:“border-radius”.“text-shadow”.“transform”以及“transition”.CSS3亦支持动画(animation)及立体(preserved-3d).…

使用CSS3 HSL声明同样是用来设置颜色的.下一个呢? HSLA? 是的,这个和RGBA的效果是一样的. HSL声明使用色调Hue(H).饱和度Saturation(s)和亮度Lightness(L)来设置颜色. Hue衍生于色盘:0和360是红色,接近120的是绿色,240是蓝色. Saturation值是一个百分比:0%是灰度,100%饱和度最高 Lightness值也是一个百分比:0%是最暗,50%均值,100%最亮. 随想:为什么是”ligntness”呢?或许我更习惯Photosho…

perspective 简单来说,就是设置这个属性后,那么,就可以模拟出像我们人看电脑上的显示的元素一样.比如说, perspective:800px   意思就是,我在离屏幕800px 的地方观看这个元素.(这个属性,要设置在父元素上面) (这个属性呢,有着很冷门的知识请认真看完呢) 先来看看, 加了perspective  和 没有加是什么区别, 第一个小方块,是有加的效果,能明显的看到空间感了有没有, 感觉他是真的像在旋转, 而第二个呢,像是在伸缩. 本章需要知道translateZ 是干…

translate translate这个参数的,是transform 身上的,那么它有什么用呢? 其实他的作用很简单,就是平移,参考自己的位置来平移 translate() translateX() translateY() translateZ() translate3d() translateX 向X轴平移,填正数往右平移,填负数,往左平移 translateY 向Y轴平移,填正数往下平移,填负数,往上平移 translateZ 向Z轴平移,这个可能有点难理解,想像一个场景,你现在和电脑屏…

css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 鼠标光标属性 列表样式 定位属性 浮动和清除浮动 滚动条 样式显示和隐藏 字体与颜色 font-family:微软雅黑;/*字体名称(类型):微软雅黑,黑体,楷体,宋体*/ font-size: 20px;/*字体大小*/ font-weight: 600;/*字体加粗*/ font-style:…

transition 设置变换属性的过渡效果,举个例子,也就是说, 如果从width100px 变成 width200px,要以什么方式进行变换,速度,时间,类型等. transition transition-property transition-duration transition-timing-function transition-delay transition-property 指定参与过渡的属性. 参数: none:默认值,也是没有 all:监测所有变换属性的属性. 支持过渡效…

text-shadow 其实这东西,跟  box-shadow 差不多,没啥好说的不懂的话,点这里→  css3系列之详解box-shadow  . 它只有 四个参数 x(第一个值设置x位置) y(第二个值设置y位置) blur(第三个值,设置阴影模糊程度) color(第四个值,设置阴影颜色) 它跟 box-shadow 的差别就是,没有 外阴影和 内阴影之分. text-shadow 只有外阴影,也就是 文字下面的阴影. 本章呢,来利用他实现几个 小应用: 浮雕效果:凸出来 镂空效果:凹进去…

技术分享: CSS3 系列 css 一键换肤 css 打印样式,媒体查询 css 禁用选择 css 性能优化 css 计算单位 css 3D 特效 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!…

CSS3模块化结构 CSS历史发展 CSS(Cascading Style Sheet),层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. CSS3属性选择器 E[attr=val]表示具有属性att且其值等于val E[attr*=val]表示具有属性attr且其值中包含val E[attr^=val]表示具有属性attr且其值以val开头 E[attr$=val]表示具有属性attr且其值以val结尾 事实上除了以上四个之外还有俩用的相对比较少的属性选择器,那就…

一.序 博主最近这些天,突发奇想的想研究一下CSS3的东西,从而提升一下CSS的能力,在学习的过程中发现其实CSS3是一个挺复杂的东西,深入的研究,你可能会涉及到初中的光学理论来帮助理解一些概念,同时如matrix可能还需要你用大学学习的矩阵来进行分析,因为这是本系列的第一篇文章,所以就从最好玩的开始介绍起,这样也不至于让大家失去了阅读下去的兴趣,同时写这些文章的一个主要的原因是,CSS3挺复杂的,一方面整理一下自己的研究,方便日后重新的翻看,另一方面,也想帮助更多的读者而来进入CSS3这个世界…

这是一个正在准备中的系列文章,主要参考的是<Web Scraping with Python_Collecting Data from the Modern Web-O'Reilly(2015)>.这是一本关于网络数据采集(俗称的爬虫)的书,由浅入深,比较适合入门.在学习过程中也肯定会参考一些优秀博主的优秀文章,这个系列的文章就是为了记录自己的学习轨迹,如果有人也在关注的话,可以一起学习交流,也是极好的. 后续文章发布的时候,也会相应地更新这个地方的目录.…

与背景相关的新增属性 大家都知道在HTML页面中,元素都是由以下几部分组成 使用background-clip来修改背景的显示范围,如果设定为border-box,则背景范围包含边框区域,如果设定为padding-box则不包含边框,包含padding区域.如果设定为content-box则背景只包含内容区域 background-origin属性:指定绘制背景图像的绘制起点,它的属性值跟background-clip是一样的,也就是说你可以通过它的指定绘制时从边框的左上角开始或者从内容的左上角…

CSS3媒体支持 在css3中允许我们在不改变内容的情况下,在样式中选择一种页面的布局以精确的适应不同的设备,从而改善用户体验 可以利用meta标签在页面中指定浏览器在处理本页面时按照多少像素的窗口宽度来进行,指定方法如下所示 <meta name="viewport" content="width=600px" /> CSS可以通过设置media来决定该样式所适用的设备,如screen.tv.print.speech.handheld.all等 <…

因为本人用的黑金四代开发板,中央芯片采用ALTERA的cycloneIV E,所以就此器件阅读altera官网资料,并做相应的笔记,以便于以后查阅 Cyclone IV 器件系列具有以下特性:■ 低成本.低功耗的 FPGA 架构:■ 6 K 到 150 K 的逻辑单元■ 高达 6.3 Mb 的嵌入式存储器■ 高达 360 个 18 × 18 乘法器,实现 DSP 处理密集型应用■ 协议桥接应用,实现小于 1.5 W 的总功耗 逻辑单元 15408 嵌入式存储器 504Kbits 嵌入式18*18…

在上次博文中已经讲了transition,其实animation与transition功能相同,都是通过改变元素 的属性来实现动画效果的.但是它们也有区别:transition是只能通过改变指定属性的开始值 与结束值,然后在这两个属性值之间进行平滑过渡的方式来实现动画效果.animation却可以通 过定义多个关键帧以及每个关键帧中元素的属性值来实现更为复杂的动画效果. 语法 animation: name duration timing-function delay iteration-cou…

概述 iOS中对于音频的处理,苹果提供了两个库. AVFoundation AudioToolbox 在iOS系统中apple对上述的流程进行了封装并提供了不同层次的接口…

box-sizing box-sizing: 俗称ie6 的混杂模式的盒子模型.  首先来了解一下 ie6 的混杂模式,和我们常用的 盒子模型有什么不一样 正常模式下: 我们设置的 width  和  height  就是盒子的 content 区的大小,但是在 ie6 的混杂模式下,设置的 width 和  height 就是盒子的整体 width  height. ie6 的混杂模型呢,你设置的 宽, 和 高,就是盒子的大小的最终宽高, 并不会因为你添加了 padding  和 border…

text(文本) white-space: word-break word-wrap/overflow-wrap text-align: word-spacing letter-spacing text-indent text-size-adjust Multi-column(多列) columns column-width column-gap column-rule column-rule-width column-rule-style column-rule-color column-sp…

这一系列主要是总结学习python过程中的方方面面(已经学完,时间大概是一周左右).当然限于个人水平java也就是够用,python短时间内也不可能深入到哪里去.所以这次的分享的目的是能够快速使用python做一个桌面开发与web开发的小应用. 不问为什么之python开发环境搭建 我是这样开始学习python:从概念入手 一边做一边学python,桌面小工具 一个python web小应用的开发…

为了生存,就得干一行爱一行.那就学习下lucene吧. 全文检索介绍 流程: 建索引 准备待搜索文档 文档分词:将文档分成一个个单独的单词,去除标点符号.停词(无意义的冠词介词等),得到token 语言处理:统一小写,单词缩减或转变为词根形式,得到term 索引:用term创建字典,term->doc,对字典按字母顺序排序,合并相同的term成为文档倒排链表.term->doc1,doc2,doc3 搜索 输入查询语句 处理查询语句:词法分析.语法分析.语言处理,得到语法树 搜索索引,得到符合…

viewport设置适应移动设备屏幕大小 viewport:允许开发者创建一个虚拟窗口并自定义其窗口的大小或缩放功能 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" /> 代码中的content属性可以设置如下6种不同参数 Media Queries如何工作 1.定义当前屏幕可视区域的宽度最大值是600像素 <link href=&…

水平翻转效果: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .stage { width: 140px; height: 200px; perspective: 800px; } .container { position: relative;…

一.三角形 #wrap div{ margin: 0 auto; } .triangle_three { height:0px; width:0px; border-bottom:50px solid #ccc; border-left:100px solid transparent; border-right:100px solid transparent; } .triangle-four{ height:20px; width:20px; border-top: 50px solid bl…

我的新伸缩盒子.http://www.cnblogs.com/leee/p/5533436.html…

Animation:动画animationshi css的动画效果.需要定义keyframe动画对象来实现.为了兼容苹果/chrome,firefox,ie每次定义需要添加-webkit-,-moz-和keyframe注:在苹果浏览器中,如果遇到-webkit-transform属性失效的时候,请把每个动画区间的每一个叠加的属性补全.例如:/*部分在chrome和火狐,ie下均没有问题,在360和我safari下就得用上面所写*/,建议以后都写全.@-webkit-keyframes rolat…

弹性盒子(伸缩盒) 注意,本篇会很长,非常长, 因为弹性盒子的知识点比较多 搜索 弹性盒子的属性  ctrl + F   如果觉得图太小, ctrl + +键 设置弹性盒子的属性: display:flex    inline-flex  (这两者的区别就是, 一个是 block   一个是 inline-block) 首先要注意的是: 你给父元素设置了 display:flex  子元素们并不会改变成内联元素.  虽然他们的效果看起来是, 但是实际上并不会改变.该是啥,还是啥 接下来来看一下,…

rotate rotateX rotateY rotateZ rotate3d rotate: 旋转该元素,配合着transform-origin属性,transform-origin 是设置旋转点的.(没有设置transform-origin 属性也可以,只不过是根据该元素的中心点旋转,也就是center center) 加上 transform-origin 设置旋转点.transform-origin 是根据自己而定位的,所以 0px 0px 就是左上角那个点. rotateX: 讲这个之…

  1.按钮的制作方式 用图片(目前用的不多) 纯CSS a标签 input 图片二决定了input的类型 当input的type属性是submit button等这些的时候他呈现一个按钮 button标签 2.CSS 行内元素设置宽高不生效,适用display:block:可以将行内元素设置为块集元素 text-align可以是文字在容器中横向居中 line-height当数值与height一样的时候文字垂直居中 text-decoration将文字下划线去除 background属性可以为元…

skew skewx skewy skewX()  倾斜该元素,里面填的是角度,下面↓ 你会看到,随着元素被倾斜,高度居然不变.聪明的你,一定会知道,高度不变,代表了,Y轴被拉伸了. 跟scale 同理,改变的是 轴的刻度. → scale skew 也就是 skewx  和 skewy 的结合体,但是又有不同之处. 如果使用单个参数,那跟单独使用 skewx 和 skewy是一样的效果 但是!如果你同时使用两个参数了,那么跟 同时使用skewx 和 skewy 时有一点差异的. 那么,是为什么…

scale() scaleX() scaleY() scaleZ() scale3d() 改变的不是元素的宽高,而是 X 和 Y 轴的刻度 本章有个很冷门的知识点 → scale 和 rotate 一起使用 -------------------------------------- scaleX() scaleY() 缩放该元素,>1 放大, <1 缩小  默认值是 1: 看了上面的图,你可能会觉得,好像是100px  变成了200px   但是实际上,并不是.变的不是 元素的 宽高. 其实…