4.14

CSS  background属性简写：

background-position属性组合方式：[ left | center | right ] || [ top | bottom ] （组合后中间没有下划线）

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动

background属性简写顺序：background-color || background-image || background-repeat || background-attachment || background-position

4.15

圆角框：css3的border-radius和border-image

border-radius：上，右，下，左 （四个属性值）

border-image：url(),剪裁位置,重复性

eg：border-image:url(),25% 25% 25% 25% / 25px round round;

↑        ↑        ↑

边框宽  水平方向  垂直方向

山顶角（利用border的特性）：

参考：http://www.jsann.com/post/CSS_to_achieve_the_principle_of_the_Peak_Point.html

阴影：box-shadow

box-shadow: 3px          3px                6px    #666;

↑              ↑                    ↑         ↑

水平阴影位置   垂直阴影位置  阴影宽度  颜色

不透明度：

rgba 同时设置颜色和不透明度。

background-color: rbga(0,0,0,0.8)

最后是透明度，80%

视差滚动：

把背景图像相对于窗口大小进行水平偏移20%，当水平调整窗口大小时，背景图像的位置会改变，产生移动效果。

background-position: 20% 0;

把中景：设置为40%

前景：设置为150%

数值越大，想对移动得就越快，产生更有深度的感觉。

链接应用样式：

a的伪类顺序：Lord Vader Hates Furry Animals

a:link, a:visited, a:hover, a:focus, a:active

[如果不按照这个顺序定义的话，两者优先级是相同的，link和visited的样式会覆盖其他三个]

a的link下划线：

1.边框border

2.图片

代码参考：

<style type="text/css">
.box {
width: 45%;
margin-top: 2em;
padding: 30px 10px;

border-radius: 1em;
color: #000;
position: left;
}
/*跳转后黄色→白色，伪类选择器前面也可以加id,gif只播了一次就停掉了*/←待解决
/* #comment3:target {
background-image: url("fade.gif");
}*/
.box:target {
/*background-image: url("fade.gif");*/

}
a:link {
color: red;
}
a:visited {
color: grey;
}
a:link,a:visited {
text-decoration: none;
}
a:hover,a:focus,a:active{
text-decoration: underline;
border-bottom-style: solid;    //下划线类型
color: darkblue;
}
</style>
</head>
<body>
<h1>Comments</h1>
<div class="box" id="comment1">
<h2>Comment #1</h2>
<p>Lorem ipsum dolor sit amet</p>
<a href="#comment2">comment2</a>
</div>
<div class="box" id="comment2">
<h2>Comment #2</h2>
<p>Mauris sit amet nisl in eros porta faucibus.</p>
<a href="#comment3">comment3</a>
</div>
<div class="box" id="comment3">
<h2>Comment #3</h2>
<p>viverra in, massa. Sed a sem.</p>
<a href="#comment1">comment1</a>
</div>

==========================

color:前景色（字体颜色）

background-color：背景色

CSS技巧和犯错点总结的更多相关文章

  1. 经验分享：多屏复杂动画CSS技巧三则

    当下CSS3应用已经相当广泛,其中重要成员之一就是CSS3动画.并且,随着CSS动画的逐渐深入与普及,更复杂与细腻的动画场景也如雨后春笋般破土而出.例如上个月做的「企业QQ-新年祝福」活动: 感谢sh ...

  2. 致DBA：为什么你经常犯错，是因为你做的功课不够

    专职做DBA已经6年多的事件了,看同行.同事犯了太多的错误,自己也犯了非常多的错误.一路走来,感触非常深.然而绝大多数的错误其实都是很低级的错误.有的是因为不了解某个引擎的特性导致:有的是因为对线上环 ...

  3. 学无止境的CSS(xHTML+CSS技巧教程资源大全)

    本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准 要玩游戏,就得先了解规则.要 ...

  4. CSS技巧-rgba函数的妙用

    先简单介绍一下: rgba()函数是平时开发中经常遇到的,这篇文章也做了一个比较详细的解读以及一系列的应用. 对它的工作原理做一番分析:就是具有一定透明度的盒子: 还比较了rgba()函数和不透明度属 ...

  5. 多屏复杂动画CSS技巧三则(转载)

    本文转载自: 经验分享:多屏复杂动画CSS技巧三则

  6. 网页设计师必备的10个CSS技巧

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

  7. 应该知道的25个非常有用的CSS技巧

    在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼 容性的问题, CSS网页布局,说难,其实很简单.说它容易,往往有很多问题困扰着新 手,在中介绍了非常多的技巧,这些小技巧 ...

  8. 20个很有用的CSS技巧

    导语:下面这几个CSS技巧你可能不知道,1.彩色照片变黑白,2.所有元素垂直居中,3.禁用鼠标,4.模糊文字,小编学完能量满满的,觉得对CSS又充满了爱,你也来看看. 1. 黑白图像 这段代码会让你的 ...

  9. 关于Verilog HDL的一些技巧、易错、易忘点（不定期更新）

    本文记录一些关于Verilog HDL的一些技巧.易错.易忘点等(主要是语法上),一方面是方便自己忘记语法时进行查阅翻看,另一方面是分享给大家,如果有错的话,希望大家能够评论指出. 关键词: ·技巧篇 ...

随机推荐

  1. JIRA官方：JIRA报表与分析

    访问重要的问题 JIRA系统内置的过滤器可以使你快速访问最重要的问题.通过保存和收藏自定义的过滤器,你可以随时了解项目和团队的优先级. 保持团队同步 创建一个过滤器,可以保存你的任何搜索条件.通过分享 ...

  2. they're hiring

    Gather Health ⋅ Careers Careers at Gather

  3. HDU2842-Chinese Rings(递推+矩阵高速幂)

    pid=2842">题目链接 题意:求出最少步骤解出九连环. 取出第k个的条件是,k-2个已被取出,k-1个仍在支架上. 思路:想必九连环都玩过吧,事实上最少步骤就是从最后一个环開始. ...

  4. 依赖注入及AOP简述（八）——混合请求模式 .

    2.3.    混合请求模式 上一节讲到了FQCN(全类名)请求模式会带来依赖定义的柔软性较差的问题,因此字符串和全类名混合的模式又应运而生了.比如刚才的Spring中的API方式声明注入点的例子就可 ...

  5. 微信内移动前端开发抓包调试工具fiddler使用教程

    在朋友圈看到一款疯转的H5小游戏,想要copy,什么?只能在微信里打开?小样,图样图森破,限制了oauth.微信浏览器内打开,照样能看你源码~ 使用fiddler来抓包 需要先做一些简单的准备工作: ...

  6. java SecurityManager

    ---- 众所周知,Java语言具有完善的安全框架,从编程语言,编译器.解释程序到Java虚拟机,都能确保Java系统不被无效的代码或敌对的编译器暗中破坏,基本上,它们保证了Java代码按预定的规则运 ...

  7. JavaScript 回车 焦点切换（摘抄）

    <!-- 这是回车转换行的代码段--> <script language='javascript' for='document' event='onkeydown'> if(e ...

  8. vs2010安装svn插件

    vs2010安装svn插件及简单使用 1.下载安装程序,安装 2.配置vs2010 3.check out工程 1.下载安装程序,安装 2.配置vs2010 3.check out工程 Open th ...

  9. An Data-Scientist Prepares 《数据科学家的自我修养》

    从今天开始,博主将用大概1000天的时间记录自己学习并成为初级数据科学家(数据分析师)的心路历程. 包括数据科学家所必需的的基础知识:数学,统计,计算机,商业,沟通能力等. 希望博主能够在2017前完 ...

  10. 添加“返回顶部”小图标按钮的JS(JavaScript)代码详解

    如何给自己的网站添加方便快捷的"返回顶部"小图标按钮呢?如下图: JS源代码: /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration ...