发表于： 2019-04-22 23:20:51

css-任务八-九-总结

任务耗时：本次任务从4-13-4-18

官方脑图：

个人脑图：

今天完成的事情：

1.完成了任务八

2.学习了深度思考，如何实现轮播图

制作轮播图的方法有两种:css轮播或js轮播

1，css轮播。

css轮播流程

流程图解释：

1，把input[type="radio"]的一组按钮用设置相同name属性的方向进行关联，使得这组input可以切换。

2，用label标签可单向绑定input，点击label即可使相应的input被：checked。

3，多个label标签可绑定同一个input，分别为左右切换按钮和底部指示器设置一组label。

4，当input被：checked后，通过选择器可控制图片或label标签的样式。

5，input：nth-of-type（n）是选择input的父元素的第n个input子元素。

6，input ~选择input之后的兄弟元素。

3.组件的三种方法

1.预编译语言
在开发阶段，用更完善的第三方程序语言，生成html，css，js代码。
缺点：css有sass，less；js有CoffeeScript，TypeScripty；HTML呢？
优点：如果语言有缺陷，那我就再套一层语言来隐藏这些缺陷。
将来：据说hex语言...

2.css和html写在html文件里

然后以

{
type:"get",
dataType:"text",
url:"module.html",
async:true,
cache:true}

这个配置，ajax get请求html，
再把请求过来的文本，转换为dom节点即可。
缺点：请求过多。
优点：html代码和css代码修改起来方便。
将来：多个http请求可以在同一个tcp连接进行，浏览器的页面缓存策略升级。这个方案不错。

3.css和html，js都写在一个js文件

方式一，

var $html = $('<div class="moduleHtml"></div>'),
$css = $('<style>.moduleHtml{}</style>');

$("head").append($css);
$("body").append($html);

方式二，
因为dom是一个树形结构，json也是一个树形结构，于是可以用json生成html。
因为css是一个层叠结构，json也能表达层叠结构，于是可以用json生成css。
貌似，好像，react就是这么做。

缺点：html代码和css代码修改起来不方便。
优点：单文件闯关东。
将来：将来就是当下。

明天计划的事情：

1.完成任务十

遇到的问题：

暂时没有遇到什么问题。

收获：

1.一个是对库的用，

返回列表