纯CSS实现摆动的挂钟

纯CSS实现的挂钟。只是做了秒针的转动,时针和分针都是静止的。做动画展示用,不要当真。: D

钟摆使用常用曲线速度(linear,ease,ease-in,ease-out,ease-in-out)都不太自然,于是用css的贝塞尔曲线(cubic-bezier)来调整。

贝塞尔曲线工具:http://cubic-bezier.com/

 

See the Pen pure css pendulum clock by kitty wei (@kittywei) on CodePen.

css clip属性剪裁元素

几乎忘了clip这个东西,很少用,但要用起来很好用^ ^。

解决溢出问题,习惯用标签把图片包起来,设定宽高,overflow hidden。

可是有一次,程序员同学完成开发后才知道需要图片剪裁,而那些图片外层木有加标签。要用overflow hidden的话,得要找忙碌的程序员同学修改html代码,还是不要了吧,不是有clip的吗?

<code>clip:rect(top,right,bottom,left)</code>

clip 的唯一合法形状值rect(left,right,bottom,left),元素必须为绝对定位(position:absolute)方能有效。

剪裁一张图片:

<code>img
{
position:absolute;
clip:rect(35px,260px,255px,95px);
}</code>

top, right, bottom, left 值参照下图,对号入座:

clip

浏览器支持情况:http://caniuse.com/#search=clip

去w3school试验一下:http://www.w3school.com.cn/tiy/t.asp?f=csse_clip

Less中的嵌套,混合,带参数混合,运算

Less如其名,是让css的繁琐编码变less的利器。一些基础用法便能解决项目中的多数问题。

1. 嵌套

以a标签为例,通常需要定义a标签及其hover,focus的样式。

css:

a{color:#000;}
a:hover{color:#fff;}
a:focus{color:#ff0000;}

真正的项目中,a标签或许拥有一个类名,并且这个类名较长。

于是复制粘贴类名->写样式->再粘贴类名->加上:hover->写入样式->再粘贴类名->加上focus->写入样式。

或者再有visited样式,接着复制。。。而Less不需要我们这样做。

Less:

a{
  color:#000;
  &amp;:hover{
    color:#fff;
  }
  &amp;:focus{
    color:#ff0000;
  }
}

只需要&:hover, &:focus,不管类名是长是短,是好是坏,再也不用复制它了!”&”是链接符:

有“&”:

a{
  &amp;.tag{
    color:#fff;
  }
}

编译为css(类名为tag的a标签):

a.tag{
  color:#fff;
}

无“&”:

a{
  .tag{
    color:#fff;
  }
}

编译为css(a标签下面的类名为tag的标签):

a .tag{
  color:#fff;
}

2. 混合

定义一个class,里面包含样式代码,如:

.filter{
    filter:alpha(opacity=80);
    -moz-opacity:0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}
h3{
   color:red;
   .filter;
}

编译为css:

h3{
   color:red;
   filter:alpha(opacity=80);
    -moz-opacity:0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}

3. 多参数混合

像上面的混合,可以在其他标签同样调用.filter。但上例的透明度值为80%,而其他地方调用的时候需要改变这个值而其他不变,就需要将值以参数形式传入。

.filter(@percent: 80, @float:0.8){
    filter:alpha(opacity=@percent);
    -moz-opacity:@float;
    -khtml-opacity: @float;
    opacity: @float;
}
h3{
    color:red;
    .filter;
}
h4{
    color:blue;
    .filter(50,0.5);
}

h4中,将透明度的值以变量的形式传入。编译为css如下:

h3{
   color:red;
   filter:alpha(opacity=80);
    -moz-opacity:0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}
h4{
   color:blue;
   filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

无需复制长串css,随意更改参数,随意调用吧^ ^

4.运算

响应式设计中常常需要计算百分比用于大小、定位,Emmet能够帮助计算,但只能保留最多两位小数,并且需要快捷键把结果计算出来,必要的时候手动改成百分比。Less只需写好表达式,编译时会计算结果,于是再也不用关心结果是多少。

div{
   width:550/810;
}

这样的结果是:0.6790123456790124。可是计算宽度,肿么可以用小数点咧??

于是(参考:http://lesscss.org/functions/#math-functions-percentage

div{
   width:percentage(550/810);
}

结果为67.90123456790124%。正是我想要的!够精确!

 

Less中国官网:http://lesscss.net/article/home.html

 

初识yeoman

最近写Less,写着写着发现重复性的、繁琐的工作越来越多,less找软件编译,图片找软件压缩,文件找地方合并。。。于是搜索有一些前端自动化开发的工具,试了几天Grunt,几行命令一切搞定,果然是提高效率,节省体力的神器。

Grunt,一个javascript任务运行工具,可以帮助编译less,sass,压缩图片,合并js文件等等等等。现在有很多介绍Grunt的文章,比如: Grunt 入门教程一:开始使用Grunt(翻译自官方教程)Grunt教程——Gurnt任务的配置。当初接触的时候,也是这些文章一篇篇读下来的。

Grunt有很多实用插件,根据项目需要,其中的contrib-less、contrib-imagemin用得最多,因为写Less,contrib-less能迅速帮助编译并且压缩,再也不需要把编译软件打开,再把less文件选中然后点击编译了。当然,这还是小事,一个项目通常五六个到十多个页面,每次写less,html里面要写上style.less,并且加入编译less的js,可是less编译成css后,还得手动把html里面的style.less改成style.css。当然,DW里面批量修改,没问题,可是真心觉得活干多了!怎么办呢?yeoman!!

由于基础不好,yeoman也是研究了数个星期才弄到可以顺利开展项目。yeoman,前端开发自动化流程的利器,别的不说,至少能解决自己目前项目的所需。

前端项目可以更简单—Yeoman入门指南(1)这篇文章真心不错,不仅介绍了yeoman是什么,还有分享了安装教程。于是,我也想要分享一下自己的使用心得,因为刚开始时遇到真心不明白的问题。

1. “Yeoman其实是三个工具的集合:YOGRUNTBOWER” –前端项目可以更简单—Yeoman入门指南(1)

所以,要安装yo、grunt-cli、bower。在安装grunt-cli之前,先要安装node.js。因为Grunt和Grunt的插件都是通过Node.js的包管理器npm来安装和管理的。

下载安装好node.js后,可以查看node.js版本,

按住Win+R,输入命令:node -v

node

2. 接下来用npm安装yo、grunt-cli、bower。

命令:npm install -g yo grunt-cli bower

看到下面的提示,那就安装成功了:

yo

3. 上面的完成之后就可以安装工程模板。

webapp模板是基于sass的,由于个人是Less使用者,所以拿lessapp举例。

安装lessapp模板,输入命令: npm install -g generator-lessapp

less

 

完成!以上命令全部在根目录运行。

4. 模板安装好以后,需要进入项目目录(输入命令:cd “项目路径”),为你的项目创建一个less app模板。

项目目录而不是根目录下,输入命令:yo lessapp

选择项目中要用的工具、框架:

lessapp

去到项目文件夹,可以看到创建好的less app模板:

folder

终于完成啦!!看看是否成功,输入命令:grunt server,于是浏览器会自动弹出一个欢迎界面。

可是。。可是。。。为什么弹出来的页面没有样式!!百思不得其解啊!

后来才发现,在app这个文件夹下,应该有一个名为bower_components的文件夹,里面有bootstrap、jquery、modernizr(如果你勾选了的话)文件,而我的文件夹里面并没有!怎么回事呢?

在根目录下输入命令 bower -v,版本号为1.3.1,说明bower已经安装成功,可是它并没有为我安装bower_components文件。再用bower安装font-awesome试试,进入项目目录:bower install font-awesome,出现如下提示:

bower ENOGIT git is not installed or not in the PATH

原来如果用windows安装bower时,必须要正确安装msysgit,参考:A note for windows users

安装msysgit后,再一次 yo lessapp,查看app文件夹,如下:

app

输入命令 grunt server,欢迎界面有样式了!

welcome

立即进入coding状态!

 

参考:

Grunt:任务自动管理工具 

前端项目可以更简单—Yeoman入门指南(1)

Yeoman:Web 应用开发流程与工具

【Yeoman】热部署web前端开发环境

如何在 Windows 平台安裝與使用 Yeoman 1.0 相關工具

前端工程构建工具——Yeoman

Yeoman:强大的web构建工具

前端笔记

HTML:

1.html5声明:<!DOCTYPE HTML>

2.flash背景透明:

火狐:在embed标签中,添加属性wmode=”Transparent”

IE:在object标签中间,添加<param name=”wmode” value=”Transparent” />

3.html标签<marquee></marquee>可以实现字幕滚动。

完整:<marquee id=”affiche” align=”left” behavior=”scroll”
bgcolor=”#FF0000″ direction=”up” height=”300″ width=”200″ hspace=”50″
vspace=”20″ loop=”-1″ scrollamount=”10″ scrolldelay=”100″
onMouseOut=”this.start()” onMouseOver=”this.stop()”>

4.有两次发现IE浏览器下文档模式总是被解析成杂项,今揪出凶手,原来是页面
头部的声明多了一些没有用的东西,这些东西即使被注释掉也会影响整个页面。

 

CSS:

1.text-shadow:

text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[
颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]…或者text-
shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X
Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)]…例:text-shadow: 0
1px 1px #fff;

2.背景线性渐变:

内核类型写法Webkit(Chrome/Safari):-webkit-linear-gradient()/-webkit-
gradient();

Gecko(Firefox):-moz-linear-gradient();

Presto(Opera):-o-linear-gradient();

Trident(IE):-ms-linear-gradient();

W3Clinear-gradient()

IE:

filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr=’#fafafa’,endColorstr=’#eaeaea’);

例:

background:-moz-linear-gradient(#fff,#333);background:-webkit-gradient
(linear,center top,center bottom,from(#fff),to(#333));background:-
webkit-linear-gradient(#fff,#333);background:-o-linear-gradient
(#fff,#333);background:-ms-linear-gradient
(#fff,#333);background:linear-gradient(#fff,#333);

全:

background:linear-gradient(bottom,#ccc 0,#f0f0f0
100%);background:-o-linear-gradient(bottom,#ccc 0,#f0f0f0 100%);background:-moz-linear-gradient(bottom,#ccc 0,#f0f0f0 100%);background:-webkit-
linear-gradient(bottom,#ccc 0,#f0f0f0 100%);background:-ms-linear-gradient
(bottom,#ccc 0,#f0f0f0 100%);
filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr=’#f0f0f0′,endColorstr=’#cccccc’)

3.IE6下line-height属性失效是由于文字中包含img、input、select、textarea
、button、object等标记造成的。

给与文字相连接的img、input、textarea、select、object等元素加以css样式:
margin: (所属line-height-自身高度)/2px 0;
vertical-align:middle;

4.css雪碧在线制作网站

css sprite: http://css-sprit.es/

5.a标签伪类顺序:

a:link {color: #000;}
a:visited {color: #F00;}
a:hover{color: #0F0;}
a:active {color: #00F;}

顺序不正确有可能会导致设置失效。

6.css3.0 对象旋转属性:

-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);

-moz-transition:all 0.2s ease-in-out 0s (设置旋转方式和时间)

7.IE6 IE7下,当父元素的直接子元素或者下级子元素的样式拥有
position:relative属性时,父元素的overflow:hidden属性就会失效。只要给父级元素添加position:relative即可。

8.IE6下,<b>最新时评</b>用text-indent:-999em把文
字隐掉,b设置为display:block,height:20px;还需要定line-height:20px; 否
则,b的高度以默认行高计算,不受height的影响。(标签内必须有文字,否者
line-height也会失效)

9.IE6下绝对定位的div无法遮盖select解决办法:

在需要遮盖select的那个div放入一个空的iframe:
<div><!–[if lte IE 6]><iframe></iframe><![endif]–></div>
iframe样式:
iframe{

display:none;
display:block;
position:absolute;
top:0;
left:0;
z-index:-1;
width:3000px;
height:3000px;
}

10.设置阴影:

box-shadow:inset x-offset y-offset blur-radius spread-radius color
box-shadow属性至多有6个参数设置,他们分别取值:
阴影类型:此参数是一个可选值,如果不设值,其默认的投影方式是外阴影;如
果取其唯一值“inset”,就是将外阴影变成内阴影,也就是说设置阴影类型为
“inset”时,其投影就是内阴影;
X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值,如果值为正值,
则阴影在对象的右边,反之其值为负值时,阴影在对象的左边;
Y-offset:是指阴影的垂直偏移量,其值也可以是正负值,如果为正值,阴影在对
象的底部,反之其值为负值时,阴影在对象的顶部;
阴影模糊半径:此参数是可选,,但其值只能是为正值,如果其值为0时,表示阴
影不具有模糊效果,其值越大阴影的边缘就越模糊;
阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延
展扩大,反之值为负值是,则缩小
阴影颜色:此参数可选,如果不设定任何颜色时,浏览器会取默认色,但各浏览
器默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就
是透明,建议不要省略此参数。

仅兼容:IE9 firefox3.5 chrome2.0 opera10.6 safari4

11.IE6浮动产生双边距的问题,在浮动元素的css里加display:inline即可解决。

12.当给浮动元素的父级div设置overflow:hidden时,IE6下是不起作用的,因为
IE6下必须有固定高度宽度这一属性才会起作用,需要给元素添加height:100%即
可!

13.display:inline-table;
子元素浮动,父级元素闭合,避免overflow:hidden造成的子元素浮出父级时被隐
藏。
#main { width:700px;display:inline-table ;position:relative;
top:20px;left:300px;}
#main #left {width:233px;float:left;position:relative;top:0;left:-
230px;}
#main #right { float:left;width:428px;position:relative;top:0px;left:-
230px;}
<div id=”main”>
<div id=”left”></div>
<div id=”right”></div>
</div>
14.IE6中PNG格式图片不能显示透明背景,改用GIF透明背景图。
15.color:red; /* 所有浏览器都支持 */

color:red !important;/* 除IE6外 */
_color:red; /* IE6支持 */
*color:red; /* IE6、IE7支持 */
+color:red;/*IE7支持*/
*+color:red; /* IE7支持 */
color:red\9; /* IE6、IE7、IE8、IE9支持 */
color:red\0; /* IE8、IE9支持 */
color:red\9\0;/*IE9支持*/

/* webkit and opera */
@media all and (min-width: 0px){ div{color:red;} }

/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0){ div{color:red;} }

/* opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-
webkit-min-device-pixel-

ratio:0) { div{color:red;} }

/* firefox * /
@-moz-document url-prefix(){ div{color:red;}} /* all firefox */

html>/**/body div, x:-moz-any-link, x:default {color:red;} /* newest
firefox */
}

/*针对safari 3+, chrome 1+, opera9+, ff 3.5+浏览器*/
body:nth-of-type(1)div { color:red;}?9;
<!–[if lt IE 7 ]> <html> <![endif]–>
<!–[if IE 7 ]> <html> <![endif]–>
<!–[if IE 8 ]> <html> <![endif]–>
<!–[if IE 9 ]> <html> <![endif]–>
<!–[if (gt IE 9)|!(IE)]><!–> <html> <!–<![endif]–>
<!?[if IE 7]> = 等于 IE7

<!?[if lt IE 8]> = 小于 IE8(就是 IE7 或以下了啦)

<!?[if gte IE 8]> = 大于或等于 IE8

<meta http-equiv=”x-ua-compatible” content=”ie=7″ />
把这段代码放到<head>里面,在ie8里面的页面解析起来就跟ie7一模一样的了

16.
Chrome和Safari中,li一定要定宽度,否则无法浮动。
IE6中的li边框无法显示。

17.一直对同一行里的两个部分左右分开难以驾驭。
a: 用一个标题标签(h1、h2…),里面放一个p标签,一个span标签,两个左右
浮动;

18.设置背景透明度:
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
19.当<li><a href=”#”></a></li>浮动,overflow:hidden不起作用,要隐藏溢出
的内容,先定li宽和高,a标签display block,li标签white-space:nowrap;
display:block;/*内联对象需加*/
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(…) ;需与
overflow:hidden;一起使用。*/
text-overflow:clip/*不显示省略标记*/

20.当h标签内有a标签和其他元素,图片直接放在a标签里,会导致其他元素无法垂
直居中,可以将图片设置为a标签的背景,设定好a标签的宽高,display:inline
-block;

21.css写边框圆角:
border-top-right-radius
border-bottom-right-radius
border-bottom-right-radius
border-bottom-right-radius
border-radius表示所有的角;但是IE8及以下版本都不支持

22.今天才发现,a标签display设为block是可以只设高度不设宽度的,好了,以
后导航mouseover的效果不用纠结了

23.CSS解压缩:http://tool.lu/css/

24. css设置英文全部大写:text-transform:uppercase;

全部小写:text-transform: lowercase

首字母大写:text-transform:capitalize

25.简单的清除链接虚线框的办法:

a:focus{ outline:none;}

不过这种办法兼容性不是很好

JAVASCRIPT

1.弹出框背景宽高度控制
$(“#popup_mask”).css({
“width” : $(document).width(),
“height”: $(document).height(),
opacity:0.5
}).show();

2. js获取当前时间

<SCRIPT LANGUAGE=”JavaScript”> <!–var now= new Date();var
year=now.getYear();var month=now.getMonth()+1;var day=now.getDate();var
hour=now.getHours();var minute=now.getMinutes();var
second=now.getSeconds(); alert(year+”-“+month+”-“+day+”
“+hour+”:”+”:”+minute+”:”+second); –> </SCRIPT>
23.js代码压缩工具:http://javascriptcompressor.com/,css代码压缩工具:
http://www.csscompressor.com/

3.在文本输入栏中,如果加入了提示,加入onMouseOver=”this.focus

()”onFocus=”this.select()” 可以直接选中提示文本:

<textarea name=textarea wrap=virtual rows=2
cols=22onMouseOver=”this.focus()” onFocus=”this.select()”>站长之家
www.chinaz.com</textarea>

鼠标移入提示文字消失:<input type=text name=”address” size=19value=”站
长之家 www.chinaz.com”onFocus=”this.value=””>