临摹中国慕课静态网页第二周周记（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);
}.down:hover .down_1 {display: block;}

（6）CSS-margin:0 auto

无效原因：

  • 要给居中的元素一个宽度，否则无效。
  • 该元素一定不能浮动或绝对定位，否则无效。
  • 在HTML中使用 标签，需考虑好整体构架，否者全部元素都会居中的。
  • 有时需要给父级元素添加text-align: center;
  • 有时可能涉及到 <!DOCTYPE>类型相关定义。

​ 或者给元素设置left:50%再减去本身宽度一半来居中

（7）CSS图片模糊处理

filter

将模糊或者颜色偏移等图像效果用于元素，通常用于调整图像，背景和边框的渲染

滤镜效果 描述 ：

Alpha 设置透明度
Blru 建立模糊效果
Chroma 把指定的颜色设置为透明
DropShadow 建立一种偏移的影象轮廓，即投射阴影
FlipH 水平反转
FlipV 垂直反转
Glow 为对象的外边界增加光效
Grayscale 降低图片的彩色度
Invert 将色彩、饱和度以及亮度值完全反转建立底片效果
Light 在一个对象上进行灯光投影
Mask 为一个对象建立透明膜
Shadow 建立一个对象的固体轮廓，即阴影效果
Wave 在X轴和Y轴方向利用正弦波纹打乱图片
Xray 只显示对象的轮廓

Blur 滤镜
语法：对于HTML：{filter:blur(add=add,direction=direction,strength=strength)}
对于Script语言： [oblurfilter=] object.filters.blur
用手指在一幅尚未干透的油画上迅速划过时，画面就会变得模糊。”Blur’就是产生同样的模糊效果。

“ADD”参数是一个布尔判断“TRUE（默认）”或者“FALSE”。它指定图片是否被改变成印象派的模糊效果。模糊效果是按顺时针的方向进行的，“DIRECTION”参数用来设置模糊的方向。其中0度代表垂直向上，然后每45度为一个单位。它的默认值是向左的270度。“STRENGTH“值只能使用整数来指定，她代表有多少像素的宽度将受到模糊影响。默认是5个。

（8）CSS flex 属性

任何一个容器都可以指定为flex布局

当我们为父盒子设为flex布局以后，子元素的float,clear,vertical-align属性将失效

伸缩布局=弹性布局=伸缩盒布局=flex布局

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

一，flex布局父项常见属性

主轴（x）和侧轴(y)

①-flex-direction(主轴方向)

值 描述 实例
row(x轴) 默认值。灵活的项目将水平显示，正如一个行一样。
row-reverse 与 row 相同，但是以相反的顺序。
column（y轴） 灵活的项目将垂直显示，正如一个列一样。
column-reverse 与 column 相同，但是以相反的顺序。
initial 设置该属性为它的默认值。 [
inherit 从父元素继承该属性。

语法：

div
{display:flex;
flex-direction:row-reverse;
}

②-justify-content （主轴对齐方式）

设置主轴上的子元素排列方式

使用这个属性之前一定要确定好主轴是哪个

值 描述
flex-start 默认值。项目位于容器的开头。
flex-end 项目位于容器的结尾。
center 项目位于容器的中心。
space-between 项目位于各行之间留有空白的容器内。（先两边贴边，再平分剩余空间）
space-around 项目位于各行之前、之间、之后都留有空白的容器内。(平分剩余空间)
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。

语法：

div
{display: flex;justify-content: space-around;
}

③-align-items（交叉轴对齐方式）

默认主轴为x轴，该属性在控制子项在侧轴上排列方式，在子项为单项（单行）的时候使用

定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

值 描述
stretch 默认值。（不要设置高度）元素被拉伸以适应容器。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
center（重要） 元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
flex-start 元素位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end 元素位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
baseline 元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。

语法：

div
{display: flex;align-items:center;
}

④-align-content （多根轴线对齐方式）

设置子项在侧轴上的排列方式并且只能用于子项出现在换行的情况（多行），在单行下没有效果

在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）

值 描述
stretch 默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。
center 元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）
flex-start 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。
flex-end 元素位于容器的结尾。各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。
space-between 元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’flex-start’。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。
space-around 元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’center’。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。
initial 设置该属性为它的默认值。请参阅 initial。
inherit 从父元素继承该属性。请参阅 inherit。

⑤-flex-wrap(一条轴线排不下如何换行)

让弹性盒元素在必要的时候拆行,

若父盒子中一行上装不开，会缩小子盒子的宽度放在一行上

值 描述
nowrap 默认值。规定灵活的项目不拆行或不拆列。
wrap 规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。

语法

div{display:flex;flex-wrap: wrap;
}

⑥-flex-flow

flex-direction 和 flex-wrap 属性的复合属性。

用于设置或检索弹性盒模型对象的子元素排列方式。

值 描述
flex-direction 可能的值： row row-reverse column column-reverse initial inherit默认值是 “row”。规定灵活项目的方向。
flex-wrap 可能的值： nowrap wrap wrap-reverse initial inherit默认值是 “nowrap”。规定灵活项目是否拆行或拆列。
initial 设置该属性为它的默认值。请参阅 initial。
inherit 从父元素继承该属性。请参阅 inherit。

语法

div{display:flex;
flex-flow:row-reverse wrap;
}

二，flex布局子项常见属性

1.flex子项目占的份数

（重要）

定义子项分配的剩余空间

在父盒子中平均分配子盒子很有效，例如慕课网中的计算机栏目

或者不一定要子盒子平均，也可以分配空间不同的子盒子，例如导航栏中轮播图所在的父盒子，可以使用这个属性

语法

.item {/* 默认值 0，number越大，子项所占的父项的比例越大 */flex: <number>;
}

2.align-self

控制子项自己在侧轴的排列方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性 。
默认值为auto ，表示继承父元素的 align-items 属性(flex-start、flex-end、center、stretch)，如果 没有 父元素，则等同于 stretch。

span:nth-child(n) {/*设置自己在侧轴上的排列方式*/
align-self: flex-end;
}

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性 。
默认值为auto ，表示继承父元素的 align-items 属性(flex-start、flex-end、center、stretch)，如果 没有 父元素，则等同于 stretch。

span:nth-child(n) {/*设置自己在侧轴上的排列方式*/
align-self: flex-end;
}

3.order

属性定义子项的排列顺序（前后顺序）

数值越小，排列越靠前，默认为0 。

若想二号盒子在一号盒子前面可以给二号盒子设置order：-1（-1<0）

.item {
order: <number>;
}

（9）rem

相对单位，em针对父元素字体大小

使用rem为元素设定字体大小时，仍然是相对大小，**但相对的只是HTML根元素。**这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应

优势：

可以通过html的文字大小来改变页面中元素的大小可以整体控制

（10）媒体查询

Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。

@media 媒体类型(all/print/screen) and/not/only （媒体特性）{你的样式}

注意：使用Media Queries必须要使用“@media”开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。

①-and关键词

可以将多个媒体特性连接在一起，相当于“且”的意思

②-not关键词

使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作

③-only关键词

only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的

（10）媒体特性

1. 最大宽度max-width

“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。

2.最小宽度min-width

“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

3.媒体查询+rem

实现元素动态变化

引入资源

语法规范：

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

最好以从小到大的顺序来媒体查询

例如：

<link rel"" herf="" media="screen and (min-width:320px)"(判定条件)>

(11)Less

LESS是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。 LESS是一种动态样式表语言，扩展了CSS的功能。 LESS也是跨浏览器友好。

CSS预处理器是一种脚本语言，可扩展CSS并将其编译为常规CSS语法，以便可以通过Web浏览器读取。 它提供诸如变量，函数， mixins 和操作等功能，可以构建动态CSS。

①-为什么要使用LESS？

  • LESS支持创建更清洁，跨浏览器友好的CSS更快更容易。
  • LESS是用JavaScript设计的，并且创建在 live 中使用，其编译速度比其他CSS预处理器更快。
  • LESS保持你的代码以模块化的方式，这是非常重要的，通过使其可读性和容易改变。
  • 可以通过使用LESS 变量来实现更快的维护。

②-优点：

  • LESS轻松地生成可在浏览器中工作的CSS。
  • LESS使您能够使用嵌套编写更干净，组织良好的代码。
  • 通过使用变量可以更快地实现维护。
  • LESS使您能够通过在规则集中引用它们来轻松地重用整个类。
  • LESS提供使用操作，使得编码更快并节省时间。

③-Less 变量范围

变量范围指定可用变量的位置。 变量将从本地作用域搜索，如果它们不可用，则编译器将从父作用域搜索。

语法：

@变量名：值

规范：

  • 必须有@为前缀
  • 不能包含特殊字符
  • 不能以数字开头
  • 大小写敏感

例子：

@color:gray;
body{background-color:@color;
}

④-Less 嵌套规则

允许将一个类的属性用于另一个类，并且包含类名作为其属性。 在 LESS 中，可以使用类或 id 选择器以与 CSS 样式相同的方式声明 mixin。 它可以存储多个值，并且可以在必要时在代码中重复使用。以免在修改数据时候过于繁琐

less嵌套规则

嵌套写法：

#header{.logo{width:300px;}
}

在父元素中直接写子元素的样式即可

若涉及到伪类，伪元素，交集等选择器，则需要在其前面加上&符号，便会被解析为父元素本身或父元素的伪类。

若无&符号，则其被解析为父选择器的后代。

例：

a{&:hover{color:blue;}
}

⑤-Less运算

注意:

  • 乘号（*）和除号（/）写法
  • 运算符中间左右有个空格隔开1px + 5
  • 对于两个不同的单位的值之间的运算，运算结果的值就取第一个值的单位
  • 如果两个值之间只有一个只有单位，则运算结果就取改单位

任何数字、颜色或者变量都可以参与运算.

rem适配方案

技术方案1：

  • less

  • 媒体查询

  • rem

技术方案2：

  • flexinle.js
  • rem

元素大小取值方法：

最后公式：页面元素的rem值=页面元素值（px）/（屏幕宽度/划分的份数）

屏幕宽度/划分的份数=html font-size的大小

页面元素的rem值=页面元素值/html font size字体大小

(12)响应式开发

①-响应式网站的设计理念：

  • 弹性网格布局
  • 弹性图片
  • 媒体查询

断点的选择（width、min-width、max-width）：

超小屏幕（手机）设备：小于等于768px; 宽度100%

小屏幕（平板）设备：768 ~ 992px；宽度：750px

中等屏幕（桌面显示器）设备：992~ 1200px；宽度:970px

宽屏屏幕（大桌面显示器）：1200+px；宽度：1170px

@media screen and (max-width:767px){.container{width:100%}
}小屏幕下：
@media screen and (min-width:767px){.container{width:750px;}
}中等屏幕下：
@media screen and (min-width:992px){.container{width:970px;}
}大屏幕：
@media screen and (min-width:1200px){.container{width:1170px;}
}

就是在不同终端设备上和任何尺寸的屏幕上也可以展示完美的设计

②-响应式开发容器

需要一个父级作为布局容器，来配合子级元素来实现变化效果

原理：在不同屏幕下，通过媒体查询来改变布局容器大小，再改变子元素的排列方式和大小，从而实现不同的页面布局和样式变化

.container{height: ;width: ;margin: 0 auto;}

③-响应式网站的优点

1、减少工作量，网站设计的代码只需要设计和编写一份就好，多出来的工作量就是js脚本的修改和css文件的对于屏幕的适配代码

2、节省时间

3、每个设计都能得到正确的设计，网站是面向未来的。了可扩展性强

4、搜索优化

5、能够满足更多的系统功能

④-响应式网站的缺点：

1、用户体验不能再优化

2、会加载更多的样式表和脚本文件

3、对于来版本的浏览器是不兼容的

4、难以精确定位和控制

（13）Bootstrap

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

https://v3.bootcss.com/css/

一，bootstrap的缺点：

虽然 Bootstrap 自适应效果很好，但是缺点是不方便修改样式，对细节的不好把握，而且Bootstrap 是由 Twitter 的开发者开发来系统化他们网站应用的样式。当你的网站应用的样式和他们不一样，这意味着你不得不覆盖掉他们的样式来。大多数网站的样式并不像 Twitter 那样。因此，如果他们安装 Bootstrap ，他们会覆盖掉很多样式。

二，bootstrap使用

  • 创建文件夹结构
  • 创建html骨架结构
  • 引入相关样式文件
  • 书写内容：

直接拿bootstrap预先定义好的样式来使用

修改bootstrap原来的样式，注意权重问题

可以在原类名后添加新类名，再在csss中对新类名进行定义样式

要知道bootstrap定义了哪些样式,以及这些样式能实现什么样的效果。

三，bootstrap布局容器

.container 类用于固定宽度并支持响应式布局的容器。

与响应式布局的容器一样固定宽度，屏幕大小分类也相同

<div class="container">...
</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

适合于单独做移动端开发

<div class="container-fluid">...
</div>

四，bootstrap栅格系统

网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

  • “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
  • 通过“行（row）”在水平方向创建一组“列（column）”。
  • 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
  • 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
  • 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
  • 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
  • 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
  • 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
  • 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。
①-栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度 None （自动） 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列（column）数 12
最大列（column）宽 自动 ~62px ~81px ~97px
槽（gutter）宽 30px （每列左右均有 15px）
可嵌套 是
偏移（Offsets） 是
列排序 是 
<div class="container"><div class="col-lg-3">1<div><div class="col-lg-3">1<div><div class="col-lg-3">1<div><div class="col-lg-3">1<div><div>

每一列都默认有左右15像素的padding

可以同时为一列指定多个设备的类名，以便划分不同的份数

class=“col-md-4 col-sm-6”

从大到小：

class=“col-lg-3 col-md-4 col-sm-6 col-xs-12”

当份数超过了12份，则会溢出盒子

或少于12份,则占不满盒子

②-嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

一列里面再划分十二等份小列,但列内部还是有padding 值

<div class="container"><div class="col-lg-3"><div class="col-md-6"></div><div class="col-md-6"></div></div><div><div class="col-lg-3">1<div><div class="col-lg-3">1<div><div class="col-lg-3">1<div><div>

若想要去除列中的padding值并且把高度和父亲一样高，则需要再加上一个

包含： 
<div class="container"><div class="col-lg-3"><div class="row"><div class="col-md-6"></div><div class="col-md-6"></div></div></div>
</div>
③-列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

两个盒子排布，右边的向右偏移：

<div class="container"><div class="col-lg-3"><div class="row"><div class="col-md-6"></div><div class="col-md-6 col-md-offset-4">                </div></div></div>
</div>

若只有一个盒子，想居中，也可以将其偏移：

<div class="container"><div class="col-lg-3"><div class="row"><div class="col-md-8 col-md-offset-2">                </div></div></div>
</div>

自己占八份，则只需向右偏移两份即可居中对齐

④-列排序

通过使用 .col-md-push-*（推） 和 .col-md-pull-*（拉） 类就可以很容易的改变列（column）的顺序。

<div class="container"><div class="row"><div class="col-md-4 col-md-push-8">左侧</div><div class="col-md-8 col-md-pull-4">右侧</div></div></div>
</div>

实现左右调换顺序的效果，左边为右侧，右边为左侧。

五，响应式工具

.hidden-xs/sm/md/lg 隐藏超小屏/小屏/中屏/大屏的页面内容

<div class="col-xs-6 hidden-md"

与之相反，visible-xs,visible-sm,visible-md,visible-lg 是在某个尺寸下才能显示某个页面内容。

JavaScript-编程语言

基础知识：

  • 编程语言-逻辑性和行为能力指令

  • 标记语言-其存在是用来被读取的，被动

  • 脚本语言-逐行解释

  • 浏览器：渲染引擎（内核）+JS引擎（解释器，读取JS代码，对其处理后运行）

JavaScript组成-

1、ECMAScript

JavaScript的核心，描述了语言的基本语法(var、for、if、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义)，ECMAScript是一套标准，定义了一种语言（比如JS）是什么样子。

2、DOM

DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。请考虑下面的 HTML 页面：

3、BOM

浏览器对象模型

对浏览器窗口进行访问和操作。例如弹出新的浏览器窗口，移动、改变和关闭浏览器窗口，提供详细的网络浏览器信息（navigator object），详细的页面信息（location object），详细的用户屏幕分辨率的信息（screen object），对cookies的支持等等。BOM作为JavaScript的一部分并没有相关标准的支持，每一个浏览器都有自己的实现，虽然有一些非事实的标准，但还是给开发者带来一定的麻烦。

JavaScript书写位置

-行内、内嵌和外部

①-行内

-在html标签的属性内,通过行为触发执行.（几乎不用）

②-内嵌

-在html文件内使用script标签包裹起来，页面打开自动执行。（使用方便，但是大篇幅的JS代码千万不要用。）

<script>alert('')单引号
</script>

③-外部

-写在独立的js文件内，在html文件中使用script标签的src属性引入，页面打开自动执行。（推荐使用，因为有各种优化方法）

后缀为.js

引入JS文件

<script src=""></script>

JavaScript-注释

①-单行注释 最前面加上//-快捷键：ctrl /

②-多行注释/* */ -快捷键：shift + alt + a

ctrl + shift + /

JavaScript-输入输出语句

①-弹框警示框输出-alert

展现给用户的

alert(输出'内容')

②-输入-prompt

prompt('请输入')

③-控制台输出-console

为程序员测试用的

consol.log('控制台输出')

JavaScript-变量

容器，通过变量名来获取数据，甚至数据可以修改

程序在内存中申请的一块用来存放数据的空间

变量是指程序中一个已经命名的存储单元，它的主要作用就是为数据操作提供存放信息的容器。变量是相对常量而言的。常量是一个不会改变的固定值，而变量的值可能会随着程序的执行而改变。变量有两个基本特征，即变量名和变量值。为了便于理解，可以把变量看作是一个贴着标签的盒子，标签上的名字就是这个变量的名字（即变量名），而盒子里面的东西就相当于变量的值。

1．变量的声明

在JavaScript中，使用变量前需要先声明变量，所有的JavaScript变量都由关键字var声明

var variablename(变量名);

注：如果只有声明没有赋值，输出undefined

变量的命名规则

如下：

  • 首字符必须是大写或小写的字母、下划线（_）或美元符（$），后续的字符可以是字母、数字、下划线或美元符。

​ 若变量名为两个词，中间不能有空格，必须连在一起

  • 变量名称不能是JavaScript关键字或保留字。

​ 如： var var;

​ name不声明不赋值不会报错，过于特殊，不要使用其为变量名

  • 变量名称长度任意，但要区分大小写。

  • 不能以数字开头

  • 驼峰命名法

    除了上面的硬约束之外，用户还应遵循下面软约束，这将会使用户受益终身。

  • 变量声明应集中、置顶，如文档的前面、代码的前面，或者函数内的上面。

  • 使用局部变量。不要把所有变量都放置在段首，如果仅在函数内使用，建议在函数内声明。

  • 变量名应易于理解。

  • 避免混乱。声明变量之前，应该先规划好，避免类似usrname与usrName混用现象。

2．变量的赋值

在声明变量的同时也可以使用等于号（=）对变量进行初始化赋值

var lesson="JavaScript";

另外，还可以在声明变量之后再对变量进行赋值，例如：

01  varlesson;
02  lesson="零基础学JavaScript";

数字可以不加引号

①-更新变量

以最后一次值为准

②-声明多个变量

var age =  ,address = '' ,gz =  ;

多个变量之间用逗号分隔

③-声明变量特殊情况

  • 只有声明没有赋值，输出undefined

  • 不声明不赋值直接使用，会报错

  • 不声明直接赋值，也可以使用（不提倡，会变成全局变量）

④-交换两个变量的值

-使用一个临时变量

(临时变量)
var temp;
var aa='';
var bb='';
(交换)
temp = aa;
aa = bb;
bb = temp;console.log(aa);
console.log(bb);

一、数据类型简介：

1.JavaScript（以下简称js）的数据类型分为两种：原始类型（即基本数据类型）和对象类型（即引用数据类型）；

2.js常用的基本数据类型包括undefined、null、number、boolean、string；

3.js的引用数据类型也就是对象类型Object，比如：Object、array、function、data等；

JS的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的

JS是动态语言，变量数据的类型可以变化，取决于最后的赋值

二、基本数据类型特点：

1.基本数据类型是按值访问的，就是说我们可以操作保存在变量中的实际的值；

2.基本数据类型的值是不可变的，任何方法都无法改变一个基本数据类型的值

3.基本数据类型不可以添加属性和方法：

4.基本数据类型的赋值是简单的赋值（如果从一个变量向另一个变量赋值基本类型的值，会在变量对象上创建一个新值，然后把该值赋值到位新变量分配的位置上）

5.基本数据类型的比较是值的比较

6.基本类型的值在内存中占据固定大小的空间，被保存在栈内存中。（从一个变量向另一个变量复制基本类型的值，会创建这个值的一个副本）

三、基本数据类型详解

1.number类型

默认值为0

进制：程序中数字前加上0则表示为八进制,0x为十六进制

范围：

console.log(Number.MAX_VALUE)  最大值

console.log(Number.MIN_VALUE)  最小值

例如：

var num1 = 010;
八进制转换为十进制，结果为8

①number类型包含整数和浮点数（浮点数数值必须包含一个小数点，且小数点后至少有一位数字）。

浮点数会自动转换为整数

②浮点数的最高精度是17位

③NaN

非数字类型

特点：涉及到任何关于NaN的操作，都会返回NaN，而且NaN不等于自身。

isNaN()函数

用于判断是否是一个非数字类型，如果传入的参数是一个非数字类型，那么返回true（不是数字），否则返回false（是数字）；

console.log(isNaN(输入的内容))；

⑤isNaN()函数传入一个参数，函数会先将参数转换为数值，如果参数类型为对象类型，会先调用对象的valueOf()方法，再确定该方法返回的值是否可以转换为数值类型，如果不能，再调用对象的toString()方法，再确定返回值；

**

2.string类型

var str='';
console.log(str);

①字符串类型中的单双引号作用一样；

②字符串引号嵌套：

JS可以单引号嵌套双引号，或者双引号嵌套单引号

字符串转义符：

用\开头，写在引号里面

序列 代表字符
\0 Null字符（\u0000）
\b 空格符（\u0008）
\t 水平制表符（\u0009）缩进
\n 换行符（\u000A）
\v 垂直制表符（\u000B）
\f 换页符（\u000C）
\r 回车符（\u000D）
" 双引号（\u0022）
’ 撇号或单引号（\u0027）
\ 反斜杠（\u005C）
\xXX 由 2 位十六进制数值 XX 指定的 Latin-1 字符
\uXXXX 由 4 位十六进制数值 XXXX 指定的 Unicode 字符
\XXX 由 1~3 位八进制数值（000 到 377）指定的 Latin-1 字符，可表示 256个 字符。如 \251 表示版本符号。注意，ECMAScript 3.0 不支持，考虑到兼容性不建议使用。

③字符串有length属性，可以取得字符串的长度：

var str = '';
console.log(str.length);//显示字符串长度

④字符串的值是不可变的，要改变一个字符串的值，首先要销毁原来的字符串，再用另一个包含新值得字符串区填充该字符串；

字符串拼接：

数值相加，字符相连

console.log(''+'');
字符加数字也可以，直接连在一起
console.log('12'+'12')//结果为1212
console.log(12+12)/结果为24

例子：

var age=18;
console.log(''+ age+'')//变量放在引号外面，不然无法显示变量值

或者：

var age=18;
console.log('...'+age+'')

在引号中引引加加

3.boolean类型

这个类型只有两个值，true和false；

var flag=true;
console.log(true+1);//结果为2

4.null类型

var flag=null;
console.log(null+1);//结果为 1
console.log(flag+'字符串')//结果为字符串相连

①null类型被看做空对象指针，只有一个值，即null值，所以在用typeof操作符去检测null类型的值得时候，结果是object类型；

②如果你定义了一个变量，但是想在以后把这个对象当做一个对象来使用，最好将该对象初始化为null值

5.undefined类型

var varible=undefined;
console.log(varible+'字符串')//结果为字符串相连
console.log(varible+数字)//结果为NaN-不为数字

①只有一个值，即undefined，如果声明了一个变量，但是未给变量初始化值，那么这个变量的值就是undefined：

②调用函数时，应该提供的参数没有提供，该参数等于undefined；

③对象没有赋值的属性，该属性的值为undefined；

④函数没有返回值，默认返回undefined。

检测变量数据类型

typeof 运算符

把类型信息当作字符串返回。typeof 返回值有六种可能： “number,” “string,” “boolean,” “object,” “function,” 和 "undefined."我们可以使用typeof来获取一个变量是否存在

语法：

console.log(typeof  变量名)

通过控制台颜色

黑色-字符串

蓝色-数值

深蓝色-布尔型

浅灰色-undefined,null

字面量

字面量分为字符串字面量(string literal )、数组字面量(array literal)和对象字面量(object literal)，另外还有函数字面量(function literal)。

数据类型的转换

数值转化：

加号拼接字符串

console.log(num+'');
String()

转型函数，适用于任何数据类型（null，undefined转换后为null和undefined）

console.log(String());
toString()

方法可以把一个逻辑值转换为字符串，并返回结果（null、undefined没有toString()方法）

var num=10;
var str=num.toString();
console.log(str);
console.log(typeof str);//结果为字符串型

Number()

转型函数，可以用于任何数据类型,如果要转换的字符串中有一个不是数值的字符，返回NaN

console.log（Number（））；

parseInt()

将值转换为整型，用的较多

console.log(parseInt());

若输入了浮点数，会直接除去小数点后面的内容，不存在四舍五入

若数值后有单位，会自动去除单位

parseFloat()

将值转换为浮点型

console.log(parseFloat());

若内容为整数，输出结果还是整数

利用算术运算（隐式转换）

console.log('12'-0);//结果为数字类型12
Boolean()

转型函数，将某个值转换为Boolean类型

0 ‘’(空字符串) null undefined NaN 会转换成false 其它都会转换成true

保留字：预留的关键字，现在还不是关键字，但未来可能会成为关键字，同样不能使用它们作为变量名或者方法名

运算符-操作符

运算符 = 用于赋值。

运算符 + 用于加值。

四.JavaScript 运算符

（1）算术运算符

浮点数在算术运算符中有问题 ，可能会得到错误结果

运算符 描述 例子 x 运算结果 y 运算结果 在线实例
+ 加法 x=y+2 7 5
- 减法 x=y-2 3 5
* 乘法 x=y*2 10 5
/ 除法 x=y/2 2.5 5
% 取模（余数） x=y%2 1 5
++ 自增
– 自减

前置递增-先加一，后返回值

后置递增-先返回原值再自加一

（2）比较运算符

比较运算符在逻辑语句中使用，以判定变量或值是否相等。

运算符 描述 比较 返回
== 等于 x == 8 false
x == 5 true
x == “5” true
=== 值相等并且类型相等 x === 5 true
x === “5” false
!= 不相等 x != 8 true
!== 值不相等或类型不相等 x !== 5 false
x !== “5” true
x !== 8 true
> 大于 x > 8 false
< 小于 x < 8 true
>= 大于或等于 x >= 8 false
<= 小于或等于 x <= 8 true

（3）逻辑运算符

逻辑运算符用于判定变量或值之间的逻辑。

运算符 描述 例子
&& 与 (x < 10 && y > 1) 为 true
|| 或 (x == 5 || y == 5) 为 false
! 非 !(x == y) 为 true

（4）条件（三元）运算符

语法

variablename = (condition) ? value1:value2

比较不同的类型

比较不同类型的数据也许会出现不可预料的结果。

如果将字符串与数字进行比较，那么在做比较时 JavaScript 会把字符串转换为数值。空字符串将被转换为 0。非数值字符串将被转换为始终为 false 的 NaN。

JS运算符优先级（从高到低列出)

运算符 描述
. [] () 字段访问、数组下标、函数调用以及表达式分组
++ – - ~ ! delete new typeof void 一元运算符、返回数据类型、对象创建、未定义值
* / % 乘法、除法、取模
+ - + 加法、减法、字符串连接
<< >> >>> 移位
< <= > >= instanceof 小于、小于等于、大于、大于等于、instanceof
== != === !== 等于、不等于、严格相等、非严格相等
& 按位与
^ 按位异或
| 按位或
&& 逻辑与
|| 逻辑或
?: 条件
= oP= 赋值、运算赋值
, 多重求值

五，流程控制

1.顺序控制

2.分支控制

（1）-if语句

if (/* 条件表达式 */) {// 执行语句
}

（2）if — else 语句

if (/* 条件表达式 */) {// 成立执行语句
} else {// 否则执行语句
}

（3）if — else if 语句

if (/* 条件1 */){// 成立执行语句
} else if (/* 条件2 */){// 成立执行语句
} else if (/* 条件3 */){// 成立执行语句
} else {// 最后默认执行语句
}

（4）switch语句

 switch (表达式) {case 常量1:  语句;break;case 常量2:语句;break;…case 常量n:语句;break;default:语句;break;}

3.循环控制

（1）for循环

执行顺序：1243 ---- 243 -----243(直到循环条件变成false)

// for循环的表达式之间用的是分号分隔的
for (初始化表达式1; 判断表达式2; 自增表达式3) {// 循环体4
}

（2）while循环

// 当循环条件为true时，执行循环体，
// 当循环条件为false时，结束循环。
while (循环条件) {//循环体
}

（3）do while循环

do {// 循环体;
} while (循环条件);

（4）continue和break

break:立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）

continue:立即跳出当前循环，继续下一次循环（跳到i++的地方）

六，JavaScript Array（数组）对象

数组对象的作用是：使用单独的变量名来存储一系列的值。

第二周感悟

两周下来的感受，当然还是学到了不少东西的，也获得亲手实践的经验。

但是回顾两周的学习，感觉自己的规划还是存在比较大的失误的，因为我是先对网页进行了临摹而没有选择进行继续学习，所以所掌握的知识还十分有限，自然将知识实践在网页上的方法就更局限了。

比如网页居中的方法，在临摹时候只学会使用margin的方法，但在第二周学习中，有很多比margin更好的方法，例如单行子元素可以使用有关flex的一些属性，多行子元素可以使用bootstrap中一些列偏移或者嵌套列；再或者盒子很单一地使用div标签，需要去设置很多样式来实现效果，但后学习的内容，还可以很容易的解决这些问题，也会节省很多时间。

所以我感觉如果是先把剩下的css学完，再学习一些JS的内容，可以运用更好的方法来临摹，所以考核结束后可能还会用新学习到的方法再临摹一下网页。

在完成下拉菜单这个功能时，一直无法正常的显示鼠标经过出现菜单的效果，也感到很疑惑，后来问过师姐后，才知道可能是级别没有设置的原因，可以通过设置z-index来提高其级别实现效果，但是还有问题是菜单中拉动条宽度比较大，看上去不太美观，而慕课中的很细，所以不太完美。

还有一个在临摹过程中遇到的问题是：从VS中打开浏览器来展现整个网页会非常的慢，有一些小的地方（字体图标）需要等待很久才会出来，这方面还是需要找到原因继续改进，也有可能是因为我的代码量太大了，因为代码不够简洁，还是有很繁琐的地方。

另外，不能大段照搬网页的代码，有试过使用慕课原本的方式来设局，但发现自己总是无法实现其功能，也可能是自己有许多没学到的地方，于是只好自己想些其它的办法，虽然也能实现，但太过死板了。

有一点遗憾没有用到rem的布局方式，rem方式可以很好的比例地控制HTML字体，其实也可以通过媒体查询等方式更加完善这个网页，总的来说，学习规划很重要，希望自己在下次可以认真考虑一下，不能太急于去完成考核，导致效果很一般

JS的学习：

之前学习的HTML和CSS是静态的，但是JavaScript就是一个动态的；可以实现点击调用函数，鼠标移动展现效果，键盘按下调用事件等多种方式。

在学习JS过程中，总觉得它和C语言很像，后来才知道，它是由C语言演变过来的，又在很大程度上借用了Java的语法，而Java又是由C和C++演生而来的，所以JavaScript和C有许多相似的语法特点。

https://sunmenglei.blog.csdn.net/article/details/113854517?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-8.control&dist_request_id=1328741.26628.16169132552678849&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-8.control

所以在学习JS过程中，我会参考网站中的思维导图方式，找到他们的相似点以及细微差别，之后我会尽快学完对象，数组，函数，DOM，JQuery等

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

  1. java学习第二周周记

    JAVA学习第二周周记 **day1.**流程控制语句 ,跳转控制语句 **day2.**什么是方法?方法的重载 **day3.**数组,栈和队列 **day4.**冒泡排序及对象的引入 **day5 ...

  2. HTML5期末大作业：官网时尚购物(网站设计——美丽说官网时尚购物(1页) HTML+CSS+JavaScript 网页设计成品DW静态网页Html5响应式css3

    HTML5期末大作业:官网时尚购物(网站设计--美丽说官网时尚购物(1页) HTML+CSS+JavaScript 网页设计成品DW静态网页Html5响应式css3 常见网页设计作业题材有 个人. 美 ...

  3. 网页设计成品DW静态网页Html5响应式css3——电影网站bootstrap制作(4页)

    HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...

  4. HTML+CSS+JS网页设计期末课程大作业 ：音乐在线网站设计——音乐在线听平台网站(26页) 网页设计成品DW静态网页Html5响应式css3

    HTML5期末大作业:音乐在线网站设计--音乐在线听平台网站(26页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页 ...

  5. 网页设计成品DW静态网页Html5响应式css3 ——响应式游戏网站(24页) HTML+CSS+JavaScript 关于制作网游网页主题论述

    HTML5期末大作业:游戏网站设计--响应式游戏网站(24页) HTML+CSS+JavaScript 关于制作网游网页主题论述 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. ...

  6. 生日快乐网页模板（HTML5+CSS3+JS）

    生日快乐模板 html+css+js 生日快乐网站模板(多页面功能版本+音乐) 给喜欢的人一个神秘的惊喜吧! 修改密码 在当前目录下,有js/verification.js文件: //修改此处的roo ...

  7. WaWa的奇妙冒险（第二周集训自闭现场）

    第二周周记 (一)例题记录 A-简单计算器 (水题,栈的运用) HDU - 1237 Input Output Sample Input Sample Output 理解 AC代码 B-计算 (逆波兰 ...

  8. 利用node.js搭建服务器并访问静态网页

    1.安装node环境 官方下载地址:链接 查看是否安装成功,快捷键win+R弹出cmd命令行: 2.创建项目结构 先创建一个文件夹server,文件夹下创建一个js文件,然后在server目录下再创建 ...

  9. HTML生日快乐代码 (粉色主题)（HTML5+CSS3+JS）520表白代码/七夕情人节网页/告白/求婚/生日快乐...

    html+css+js 生日快乐网站模板(多页面功能版本+音乐)❤520/表白/七夕情人节/求婚❤专用炫酷动画网页的源代码(HTML5+CSS3+JS) 程序员爱情❤520/表白/七夕情人节/求婚❤专 ...

最新文章

  1. HTTP访问一个网站的过程详解
  2. 记录使用websocket时因为Sec-Websocket-Protocol遇到的一个问题
  3. android常见面试问题
  4. 当一个线程进入一个对象的一个synchronized方法后，其它线程是否可进入此对象其它方法？...
  5. c语言形式参数若为b 4,2016年计算机二级c语言题库
  6. 分布式缓存服务是什么？
  7. 从 MQL4 迁移到 MQL5
  8. 服务器端网站自适应,[移动SEO]PC端和移动端最佳适配方案
  9. 【每日一题】（D0723）strcpy 智能指针
  10. 微信公众号Token验证 signature验证
  11. HTML5期末大作业：体育运动网站设计——体育文化(6页) HTML+CSS+JavaScript 体育运动网页设计 dw大学生体育文化网页设计 web课程设计网页规划与设计
  12. 18 - Transformer原理及其PyTorch源码讲解
  13. 基于python的动物判别系统
  14. linux_网络配置
  15. 塔望3W消费战略全案丨绿力冬瓜茶 三十年饮料老品牌，两年复兴战全国
  16. 使用Tornado+Redis维护ADSL拨号服务器代理池
  17. CTF之crpto练习三
  18. 大学生如何突破学习能力
  19. mac 双开应用的方法
  20. 从SVN检出Maven工程只有父工程的解决办法

热门文章

  1. 作业Homework
  2. 极光推送java后台对接
  3. import lasagne报错cannot import name downsample
  4. xp系统ip服务器地址,windowsxp系统设置固定IP地址的方法
  5. 品达物流TMS项目_第1章 项目概述和环境搭建
  6. Linux | Centos下几种CPU查看使用率的常用命令
  7. this.$refs.xxx.resetFields() 重置清处表单内容
  8. 微信小程序导航栏制作
  9. VRTK4.0 学习Day2
  10. stm32f103最小系统板详细介绍