文章目录

挑战
挑战里面不懂的东西（经典胡言乱语）
- CRUD
- 中间件
说明
任务一（一脸懵）
- 1.啥是CSS
- 2.崩溃的开始
- 3.分析一下任务一
- - 1.首先，能够用HTML+CSS+JavaScript在页面中生成一幅广告图片
  - 下面有关几点进行说明：
  - 实现后的效果：
  - 2.用Javascript数组在页面上放置多张广告图片，同时动态计算不同广告位之间的布局，实现水平等间距布局。
  - 下面有关几点进行说明
  - 实现后的效果
  - 3. 最后，用JavaScript代码实现多张广告图片轮播效果
总结

挑战

进制及其运算确立了计算机科学中最基本的数据格式、记录方式；掌握了编程语言，工程师就可以让计算机按自己的想法运行程序了。但做到这些就够了吗？（我这也做不到啊啊啊啊啊！！！）

为什么有些同学虽然找到了工作，但一直只能做简单的CRUD呢？（CRUD？？？？？）
为什么大厂面试的时候都喜欢考算法？（这我还是不太了解）
为什么有些开源的中间件能支撑很大的并发流量，而另外一些功能相同的中间件性能却非常差呢？（？中间件？）

挑战里面不懂的东西（经典胡言乱语）

CRUD

字母	对应的含义
C	Create：增加
R	Retrieve:查询
U	Update:修改
D	Delete:删除

CRUD程序员：指只会做增查改删的程序员，有点贬义，也不乏一些程序员喜欢用CRUD自嘲

中间件

中间件，又译中介层，是一类提供系统软件和应用之间连接、便于软件各部件之间的沟通的计算机软件，它为软件应用程序提供操作系统以外的服务。被形象的描述为“软件胶水”。

说明

大多数小公司的工程师需要处理的数据量较少，只要完成业务功能就可以，学不学数据结构和算法没有任何差别。大厂就完全不同了——大厂的工程师可能会面对几千万甚至几亿的注册用户，开发的是TB、PB级别的数据处理系统，需要利用各种中间件整合衔接多个上下游系统——可用性、健壮性、响应速度这些最基本的性能指标是工程师时时刻刻都要关注和解决的问题。一个看似简单的使用ArrayList还是Linkedlist的决定，就可能会造成系统几千倍的性能差别——这既是整个计算机科学最让人着迷的地方，也是最能体现思维模式、开发水平、动手能力的领域

任务一（一脸懵）

1.啥是CSS

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

菜鸟教程

2.崩溃的开始

由于原来完全没有接触过网页开发，我连连接css，js文件都完全不会;
下面是对小白常见问题的总结（血泪经验）

连接css文件时千万千万要看清楚，这些属性一个字都不能改,只要一个对不上就全体报废，谨记谨记！！！

<link rel="stylesheet" type="text/css" href="./css/rw04.css" />

3.分析一下任务一

1.首先，能够用HTML+CSS+JavaScript在页面中生成一幅广告图片

这说明我们需要这些功能：图片要居中，随网页大小变化，最后我们不能做流氓广告（最重要！！）

开始实现：

HTML文件：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>广告页面</title><link rel="stylesheet" type="text/css" href="css文件链接" /><!-这样外联css文件,注意不要更改rel="stylesheet" type="text/css"-></head><body><div id="adv"><div id="pic"><img id="pic1" src="图片链接" ></div><div id="close"><img id="clos1" src="图片链接" /></div></div><script src="js文件链接" type="text/javascript"></script><!-js一定要放在最后-></body>
</html>

js文件：

var close = document.getElementById("clos1");
var adv = document.getElementById("adv")
//关闭广告
close.onclick=function(){adv.style.display = "none";
}

css文件：

*{margin: 0px;padding: 0px;
}
#adv{position: fixed;/*相对于浏览器窗口进行绝对定位*/top: 50%;left: 50%;transform: translate(-50%,-50%);
}
img{max-width: 100%;/*随浏览器大小图片而发生变化*/height: auto;
}
#clos1{width: 15px;height: 15px;float: right;
}

下面有关几点进行说明：

1.有关js为什么非要放在最后？

如果是这样

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>广告页面</title><link rel="stylesheet" type="text/css" href="css文件链接" /><!-这样外联css文件,注意不要更改rel="stylesheet" type="text/css"-></head><body><script src="./js/rw04.js" type="text/javascript"></script><div id="adv"><div id="pic"><img id="pic1" src="图片链接" ></div><div id="close"><img id="clos1" src="图片链接" /></div></div></body>
</html>

就会发生这种情况：

00:05:23.319 UncaughtTypeError: Cannot set property 'onclick' of nullat js/rw04.js:4

这是因为HTML是从上向下读取和执行的，读一句，执行一句，所以会造成找不到所需要控制的部件，因此必须写在注释处。

2.有关margin,padding和position？

margin：属性设置或返回元素的外边距。
padding：属性设置或返回元素的内边距。
position:属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

菜鸟教程

实现后的效果：

非常完美！！！

2.用Javascript数组在页面上放置多张广告图片，同时动态计算不同广告位之间的布局，实现水平等间距布局。

直接上干货:
HTML:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>广告页面</title><link rel="stylesheet" type="text/css" href="css文件链接" /><!-这样外联css文件,注意不要更改rel="stylesheet" type="text/css"-></head><body><div class="main"><div class="row"><div><img src="图片链接"/></div></div><div class="row"><div><img src="图片链接"/></div></div><div class="row"><div><img src="图片链接"/></div></div><div class="row"><div><img src="图片链接"/></div></div>    <div class="row"><div ><img src="图片链接" /></div></div></div><script src="js/rw04.js" type="text/javascript"></script>    </body>
</html>

CSS:

.main{width: 100%;height:auto;
}
.row{float: left;width: 200px;height: 100px;}
img{width: 200px;height: 100px;
}

JS:

window.onresize = function()//窗口加载时获取
{var x = document.getElementsByClassName("row");//通过class来获取数组var i;var wiw = window.innerWidth;//获取窗口内宽var spw = wiw % 220;//取余var count = parseInt(wiw/220);//整除后看能放几个if (spw<200) {var pa = parseInt(wiw-count*200)/(count);//计算间距} else{var pa = parseInt(wiw-(count+1)*200)/(count+1);count = count+1;}for (i = 0;i < x.length ; i++){if (i % count == 0) {x[i].style.margin = pa + "px";//改变padding} else{x[i].style.margin = pa + "px";}}
}

下面有关几点进行说明

1.关于margin、padding和border：

因此对于下面要实现编写js时会有不同的解决办法。

2.对于外链js中的函数定义：
这个函数的定义确实时困扰了我很长时间，当然方法还是得按需选择，有需要可以查看菜鸟教程：JavaScript函数定义

实现后的效果

完美！

3. 最后，用JavaScript代码实现多张广告图片轮播效果

一样，直接上干货：

HTML:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>广告页面</title><link rel="stylesheet" type="text/css" href="css文件链接" /><!-这样外联css文件,注意不要更改rel="stylesheet" type="text/css"-></head><body><div class="picture"><img src="图片链接"/></div><script src="js文件链接" type="text/javascript"></script>    </body>
</html>

css:

.picture{position: fixed;width: 31.25rem;height: 20.875rem;margin: 0 auto;border: 2px solid red;overflow: hidden;top: 50%;left: 50%;transform:translate(-50%,-50%);
}
.pst{position: absolute;margin: 0rem;width: 100%;height: 0rem;background-color: azure;
}
img{width: 100%;height: 100%;
}

js:

var address = ["图片链接","图片链接","图片链接","图片链接","图片链接","图片链接"];
var imgs = document.querySelector("img");//轮播图
var len = address.length;//把地址的数量为len
var x = 0;
str = function(){x++;if(x>5){x=0;}imgs.src=address[x];
}
setInterval(str,3000)//间隔指定的毫秒数不停地执行指定的代码

###实现后的效果

总结

完美完成任务！！这次任务我从零开始学习了JavaScript的相关知识，时间较短，肯定有许多没有理解到的地方。这里要特别感谢学习小组里面的组长HU.sir，许多不会的问题都是找这位大兄弟解决的。从零开始我会一直坚持下去的！！

从零开始的C1认证：任务四：艰巨挑战相关推荐

从零开始的C1认证：任务二：员工宿舍组网
文章目录前言一.任务是什么? 二.任务具体内容三.任务完成的相关知识 1.什么是IP地址 2.分类的IP地址 1.IP地址各字段的意义 2.IP地址的分类 3.IP地址的指派范围 4.划分子网的 ...
C1认证之web基础知识及习题——我的学习笔记
文章目录目录文章目录前言 Web基础十四.语义化标签知识点习题十五.表单标签知识点习题十六.转义字符知识点习题十七.Head头知识点习题十八.CSS引入方 ...
C1认证学习六（HTTPS）
C1认证学习六(HTTPS) 文章目录 C1认证学习六(HTTPS) 任务学习任务目标加密算法对称加密非对称加密不可逆加密 SSL TLS 任务学习 HTTPS是身披 SSL / TLS 的 ...
C1认证学习一（进制学习）
C1认证学习一(进制学习) 文章目录 C1认证学习一(进制学习) 目标进制的定义二进制八进制十六进制十进制准换方法其他进制转换为十进制十进制转换为其他的进制二进制转换为八进制二进制 ...
C1认证学习十三（数据结构常识）
C1认证学习十三(数据结构常识) 任务背景数据结构是计算机中存储.组织数据的方式,他研究如何构造复杂的软件系统,它的核心是如何分解以及抽象,并且得到软件开发过程中的所需要的逻辑结构. 任务目标 1. ...
C1认证学习四（多媒体基础参数）
C1认证学习四(多媒体基础参数) 文章目录 C1认证学习四(多媒体基础参数) 任务学习任务目标参数的定义比特率采样率采样位深任务学习所谓的多媒体指的是多种媒体的综合,一般都包含有图像.声 ...
C1认证学习十四、十五（算法常识、HTML Head 头）
C1认证学习十四.十五(算法常识.HTML Head 头) 文章目录 C1认证学习十四.十五(算法常识.HTML Head 头) 十四(算法常识) 任务背景任务目标查找算法 1.顺序查找 2.二分 ...
C1认证学习五（HTTP）
C1认证学习五(HTTP) 文章目录 C1认证学习五(HTTP) 学习任务任务目标学习任务超文本传输协议: Hyper Text Transfer Protocol:HTTP HTTP是一个简单 ...
C1认证学习三（数据校验）
C1认证学习三(数据校验) 文章目录 C1认证学习三(数据校验) 数据校验任务背景校验的方法奇偶校验数据校验这是第三个笔记:数据的校验. 任务背景在数据传输的过程中,会受到各种各样的干扰. ...

从零开始的C1认证：任务四：艰巨挑战