css task 8任务总结

成果链接：https://ruanshaofan.github.io/Test01/html/html8-1.html

官方脑图：

个人脑图：

任务总结：

1.通过任务知道了什么是bootstrap。 bootstrap是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

2.在页面中引入bootstrap插件，并在实际页面布局进行运用。

3.学会了使用轮播图，在页面中进行运用，创建属于自己的轮播图样式。

4.对页面中的元素使用伪类，为页面添加动画效果。并通过资料学习了一些创建的页面布局的方式。

今天完成的事：

今天设计了两个静态页面，

使用<input type ="range" >设计自定义滑动条。

html5中input的type=range时，是数字选择器，下面是改变其默认样式，设置自定义样式的方法，并且避免点击范围太小的情况。

.progress input[type=range] {
       -webkit-appearance: none;/*隐藏滑块，以便自定义滑块样式*/
    width: 80%;
       height: 1rem;
       background: -webkit-linear-gradient(#fab344, #fab344) no-repeat, #ffe6be;/*设置左边颜色为#61bd12，右边颜色为#ddd*/
    background-size: 0 100%;/*设置左右宽度比例*/
}
input[type="range"]::-webkit-slider-thumb {
       -webkit-appearance: none;
       height: 4rem;/*拖动块高度*/
    width: 6rem;/*拖动块宽度*/
    background: url(../img/task8.1/btn1.png) center center;
       border: 1px solid #fab344;
    
   border-radius: 5px;
}

2.jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达期望的元素为止。

通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

3.jQuery 操作 CSS

  jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

     addClass() - 向被选元素添加一个或多个类

     removeClass() - 从被选元素删除一个或多个类

     toggleClass() - 对被选元素进行添加/删除类的切换操作

     css() - 设置或返回样式属性

4.删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

• remove() - 删除被选元素（及其子元素）
• empty() - 从被选元素中删除子元素

jQuery remove() 方法删除被选元素及其子元素。                   

语法： $("#div1").remove();

jQuery empty() 方法删除被选元素的子元素。                    

语法：$("#div1").empty();

过滤被删除的元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class="italic" 的所有 <p> 元素：           

语法：  $("p").remove(".italic");

明天计划的事：完成剩余静态页面设计，

遇到的问题：在设计“”参数设置“”这个页面的时候，页面 中需要设置一个滑动条，直接使用<input type ="range" >设计出来的滑动条达不到期望的样式，后来自定义滑动条的时候，拖动块左右颜色不变化后来设置了

background: -webkit-lineargradient(#fab344, #fab344) no-repeat, #ffe6be;/*设置左边颜色为#61bd12，右边颜色为#ddd*/

background-size: 0 100%;/*设置左右宽度比例*/

解决了这个问题。

收获：完成两个页面设计，