临摹中国慕课静态网页第二周周记（CSS3+JS）

临摹中国慕课静态网页第二周周记（CSS3+JS）

第二周

这周主要是对细节，轮播图，下拉菜单等地完善和JS的学习

学习内容

（1）CSS word-break 属性

属性规定自动换行的处理方法。

语法：

word-break: normal|break-all|keep-all;

值	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

（2）伪元素

之前都没有系统的把伪元素学习一遍，因为最多用到::before和::after，关于其他的并没有了解

①，::first-line 伪元素

::first-line 伪元素用于向文本的首行添加特殊样式。

注意：::first-line 伪元素只能应用于块级元素。

以下属性适用于 ::first-line 伪元素：

• 字体属性
• 颜色属性
• 背景属性
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

请注意双冒号表示法 - ::first-line 对比 :first-line

在 CSS3 中，双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类和伪元素的尝试。

在 CSS2 和 CSS1 中，伪类和伪元素都使用了单冒号语法。

为了向后兼容，CSS2 和 CSS1 伪元素可接受单冒号语法。

②，::first-letter 伪元素

::first-letter 伪元素用于向文本的首字母添加特殊样式。

注意：****::first-letter 伪元素只适用于块级元素。

下面的属性适用于 ::first-letter 伪元素：

• 字体属性
• 颜色属性
• 背景属性
• 外边距属性
• 内边距属性
• 边框属性
• text-decoration
• vertical-align（仅当 “float” 为 “none”）
• text-transform
• line-height
• float
• clear

③,CSS - ::before 伪元素

::before 伪元素可用于在元素内容之前插入一些内容。

在慕课中经常用::before在设置箭头，小图标上

④，CSS - ::after 伪元素

::after 伪元素可用于在元素内容之后插入一些内容。

⑤CSS - ::selection 伪元素

::selection 伪元素匹配用户选择的元素部分。

以下 CSS 属性可以应用于 ::selection：

• color
• background
• cursor
• outline

（3）常用CSS伪类

①CSS :first-child 选择器

伪类与指定的元素匹配

该元素是另一个元素的第一个子元素。

但也有很容易出错的地方，:first-child的顺序会让元素样式发生变化；

例如：

（1）p i:first-child ：匹配所有

元素中的首个 元素

（2）p:first-child i ：匹配所有首个

元素中的所有 元素

:first-child放在谁后面则选定首个该元素

②CSS :last-child 选择器

提到 :first-child 选择器，就不得不提:last-child 选择器，在慕课临摹的许多区域，例如计算机栏目等小盒子中，在设定每个小盒子的外边距或内边距时，同时也为最后一个盒子设定了同样的样式，这时候就需要在css中找到最后一个盒子，为它清除外边距，以保证它与其他盒子位于同一行上。所以需要用到:last-child 选择器

.Mooc_Live_6:last-child(4n) {
   
    margin-right: 0px;
}

或者是想实现鼠标放在某个区域替换图片的效果，也可以使用last-child 选择器。

第一：现在盒子同一位置放上两张图片，将第二张图片设为display:none;不显示，再在css中对于div盒子的last-child设定：hover属性和display:block；来实现鼠标替换图片效果，这个可用于慕课网页右栏的固定广告中

③CSS3 :nth-child() 选择器

属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。

在慕课中，例如热门分类栏目，每十个标签则需要换行，这时候可以在括号中设定为10n，再加上css样式清除外边距等，来达到换行效果。

.Sort:nth-child(10n) {
   
    margin-right: 0;
}

④，CSS - :lang 伪类

允许您为不同的语言定义特殊的规则。(很少用到)

⑤，CSS :hover 选择器

这个在慕课网页用也很常见，并且几乎每个栏目中的小盒子，慕课都设置了鼠标放上可以有悬浮效果，这个可以结合盒子阴影一起使用

.Mooc_Live_6:hover {
   
    color: #333;
    -webkit-box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.1);
}

（4）轮播图

实现功能：

• 自动播放
• 左右按钮控制滚动
• 点击圆点切换图片

一，HTML部分

   <!-- Swiper -->
<div class="swiper-container">
   <div class="swiper-wrapper">
       <div class="swiper-slide">
           <img src="http://edu-image.nosdn.127.net/2c0ace6eeda743dfac08951d98712a04.jpg?imageView&quaa>
       </div>
       <div class="swiper-slide">
         <img src="http://edu-image.nosdn.127.net/548c7dd5f3b64e1ca2758dd4e364b0c8.png?imageView&quality=100"alt="">
       </div>
       <div class="swiper-slide">
         <img src="http://edu-image.nosdn.127.net/18948c0d27b64ff6b555f9b43ba70f2b.png?imageView&quality=100&thumbnail=776y360"alt="">
       </div>
      
     <!-- Add Arrows -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
                                   

在html中布置大盒子以及小盒子，大盒子为轮播图整体框架，而小盒子则存放每张轮播的图片。

二，CSS部分

.swiper-container {
   
    width: 100%;
    height: 100%;
}
.swiper-slide{
   
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.swiper-slide img {
   
    width: 776px;
    height: 360px;
}

设置各个盒子的高度宽度，字体大小，以及选用弹性盒子

三，JS部分

轮播图最重要的就是JS的部分了

首先要引入swiper有关的链接：

<script src="./js/swiper.min.js"></script>

再在

 <script>
        var swiper = new Swiper('.swiper-container', {
   
            cssMode: true,
            autoplay: true,
            navigation: {
   
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
   
                el: '.swiper-pagination'
            },
            mousewheel: true,
            keyboard: true,
        });
    </script>

①-cssMode

启用后，它将使用现代CSS Scroll Snap API。

②-autoplay

:设置为true启动自动切换，并使用默认的切换设置。

③-navigation

:使用前进后退按钮来控制Swiper切换。主要为左右两个箭头按钮

④-pagination

：使用分页器导航。分页器可使用小圆点样式（默认）

⑤-mousewheel

：开启鼠标滚轮控制Swiper切换

⑥-keyboard

：设置开启键盘来控制Swiper切换。设为true时，能使用键盘的方向键控制slide切换。

特别注意：若要使用swiper中的样式，还是需引入css以及js有关链接。

 <link rel="stylesheet" href="./style.css">
 <link rel="stylesheet" href="./css/swiper.min.css">

具体操作方法：https://www.bilibili.com/video/BV14J4114768?t=80&p=256–484集swiper插件

（5）下拉菜单

在慕课导航栏中的“课程”中有一个下拉菜单的功能，且下拉中三角形会发生旋转效果。

说明：

首先将课程与要下拉的菜单放在同一个盒子中，对下拉的盒子设置display:none，再在最后设置::after，通过CSS显现一个三角形，是由一个正方形盒子通过对两边进行透明化，再运用transition过渡和旋转功能

一，HTML部分

 <div class="down">
    <a href="#" class="chinaMooc_1">课程</a>
     <div class="down_1">
         下拉菜单内容
     </div>
</div>

二，CSS部分

.down::after {
   
    content: '';
    position: absolute;
    top: 38%;
    right: 2px;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-width: 6px 5px 0 5px;
    border-top-color: #c6c6c6;
    -webkit-transition: all .3s;
    transition: all .3s;
    cursor: pointer;
}

.down:hover::after {
   
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)