CSS3
分页: 1/8 第一页 1 2 3 4 5 6 7 8 下页 最后页 [ 显示模式: 摘要 | 列表 ]
3月10
css变量定义和使用
css函数和表达式使用
css的常用单位px,rem,vh,vw
css给js传值
css兼容iphonex

示例代码:
[codes=c#]
css兼容iphonex,例如下方给x的横条留个空隙
padding-bottom: calc(现有容器内间距 + constant(safe-area-inset-bottom));
padding-bottom: calc(现有容器内间距 + env(safe-area-inset-bottom));

body {
  --primary: #7F583F;
  --secondary: #F7EFD2;
}
a {
  color: var(--primary);
  text-decoration-color: var(--secondary);
}
.foo {
  --gap: 20;
  /* 无效:必须使用calc连接 */
  margin-top: var(--gap)px;
  /* 支持操作符:+, -, *, / *
  margin-top: calc(var(--gap) * 1px);
  /* 无效:变量值只能用作属性值,不能用作属性名 */
  --side: margin-top;
  /* 无效 */
  var(--side): 20px;
}

@media screen and (min-width: 768px) {
  body {
    --primary:  #F7EFD2;
    --secondary: #7F583F;
  }
}


/* 作用域:同一个 CSS 变量,可以在多个选择器内声明。读取的时候,优先级最高的声明生效。这与 CSS 的"层叠"(cascade)规则是一致的。*/


蓝色


绿色

红色



css给js传值
// 设置变量
document.body.style.setProperty('--primary', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--primary');
[/codes]
3月10
针对width和height的宽高css3自适应fill-available&&fit-content&&max-content&&min-content
fill-available表示撑满可用空间(包括高度,宽度)[此处包括padding和margin会尽可能的撑满,只对于行内块(inline-block)和块元素(block)起作用,webkit内核支持。]
fit-content表示宽度缩小到内容的宽度
max-content表示用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度。
min-content表示用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度。这个最小宽度值有最大什么意思,如果是图片的话最小宽度值就是图片所呈现的宽度,如果是汉字就是一个字的宽度,如果是英文就是单词的宽度。
12月15
animate.css – 是一个齐全的CSS3动画库,查看效果:http://www.dowebok.com/demo/2014/98/
简介

animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果。

虽然借助 animate.css 能够很方便、快速的制作 CSS3 动画效果,但还是建议看看 animate.css 的代码,也许你能从中学到一些东西。

兼容

浏览器兼容:当然是只兼容支持 CSS3 animate 属性的浏览器,他们分别是:IE10+、Firefox、Chrome、Opera、Safari。

使用方法

1、引入文件
[codes=c#]

[/codes]

2、HTML 及使用
[codes=c#]

[/codes]
给元素加上 class 后,刷新页面,就能看到动画效果了。animated 类似于全局变量,它定义了动画的持续时间;bounce 是动画具体的动画效果的名称,你可以选择任意的效果。

如果动画是无限播放的,可以添加 class infinite。

你也可以通过 JavaScript 或 jQuery 给元素添加这些 class,比如:
[codes=c#]
$(function(){
    $('#dowebok').addClass('animated bounce');
});
[/codes]
有些动画效果最后会让元素不可见,比如淡出、向左滑动等等,可能你又需要将 class 删除,比如:
[codes=c#]
$(function(){
    $('#dowebok').addClass('animated bounce');
    setTimeout(function(){
        $('#dowebok').removeClass('bounce');
    }, 1000);
});
[/codes]
animate.css 的默认设置也许有些时候并不是我们想要的,所以你可以重新设置,比如:
[codes=c#]
#dowebok {
    animate-duration: 2s;    //动画持续时间
    animate-delay: 1s;    //动画延迟时间
    animate-iteration-count: 2;    //动画执行次数
}
[/codes]
注意添加浏览器前缀。
12月8
hybridapp h5手机横竖屏样式js、css
当然这样一句少不了
[codes=c#]

[/codes]

css监视横竖屏样式
[codes=c#]
/*这是匹配横屏的状态,横屏时的css代码*/
@media all and (orientation : landscape) {
  body { }
  .someclass{}
}
/*这是匹配竖屏的状态,竖屏时的css代码*/
@media all and (orientation : portrait){
  body { }
  .someclass{}
}
[/codes]

js监视横竖屏样式
[codes=c#]
function orientationChange(){
  switch(orientation){
    case 0:
      alert('0, screen-width:'+screen.width+', screen-height:'+screen.height+',可视区宽:'+document.documentElement.clientWidth+',可视区高:'+document.documentElement.clientHeight);
      break;
    case 90:
      alert('90, screen-width:'+screen.width+', screen-height:'+screen.height+',可视区宽:'+document.documentElement.clientWidth+',可视区高:'+document.documentElement.clientHeight);
      break;
    case -90:
      alert('-90, screen-width:'+screen.width+', screen-height:'+screen.height+',可视区宽:'+document.documentElement.clientWidth+',可视区高:'+document.documentElement.clientHeight);
      break;
    case 180: //貌似看不到这种角度
      alert('180, screen-width:'+screen.width+', screen-height:'+screen.height+',可视区宽:'+document.documentElement.clientWidth+',可视区高:'+document.documentElement.clientHeight);
      break;  
  }  
}

document.addEventListener('DOMContentLoaded',function(){
  orientationChange();
  window.onorientationchange=orientationChange;
},false);
[/codes]
8月13

SASS、SCSS介绍

07:45大前端 » CSS3  From: 本站原创
SASS是CSS3的一个扩展,增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。

SCSS即是SASS的新语法,是Sassy CSS的简写,是CSS3语法的超集,也就是说所有有效的CSS3样式也同样适合于SASS。

例如:
[codes=css]
---------------------------------
在SCSS中使用变量
---------------------------------
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}


转换成CSS如下:
/* CSS */
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}


-------------------------------------------
SCSS嵌套:
-------------------------------------------

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}



转换成CSS如下:
/* CSS */

table.hl {
  margin: 2em 0;
}

table.hl td.ln {
  text-align: right;
}


li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}
[/codes]
有兴趣的同学可以到官方网站去了解一下,http://http://sass-lang.com/ ,英文的。
8月12

CSS3 圆角(border-radius)

07:23大前端 » CSS3  From: 本站原创
[codes=c#]
前缀
-moz(例如 -moz-border-radius)用于Firefox
-webkit(例如:-webkit-border-radius)用于Safari和Chrome。
例1

#round {
    padding:10px; width:300px; height:50px;
    border: 5px solid #dedede;
    -moz-border-radius: 15px;      /* Gecko browsers */
    -webkit-border-radius: 15px;   /* Webkit browsers */
    border-radius:15px;            /* W3C syntax */
}
[/codes]
效果:
点击在新窗口中浏览此图片
[codes=c#]
CSS圆角

例2:无边框
  
#round {
    padding:10px; width:300px; height:50px;
    background:#FC9;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius:15px;
}
[/codes]
效果:
点击在新窗口中浏览此图片
[codes=c#]
CSS圆角

书写顺序
/* Gecko browsers */
-moz-border-radius: 5px;
/* Webkit browsers */
-webkit-border-radius: 5px;
/* W3C syntax - likely to be standard so use for future proofing */
border-radius:10px;
其它
支持上、右、下、左

border-radius:5px 15px 20px 25px;
支持拆分书写

/* Gecko browsers */
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 20px;

/* Webkit browsers */
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 20px;

/* W3C syntax */
border-top-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius:  20px;
支持性
浏览器  支持性
Firefox(2、3+)  √
Google Chrome(1.0.154+…)  √
Google Chrome(2.0.156+…)  √
Safari(3.2.1+ windows)  √
Internet Explorer(IE7, IE8)  ×
Opera 9.6  ×
[/codes]
7月7
     使用EditPlus想visual studio那样可以格式化代码,是的Editplus中js、css、html代码自动格式化
一般用editplus写一些小的测试代码或者来研究学习别人的代码,但经常会遇到这些问题:下载过来的HTML/CSS代码混乱,JS代码被压缩,或者是我们想把我们的代码做一下压缩混淆以供发布时使用。当然,对于代码的格式化和代码压缩等,我们都可以使用专有的工具,或者使用一些在线的工作来做,既然EditPlus可以扩展插件,那我们何不利用这一功能来把这些工具集成到EP中呢?

     其实很早我都有这些想法,一直没有深究其做法,EP的用户工具组,我一般也是挂些帮助手册之类的供开发时参考。今天在BlueIdea看到有人发了一篇名为“让Editplus自动格式化css和js”的文章,看完后觉得写的很好,我也突然来了灵感,为什么不把前端开发常用工具都集成进去呢?

      说做就做,我在网上找了一些相关的工具代码,按照作者的方式开始改造(作者是使用“本地cScript调用JS+EP的文本过滤器”的方式来实现的)。


     下面来说下集成的方法(以下以EditPlus3中文版本为例):

      1、下载工具包:edtools.rar ,解压后放到磁盘的一个目录,如D:/edTools。

      2、打开ED,打开“工具”-“用户工具组”,在弹出的对象框中,在“组和工具项目”下拉框中选择一个工具组,点击“组名称”,为该组工具设定一个名称,如“前端开发工具”,如下图所示:
点击在新窗口中浏览此图片
    
      3、下面开始加入工具,这里主要以JSFormat为例讲解,其它类似。
点击“添加”--“应用程序”,在新建的项中,菜单文本写上名称,如"jsFormat",在命令里面输入:
[codes=c#]
cscript /nologo "D:/edTools/jsFormatter.js"  
[/codes]
后面引号中的内容要修改你磁盘上对应的文件的路径。
在下面的几个选项中,选择“运行为文本过滤”。如下图所示:
点击在新窗口中浏览此图片
4、其它几个的安装方式与jsFormat的安装类似,这里不再重复。点击ED ,工具你会发现:jsFormat   Ctrl+1,打开一个js点击后你会发现奥秘。
4月21
为地震灾区默哀,网站灰色css代码,兼容各浏览器
[codes=c#]
html{
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);
  }
[/codes]
点击在新窗口中浏览此图片
4月28
HTML5是越来越牛逼轰轰了,到底有啥不一样,下面有个html5的最新手册下载,看看就明了啦!

点击在新窗口中浏览此图片
很棒的HTML5手册+CSS3手册下载,更新下前端知识!,网上找了很久,都TM的浮云,泡沫!还是博客园来的实在,支持!
很多人说现在IE浏览器不支持.研究没用.但我觉的.就算IE9出来了,IE6,7,8还是不支持.. 所以现在和以后效果是一样的.都是要搞些兼容性
以下是参考手册下载地址 : http://files.cnblogs.com/Capricornus/css3.0html5.rar
各大浏览器 CSS3 和 HTML5 兼容速查表
http://news.csdn.net/a/20100401/217692.html
HTML5手册+CSS3手册下载,更新下前端知识! HTML5手册下载 HTML5中文手册下载 CSS3手册下载 CSS3中文手册下载
深入了解 HTML 5资源
http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K701.aspx
另外还可以上W3CSHCOOL查看http://www.w3cschool.cn/html5_reference.html
,下面是截图
HTML5手册
点击在新窗口中浏览此图片
CSS3手册
点击在新窗口中浏览此图片
没有目标的人都只在帮有目标的人完成目标。
1月20

模板的换皮肤的功能.需要jquery及jquery的cookie插件

css我都放在不同的目录下比如

style1/index.css

style2/index.css

图片在相应的文件夹下,这样我们只要改相应的图片就可以修改掉了,不用更改css
.

我们换皮肤的时候只要把style1改成style2
目标就可以达到了换皮肤的功能

我们要换皮肤一下要有onclick的js事件

我们这里定义了function
changecss(str)函数

html的代码:
代码:
<a onclick=”changecss(’style1′)”
class=”bai” href=”#”>&nbsp;</a>
<a
onclick=”changecss(’style2′)” class=”orange”
href=”#”>&nbsp;</a>
<a onclick=”changecss(’style3′)”
class=”blue” href=”####”>&nbsp;</a>
<a
onclick=”changecss(’style4′)” class=”green” href=”####”>&nbsp;</a>
html 还有个css的连接文件:<link
href=”http://www.125job.com/style/person/style4/index.css” rel=”stylesheet”
type=”text/css” media=”screen” id=”skin”/>

我这里是:
js代码
代码:
function changecss(str) {
var csshref
//当义变量
csshref=$("#skin").attr("href")
//取得skin的css链接
csshref=csshref.replace(/style[0-9]/g,str);
//把原来路径的style1替换成我们自己的str
csshref=$("#skin").attr("href",csshref)  
//改变一下href属性其实这里已经完成
$.cookie("css_skin",str)
//这里是记录一下cookie,防止刷新就回到原来的css路径
}
好了,点击换皮肤已经好了,不过还有个加载的时候读取cookie里的路径
用jquery就简单多了:
加载时候读取路径代码:  
代码:

$(function()
{
  
//如果cookie不为空的时候就读取cookie的路径
   if($.cookie("css_skin")!=null)
  
{
changecss($.cookie("css_skin"));
   }
  
这里就已经全部完成

}
)
分页: 1/8 第一页 1 2 3 4 5 6 7 8 下页 最后页 [ 显示模式: 摘要 | 列表 ]