Web前端系统学习——课程笔记
课程链接:WEB前端系统学习 - 网易云课堂
参考教程:菜鸟教程
笔记链接:Web-Learn-Note
章节1 前端的认知
-
课时1 Html5及行业介绍 23:07
-
课时2 课程介绍及工具安装PS使用 27:02
Sublime Text3安装、相关使用插件介绍 PS安装
-
课时3 HTML文档的结构 14:23
章节2 CSS引入
-
课时4 CSS引入之行间样式与内部样式、标签名 21:10
1.行间样式的引入 写法:在标签中,写一个style的属性 比如:style="....." 在引号当中,写相应的css样式 缺点:不利于维护,不利于代码重用 优点:优先级最高 2.内部样式表的引入 写法:在head标签里,写一个style的标签,在标签中,通过选择器来控制样式 选择器? 标签名选择器 写法 : div { ... css的样式 } ID选择器 写法: 首先在相应标签中设置一个ID的属性 如: id="id名" 在样式表中,通过 # + id名 { ... css的样式 } 温馨小提示: id名要以英文字母开头 id名不能重复,是唯一的 class选择器 写法: 首先在相应标签中设置一个class的属性 如:class="class名" 在样式表中,通过 . + class名 { ... css的样式 } 温馨小提示 class名以英文字母开头 优先级 标签名选择器 < class选择器 < id选择器 < 行间样式 优点:加载速度快,不需要去请求服务器 缺点:不利于代码重用 3.外部样式表的引入 写法:在head标签里,写一个link标签,用来关联一个css的文件,在css文件中,通过选择器来控制样式 温馨提示. <link rel="stylesheet" href="css文件的路径"> 优点:利于代码重用 缺点:需要加载服务器
-
课时5 class选择器和外部样式表,选择器优先 19:18
标签名选择器 < class选择器 < id选择器 < 行间样式
-
课时6 css宽、高、背景设置 26:35
width 宽 height 高 background 背景 背景色 background-color:颜色值 英文单词 十六进制 rgb 背景图 background-image:url("图片路径") 背景图平铺 background-repeat:no-repeat repeat-x repeat-y 背景图定位 background-position:第一个值(X轴的位置) 第二个值(Y轴的位置); 第一个值: left center right 30px; 第二个值: top center bottom 100px; 复合写法 background: color image position repeat; 背景图滚动 background-attachment:fixed; 背景图尺寸 background-size:第一个值(X轴的比例) 第二个值(Y轴的比例); 温馨小提示:css3的样式 不兼容
章节3 CSS盒模型
-
课时7 css的基础样式-border 17:20
border 边框 复合写法 border: border-width border-style border-color; border-width 边框宽度 border-style 边框样式 solid 实线 dashed 虚线 dotted 点线 (点线IE6不认) border-color 边框颜色 英文单词 十六进制 rgb border-radius 圆角 透明 transparent
-
课时8 css的基础样式-padding 18:08
padding 内边距 内填充 padding-top 上内边距 padding-right 右内边距 padding-bottom 下内边距 padding-left 左内边距 padding:10px; 一个值代表 上右下左都是10px padding:10px 20px; 两个值 第一个值代表上下 第二个值代表左右 padding:10px 20px 40px; 三个值 第一个值代表上 第二个值代表左右 第三个值代表下 padding:10px 20px 40px 80px; 4个值 第一个值代表上 第二个值代表右 第三个值代表下 第四个值代表左
-
课时9 css的基础样式-margin 18:33
margin 外边距 margin-top 上外边距 margin-right 右外边距 margin-bottom 下外边距 margin-left 左外边距 margin的复合写法 margin:10px; 一个值代表 上右下左都是10px margin:10px 20px; 两个值 第一个值代表上下 第二个值代表左右 margin:10px 20px 40px; 三个值 第一个值代表上 第二个值代表左右 第三个值代表下 margin:10px 20px 40px 80px; 4个值 第一个值代表上 第二个值代表右 第三个值代表下 第四个值代表左
-
课时10 盒模型 14:02
空间大小 : 盒子的总宽度 : border-left + padding-left + width + padding-right + border-right 盒子的总高度 : border-top + padding-top + height + padding-bottom + border-bottom 位置 margin