笑忘书

FullSizeRender
没 没有蜡烛 就不用勉强庆祝
没 没想到答案 就不要寻找题目
没 没有退路 问我也不要思路
没 没人去仰慕 那我就继续忙碌
来来 思前想后 差一点忘记了怎么投诉
来来 从此以后 不要犯同一个错误
将这样的感触 写一封情书 送给我自己
感动得要哭 很久没哭 不失为天大的幸福
将这一份礼物 这一封情书 给自己祝福
可以不在乎 才能对别人在乎
有一点帮助 就可以对谁倾诉
有一个人保护 就不用自我保护
有一点满足 就准备如何结束
有一点点领悟 就可以往后回顾
来来 思前想后 差一点忘记了怎么投诉
来来 从此以后 不要犯同一个错误
将这样的感触 写一封情书 送给我自己
感动得要哭 很久没哭 不失为天大的幸福
将这一份礼物 这一封情书 给自己祝福
可以不在乎 才能对别人在乎
从开始哭着忌妒 变成了笑着羡慕
时间是怎么样爬过了我皮肤 只有我自己最清楚
将这样的感触 写一封情书 送给我自己
感动得要哭 很久没哭 不失为天大的幸福
将这一份礼物 这一封情书给自己祝福
可以不在乎 才能对别人在乎
让我亲手将这样的感触 写一封情书送给我自己
感动得要哭 很久没哭 不失为天大的幸福
就好好将这一份礼物 这一封情书给自己祝福
可以不在乎 才能对别人在乎

CSS3 :nth-child() 选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
*{ margin: 0; padding: 0; list-style: none;}
ul{
width: 600px;
height: 600px;
margin:0 auto;
}
ul li{ width:300px;
height: 300px;
float: left;
background-color: red;
}
li:first-child{background-color: blue;}
li:first-child:hover{background-color: pink;}
li:nth-child(2){ background-color: yellow;}
li:nth-child(2):hover{ background-color: red;}
li:nth-child(3){ background-color: red;}
li:nth-child(3):hover{ background-color: yellow;}
li:last-child{ background-color: pink;}
li:last-child:hover{ background-color: blue;}

 

JQ实现选项卡效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function(){
window.onload = function()
{
var $li = $('.titright span');//选项
var $ul = $('.jn');//内容
$li.mouseover(function(){
var $this = $(this);
var $t = $this.index();
$li.removeClass();
$this.addClass('current');
$ul.css('display','none');
$ul.eq($t).css('display','block');
})
}
});

JQ实现鼠标放上显示离开隐藏

很简单的一段实现鼠标放上显示离开隐藏的小效果,代码虽简单 用途多多哦~~~

1
2
3
$(".box1").hide();//使鼠标放上显示的内容隐藏
$(".box").mouseover(function(){$(.box1).show();});//鼠标放上显示
$(".box").mouseout(function(){$(".box1").hide();});//鼠标离开隐藏

网站灰色调 CSS

这个就不多解释了,让网站所有元素变成灰色调,全浏览器支持,使用了滤镜,比较吃性能,建议作临时方案使用。
代码如下:

1
2
3
4
5
6
7
8
9
body{
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
filter:grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
filter:gray;
}

在 Retina 屏幕下显示变模糊的问题,可以加上:

body{
    ...
    -webkit-transform: translateZ(0);
    ...
}

用CSS画三角形

作为一个不太会写CSS的

1
伪前端

来说,用纯CSS画各种形状是一件很牛X的事情,今天就先画一个三角形吧。

最终效果图:

css:

div{
width: 0;
height: 0;
border-width: 30px;
border-style: solid;
border-color: transparent rgba(0,0,0,0.6) rgba(0,0,0,0.6) transparent;
}

说明

html部分很简单,就一个div;
css部分定义宽度和高度都为0,border宽度是30px并且border-style是实心的div,
其中最重要的是最后一句,也是最关键的一句,

1
border-color

属性的四个参数分别定义了边框的

1
上-右-下-左

(顺时针)的样式,
上、左是透明的,下、右使用rgba定义了黑色且透明度为0.6的颜色。

同理, 可以修改

1
border-clor

属性画出各种形状:

transparent

Position定位

position定位

position共有三种形式的定位:绝对定位、相对定位和静态定位。

position属性值:

static: 静态定位(default)
relative: 相对定位
absolute: 绝对定位
fixed: 固定定位

注意:absolute和fixed都是绝对定位形式。
绝对定位:完全脱离标准流,兄弟元素不再受其影响。

absolute和fixed的相同点

  1. 完全脱离标准流
  2. 未设置偏移量时,都定位在父元素的左上角(第四象限)
  3. 与父包含块设置
    1
    postition:relative

    与否没有关系,初始位置总是在父元素的左上角。

偏移量:元素设置定位(绝对或相对)后就具有偏移属性和堆叠属性(z-index)

absolute和fixed的不同点

一、当设置偏移量时,偏移参照基准

absolute

  1. 无已定位的祖先元素,以为基准偏移
  2. 有已定位的祖先元素,以距其最近的、已定位的祖先元素为基准偏移

fixed

  1. 无论有、无已定位的祖先元素,都以浏览器可视窗口为基准偏移。

二、表现形式(产生滚动条时)

absolute

  1. 位置会随滚动条变化

fixed

  1. 位置固定,不会随滚动条变换
  2. 被它遮盖的元素,可以从其下方穿过

偏移量的设置

在对元素设置固定定位(

1
fixed

)时,如果希望本元素包含在其父包含块中,则不需要对齐设置偏移量。

fixed定位

定位形式——绝对定位
特点:位置固定不变,兄弟元素会从其下方穿过

未设置偏移量:
有已定位的祖先元素时,以祖先元素为基准
无已定位的祖先元素时,以浏览器窗口为基准

设置偏移量时:
无论有无以定位的祖先元素,都已浏览器窗口为基准偏移。

毕业季总是伤感的

 

毕业季总是伤感的,特别是自己的毕业季,但这个季节的天空却是晴空万里,一碧如洗,一点都不搭调,不能呈现沥沥淅淅的哀愁,所以我只能莫名地惆怅。

IMG_2222

 

五月

时间好快 已经五月了 不知道接下来的几个月会有什么事发生 加油吧

BGyuanman1