[成都|]JS-|2018年11月08日的日报-技能树.IT修真院

发表于： 2018-11-08 20:46:19

3 787

今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）

今天修改任务七，之后开始做任务八。

任务八和任务九要一起做，做响应式网页布局。

响应式、自适应、移动的区别

响应式中的一些术语可能并不是新的，而其他术语又跟自适应或是移动有点像。那么你也许会困惑，他们之间的区别到底是什么?

响应式和自适应的关系很密切，经常二者是互通的。响应式通常意味着对待任何变化，反应更积极更快。而自适应往往是应对一个新需求或是情况的被动反应，例如变化。响应式设计应对不同因素的变化，都会很流畅自如，例如设备宽度。而自适应设计会基于一定的因素搭建。将二者结合是一种理想化，提供一个完美功能模式的网站，这个术语不会产生很大的歧义。

另一方面，移动设备，通常意味着需要为移动用户，专门搭建一个移动网站。然而这样做可能有些作用，却不是很好的主意。移动网站要求必须非常轻巧，然而他又很依赖一个新的代码库和浏览器的嗅探。所有的这些都是摆在开发者和用户面前的一个障碍。

响应式设计主要有三部分组成：流式布局，媒体查询和灵活的媒体类型。

布局方式：

第一部分，流式布局

就是用灵活的网格搭建一个网站布局，它可以动态的调整以适应于任何宽度。网格布局使用相对长度单位，通常是百分比或是em。这些相对长度多用于网格，诸如宽度，间距或是留白等属性。

流式布局不推荐使用固定单位，如px或是英寸。因为屏幕的宽高会随着设备的不同而改变。

仅靠灵活的布局方法是不够的。有时浏览器视口的宽度可能很小，甚至按比例缩放布局也会产生太小而无法有效显示内容的列。具体地说，当布局太小或太大时，文本可能变得难以辨认并且布局可能开始破坏。在这种情况下，媒体查询可用于帮助建立更好的体验。

今天做官网页面，开始做轮播图，使用了Bootstrap的框架来做轮播图。

做出来的效果如上图所示，有点可以选择，有左右可以切换。

之前做任务七的时候出现了audio标签不能自动不懂的问题，原因是网页端的数据加载过慢，即使使用控制器控制，也还是会过很久才会自动播放，应该是加载的原因。

昨天被师兄科普了一下，web端这边居然可以强制浏览器使用什么内核，感觉贼厉害。

加上这段代码。

国内浏览器纯粹使用ie的不多，大多数还是使用的以qq和360等浏览器为主的，所以使用flex，弹性盒子的时候，使用这段代码可以将浏览器的ie内核切换成chorme内核。已解决适配。

看了一下多列布局，

多列布局使用bfc

Block formating context（块级格式化上下文）

web页面盒模型布局的css渲染模式

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

为了便于理解，我们换一种方式来重新定义BFC。一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：

1、float的值不是none。

2、position的值不是static或者relative。

3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

4、overflow的值不是visible

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

布局的传统解决方案，

基于盒状模型，依赖 display属性 + position属性 + float属性。

昨天用轮播图，开始抠图用的是纯背景图，加上字来写，发现这样做不能有很好的观看体验，

于就将连字带图一起扣下来，不过在背景图加上字的时候调试的时候轮播图一直在动，所以找了一段代码来控制轮播图。

<!-- 控制按钮 -->
<div style="text-align:center;">
<input type="button" class="btn start-slide" value="Start">
<input type="button" class="btn pause-slide" value="Pause">
<input type="button" class="btn next-slide" value="Next Slide">
</div>

</div>
<script>
$(function () {
// 初始化轮播
$(".start-slide").click(function () {
$("#myCarousel").carousel('cycle');
});
// 停止轮播
$(".pause-slide").click(function () {
$("#myCarousel").carousel('pause');
});
// 循环轮播到下一个项目
$(".next-slide").click(function () {
$("#myCarousel").carousel('next');
});
});
</script>