【实习生活】实习生活第五天

上午

上午主要讲了关于CSS的一些比较基础的东西,通过制作一个类似导航栏的小例子引入了关于CSS的一些用法,用来代替表单来进行页面布局。并且属性更加的丰富,实现要求的基本功能,
包括li标签去掉黑点、横放、选中表色等等,虽然很简单,但一动手还是敲了一上午。。。。下面的笔记:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
CSS 层叠样式表
制造一个简单的页面特性 三种基本的=选择器
行内样式 内部样式 外部样式
CSS优势
基本语法:
选择器{
声明1;
声明2;
。。。
}
例如:
选择器放在style中;
标签选择器
设定body标签内的样式
<style>
body{
background-color: darkturquoise;
font-size: 100px;
font-style: oblique;
font-family: "宋体";
}
</style>
类选择器
自定义类
.类名{
声明1;。。。
}
.font45{
font-size: 45px;
}
id选择器:
#(id名){
声明;
}
#nav{
background-color: blueviolet;
}
三种样式
行内:写在标签内
div占一行
span接在后面
内部样式:写在网页内
就近原则

下午

下午的工作也很简单,通过制作一个照片墙的例子引入了CSS的外部样式的使用,感觉很神奇,原来老师第一天展示的照片墙就是这样整出来的啊。。。。有种恍然大悟的赶脚。。。
下面是笔记和照片墙代码

笔记:

1
2
3
4
5
6
7
8
9
10
11
12
13
外部样式
margin 外边距
pandding :顺序 上右下左 顺时针 内边距
css简单特效:
外部样式表(link)将CSS样式写入单独的文件.css
设置图片样式
照片墙
阴影 box-shadow
图片圆角 border-radius

代码: style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
body{
align-content: center;
background-color: beige;
}
img{
width: 200px;
height: 250px;
padding: 20px;
background-color: white;
position: absolute;
border-radius: 1em;
box-shadow: 10px 10px 10px rgba(50,50,50,0.4);
transition:all 1s ease-in;
}
img:hover{
box-shadow: 1000px,1000px,1000px rgba(50,50,50,0.4);
transform: rotate(0deg) scale(1.3);
z-index: 1;
}
div{
width: 80%;
height: 450px;
}
.pic1{
top: 120px;
transform: rotate(10deg);
left: 100px;
}

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>照片墙</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript">
</script>
</head>
<body>
<h1>照片墙</h1>
<script type="text/javascript" src="js/canvas-particle.js">
window.onload = function(){
var config = {
vx: 4,
vy: 4,
height: 2,
width: 2,
count: 100,
color: "121, 162, 185",
stroke: "100,200,180",
dist: 6000,
e_dist: 20000,
max_conn: 10
}
CanvasParticle(config);
}
</script>
<iframe hidden="1" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=371362&auto=1&height=66"></iframe>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img class="pic1" src="img/gailun1.jpg" />
<img class="pic2" src="img/haha.png" />
<img class="pic3" src="img/danshengou.png" />
<img class="pic4" src="img/timof.png" />
<img class="pic5" src="img/timo.jpg" />
<img class="pic6" src="img/timo1.jpg" />
<center><button ><a href="http://blog.rookiehacker.org">给我点赞哦!</a></button></center>
</div>
</div>
</div>
</body>
</html>

canvus-particle.js(从网上扒的)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
var CanvasParticle = (function(){
window.onload = function(){
//配置
var config = {
vx: 4,//点x轴速度,正为右,负为左
vy: 4,//点y轴速度
height: 2,//点高宽,其实为正方形,所以不宜太大
width: 2,
count: 100,//点个数
color: "121, 162, 185",//点颜色
stroke: "130,255,255",//线条颜色
dist: 6000,//点吸附距离
e_dist: 20000,//鼠标吸附加速距离
max_conn: 10//点到点最大连接数
}
//调用
CanvasParticle(config);
}
function getElementByTag(name){
return document.getElementsByTagName(name);
}
function getELementById(id){
return document.getElementById(id);
}
// 根据传入的config初始化画布
function canvasInit(canvasConfig){
canvasConfig = canvasConfig || {};
var html = getElementByTag("html")[0];
var body = getElementByTag("body")[0];
var canvasDiv = getELementById("canvas-particle");
var canvasObj = document.createElement("canvas");
var canvas = {
element: canvasObj,
points : [],
// 默认配置
config: {
vx: canvasConfig.vx || 4,
vy: canvasConfig.vy || 4,
height: canvasConfig.height || 2,
width: canvasConfig.width || 2,
count: canvasConfig.count || 100,
color: canvasConfig.color || "121, 162, 185",
stroke: canvasConfig.stroke || "130,255,255",
dist: canvasConfig.dist || 6000,
e_dist: canvasConfig.e_dist || 20000,
max_conn: 10
}
};
// 获取context
if(canvas.element.getContext("2d")){
canvas.context = canvas.element.getContext("2d");
}else{
return null;
}
body.style.padding = "0";
body.style.margin = "0";
// body.replaceChild(canvas.element, canvasDiv);
body.appendChild(canvas.element);
canvas.element.style = "position: absolute; top: 0; left: 0; z-index: -1;";
canvasSize(canvas.element);
window.onresize = function(){
canvasSize(canvas.element);
}
body.onmousemove = function(e){
var event = e || window.event;
canvas.mouse = {
x: event.clientX,
y: event.clientY
}
}
document.onmouseleave = function(){
canvas.mouse = undefined;
}
setInterval(function(){
drawPoint(canvas);
}, 40);
}
// 设置canvas大小
function canvasSize(canvas){
canvas.width = window.innerWeight || document.documentElement.clientWidth || document.body.clientWidth;
canvas.height = window.innerWeight || document.documentElement.clientHeight || document.body.clientHeight;
}
// 画点
function drawPoint(canvas){
var context = canvas.context,
point,
dist;
context.clearRect(0, 0, canvas.element.width, canvas.element.height);
context.beginPath();
context.fillStyle = "rgb("+ canvas.config.color +")";
for(var i = 0, len = canvas.config.count; i < len; i++){
if(canvas.points.length != canvas.config.count){
// 初始化所有点
point = {
x: Math.floor(Math.random() * canvas.element.width),
y: Math.floor(Math.random() * canvas.element.height),
vx: canvas.config.vx / 2 - Math.random() * canvas.config.vx,
vy: canvas.config.vy / 2 - Math.random() * canvas.config.vy
}
}else{
// 处理球的速度和位置,并且做边界处理
point = borderPoint(canvas.points[i], canvas);
}
context.fillRect(point.x - canvas.config.width / 2, point.y - canvas.config.height / 2, canvas.config.width, canvas.config.height);
canvas.points[i] = point;
}
drawLine(context, canvas, canvas.mouse);
context.closePath();
}
// 边界处理
function borderPoint(point, canvas){
var p = point;
if(point.x <= 0 || point.x >= canvas.element.width){
p.vx = -p.vx;
p.x += p.vx;
}else if(point.y <= 0 || point.y >= canvas.element.height){
p.vy = -p.vy;
p.y += p.vy;
}else{
p = {
x: p.x + p.vx,
y: p.y + p.vy,
vx: p.vx,
vy: p.vy
}
}
return p;
}
// 画线
function drawLine(context, canvas, mouse){
context = context || canvas.context;
for(var i = 0, len = canvas.config.count; i < len; i++){
// 初始化最大连接数
canvas.points[i].max_conn = 0;
// point to point
for(var j = 0; j < len; j++){
if(i != j){
dist = Math.round(canvas.points[i].x - canvas.points[j].x) * Math.round(canvas.points[i].x - canvas.points[j].x) +
Math.round(canvas.points[i].y - canvas.points[j].y) * Math.round(canvas.points[i].y - canvas.points[j].y);
// 两点距离小于吸附距离,而且小于最大连接数,则画线
if(dist <= canvas.config.dist && canvas.points[i].max_conn <canvas.config.max_conn){
canvas.points[i].max_conn++;
// 距离越远,线条越细,而且越透明
context.lineWidth = 0.5 - dist / canvas.config.dist;
context.strokeStyle = "rgba("+ canvas.config.stroke + ","+ (1 - dist / canvas.config.dist) +")"
context.beginPath();
context.moveTo(canvas.points[i].x, canvas.points[i].y);
context.lineTo(canvas.points[j].x, canvas.points[j].y);
context.stroke();
}
}
}
// 如果鼠标进入画布
// point to mouse
if(mouse){
dist = Math.round(canvas.points[i].x - mouse.x) * Math.round(canvas.points[i].x - mouse.x) +
Math.round(canvas.points[i].y - mouse.y) * Math.round(canvas.points[i].y - mouse.y);
// 遇到鼠标吸附距离时加速,直接改变point的x,y值达到加速效果
if(dist > canvas.config.dist && dist <= canvas.config.e_dist){
canvas.points[i].x = canvas.points[i].x + (mouse.x - canvas.points[i].x) / 20;
canvas.points[i].y = canvas.points[i].y + (mouse.y - canvas.points[i].y) / 20;
}
if(dist <= canvas.config.e_dist){
context.lineWidth = 1;
context.strokeStyle = "rgba("+ canvas.config.stroke + ","+ (1 - dist / canvas.config.e_dist) +")";
context.beginPath();
context.moveTo(canvas.points[i].x, canvas.points[i].y);
context.lineTo(mouse.x, mouse.y);
context.stroke();
}
}
}
}
return canvasInit;
})();

晚上

一如既往的写博客、看书!加油↖(^ω^)↗


声明:
文章标题:【实习生活】实习生活第五天
文章作者:RookieHacker
文章链接:http://rookiehacker.coding.me/blog/2017/06/22/fifth-day-in-Beijing/
文章版权属本博主所有,有问题或者建议欢迎在下方评论。欢迎转载、引用,但请标明作者和原文地址,谢谢。


喜欢,就支持我一下吧~