文章目录
挑战挑战里面不懂的东西（经典胡言乱语）CRUD中间件 说明任务一（一脸懵）1.啥是CSS2.崩溃的开始3.分析一下任务一1.首先，能够用HTML+CSS+JavaScript在页面中生成一幅广告图片下面有关几点进行说明：实现后的效果：2.用Javascript数组在页面上放置多张广告图片，同时动态计算不同广告位之间的布局，实现水平等间距布局。下面有关几点进行说明实现后的效果3. 最后，用JavaScript代码实现多张广告图片轮播效果 总结挑战
进制及其运算确立了计算机科学中最基本的数据格式、记录方式；掌握了编程语言，工程师就可以让计算机按自己的想法运行程序了。但做到这些就够了吗？（我这也做不到啊啊啊啊啊！！！）
为什么有些同学虽然找到了工作，但一直只能做简单的CRUD呢？（CRUD？？？？？）为什么大厂面试的时候都喜欢考算法？（这我还是不太了解）为什么有些开源的中间件能支撑很大的并发流量，而另外一些功能相同的中间件性能却非常差呢？（？中间件？）
挑战里面不懂的东西（经典胡言乱语）
CRUD
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;//把地址的数量为lenvar x = 0;str = function(){x++;if(x>5){x=0;}imgs.src=address[x];}setInterval(str,3000)//间隔指定的毫秒数不停地执行指定的代码
###实现后的效果
