一只小白657-CSDN博客

原创 JavaScript-对象

对象1.对象1.1什么是对象1.2为什么需要对象2.创建对象的三种方式2.1利用字面量创建对象2.2利用new Object创建对象2.3利用构造函数创建对象1.对象1.1什么是对象在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。对象由属性和方法构成属性：事物的特性，在对象中用属性来表示（常用名词）方法：事物的行为，在对象中用方法来表示（常用动词）1.2为什么需要对象保留一个值时，可以使用变量，保留多个值时，可以使用数组

2021-11-26 23:00:23 423 1

原创 JavaScript命名规范

命名规范1.标识符命名规范2.操作符规范3.单行注释规范4.其他规范1.标识符命名规范变量、函数的命名必须要有意义变量的名称一般用名词函数的名称一般用动词2.操作符规范操作符左右两侧各保留一个空格for (var i = 1; i <= 5; i++) { if (i == 3) { break; // 直接跳出整个for循环 } console.log('这是第' + i + '次循环');}3.单行注释规范'//'后要接一个空格，后面再写注释内容for (v

2021-11-24 15:54:31 524

原创 JavaScript 知识点一

JavaScript知识点1.初识JavaScript1.1JavaScript是什么1.2Javascript的作用1.3HTML/CSS/JS的关系1.4 浏览器执行JS简介1.5JS的组成1.6JS初体验2.JS注释1.初识JavaScript1.1JavaScript是什么一种运行在客户端的脚本语言（Srcipt是脚本的意思）脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释并执行现在也可以基于Node.js技术进行服务器端编程1.2Javascript的作用

2021-11-14 21:29:35 595

原创 CSS3的新特性

CSS3的新特性1.CSS3的现状2.CSS3新增选择器2.1属性选择器2.2结构伪类选择器2.3伪元素选择器（重点）1.CSS3的现状新增的CSS3特性有兼容性问题移动端支持优于PC端不断改进中应用相对广泛现阶段主要学习：新增选择器和盒子模型以及其他特性2.CSS3新增选择器CSS3新增了选择器，可以更加便捷、自由的选择目标元素属性选择器结构伪类选择器伪元素选择器2.1属性选择器属性选择器可以根据元素特定属性来选择元素，这样就可以不用借助于类选择器或者id选择器&lt

2021-10-31 22:42:41 596

原创 CSS课堂案例15-进度条案例

进度条案例进度条如何布局过渡的使用分析首先外面是一个大盒子，有边框，里面的盒子通过宽度的变大添加过渡，从而实现进度条的效果代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>CSS3案例-进度条</title> <style> div { width

2021-10-31 22:28:52 290

原创伪类选择器中如何使用字体图标

下面以阿里的iconfont为例前面的下载可见之前的帖子关于阿里巴巴iconfont的使用后续步骤是将font文件夹与html文件放在同一个文件夹在html文件中引入字体图标即写入这样一句代码<link rel="stylesheet" href="font/iconfont.css">要注意引入的是.css文件伪类选择器中进行调用font-family: 'iconfont;'content: '\e473'注意：要将字体图标的编码里的’&#x

2021-10-30 23:08:05 926

原创 HTML5

HTML5的新特性1.HTML5新增的语义化标签HTML5新增的特性主要是针对以前的不足，增加了一些新的标签、新的表单和新的表单属性等但是这些新特性都有兼容性问题，基本都是IE9+以上的版本的浏览器才支持1.HTML5新增的语义化标签以前的布局中，我们基本是div来做的，但是对于搜索引擎来说，div是没有语义的<div class="header> </div><div class="nav"> </div><div class="cont

2021-10-29 23:10:36 75

原创 CSS课堂案例14-三角

模拟实现京东页面上小三角分析可以划分为以下两个部分此次我们采用定位的方法，用两个块级盒子也能做，但是占据的空间会更大代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>三角制作</title> <style> * { padding: 0;

2021-10-25 21:41:56 66

原创阿里巴巴iconfont的使用方法

另一篇博客

2021-10-25 20:58:49 117

原创 CSS课堂案例13-精灵图

利用精灵图拼出自己的名字精灵图代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>利用精灵图拼出自己的名字</title> <style> * { padding: 0; margin: 0; } sp

2021-10-25 19:55:34 169

原创 CSS高级技巧

CSS高级技巧一.精灵图1.1为什么需要精灵图1.2精灵图的使用二.字体图标三.CSS三角四.CSS用户界面样式五. vertical-align属性应用六.溢出的文字省略号显示七.常见布局技巧一.精灵图1.1为什么需要精灵图一个网页图片过多时，服务器频繁地接收发送请求图片，会造成服务器请求压力过大，将大大降低页面的加载速度。css精灵图技术（也叫CSS Sprites、CSS雪碧），可以有效地减少服务器接收和发送请求地次数，提高页面的加载速度核心原理：将网页中的一些小背景图像整合到一张大图中，这

2021-10-24 22:35:09 2556

原创 CSS课堂案例12-土豆网鼠标经过显示遮罩

案例鼠标经过时，显示一个黑色半透明的遮罩目的练习元素的显示和隐藏练习元素的定位核心原理：原先半透明的黑色遮罩看不见，鼠标经过大盒子，就显示出来遮罩的盒子不占有位置，就需要用绝对定位和display配合使用代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con

2021-10-24 22:24:01 384

原创 CSS课堂案例11-淘宝焦点图布局

淘宝焦点图布局结构步骤代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>淘宝焦点图布局</title> <style> /* 初始化 */ * { margin: 0; padding: 0;

2021-10-24 20:55:11 1819

原创 CSS课堂案例10-学成在线案例

1.1准备素材和工具学成在线PSD源文件开发工具= PS(切图)+vscode(代码)+chrome(测试)1.2案例准备工作采取结构与样式相分离的思想创建study目录文件夹，用于存放整个页面的相关内容vscode打开这个目录文件夹study目录内新建images文件夹，存放图片素材新建首页文件index.html(以后首页文件同意这样命名)新建style.css文件，采用外链样式表将样式引入到HTML页面文件中样式表写入清楚内外边距的样式，用于检测样式表是否引入成功如下图所

2021-10-22 22:51:22 116

原创 CSS知识点总结3

CSS知识点总结31.CSS浮动1.1浮动1.1.1传动网页布局的三种方式1.1.2标准流(普通流/文档流)1.1.3为什么需要浮动？1.1.4什么是浮动1.1.5浮动特性（重难点）1.1.6浮动元素经常和标准流父级搭配使用1.2清除浮动1.CSS浮动1.1浮动1.1.1传动网页布局的三种方式网页布局的本质-用CSS把盒子摆在对应位置CSS提供了三种传统布局方式普通流（标准流）浮动定位注意：实际开发中，一个页面基本都包含了这三个布局方式1.1.2标准流(普通流/文档流)所谓标准流：

2021-10-21 21:42:17 97

原创 CSS课堂案例9-小米布局案例2

浮动元素经常和标准流父级搭配使用小米布局案例分析大盒子里包括了四个盒子，盒子之间的距离相等如下所示过程中出现的问题：由于每个盒子之间有距离，一开始采用的是给每个盒子设置右外边距的方法，但是第四个盒子并不需要右外边距，导致了父盒子装不下解决方法：给第四个盒子单独设置，外边距为0，考虑到权重问题，应该设置为.box .last<style> .box li { float: left; width: 29

2021-10-20 19:01:14 1380

原创 CSS课堂案例8-小米布局

浮动布局练习利用浮动初步实现页面布局的效果如图所示，可知可将改布局分成三部分，外面的大盒子作为标准流父级，约束浮动元素，内部分成左右两个浮动标签，中间无空隙<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>小米布局案例</title> <style> * {

2021-10-19 22:50:34 792

原创 CSS课堂案例7-小米产品模块

小米产品模块栏实现要求可以将整个页面划分为以下几个盒子代码实现<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>产品模块案例</title> <style> /*初始化，清除边距*/ * { margin: 0; p

2021-10-19 20:36:19 528

原创 CSS课堂案例6-快报模块列表

品优购快报模块模块可分为以下3个部分外面的大边框，品优购快报这一栏，以及下面的内容又是一部分<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devi

2021-10-19 20:28:27 159

原创 CSS综合案例5-新浪导航案例

导航栏padding 影响盒子的好处相关取值代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>CSS盒子模型综合案例</title> <style> .nav { /*盒子高度、背景颜色*/ height: 41px;

2021-10-18 21:39:55 209

原创 CSS知识点总结2

CSS知识点21.CSS元素显示模式1.1元素的显示模式1.2块元素1.3行内元素1.4行内块元素1.5元素显示模式总结1.6元素显示模式的转换1.7当行文字垂直居中的小技巧2.CSS的背景2.1背景颜色2.2背景图片2.3背景平铺2.4背景图片的位置2.5背景图片固定2.6背景复合写法2.7背景色半透明2.8背景总结3.CSS的三大特性3.1层叠性3.2继承性3.3优先性4.盒子模型4.1网页布局的本质4.2盒子模型(Box Model)的组成4.3边框(border)1.CSS元素显示模式1.1元素

2021-10-17 22:19:23 473

原创 CSS课堂案例4-五彩导航栏

五彩导航练习价值：链接属于行内元素，但此时需要宽度高度，因此需要模式转换里面文字需要水平居中和垂直居中，因此需要单行文字垂直居中的代码链接里面需要设置背景图片，因此需要用到背景的相关属性的设置鼠标经过背景图片，因此需要用到链接伪类选择器代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>CSS课堂案例-五彩导航<

2021-10-17 20:23:43 2143

原创 CSS课堂案例3-小米导航栏

简洁版小米侧边栏要求实现的效果，左侧红框部分思路分成两步：把链接a转换为块级元素，这样链接就可以单独占一行，并且可以设置高度和宽度鼠标经过a链接时，设置背景颜色代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>小米</title> <style> a {

2021-10-17 15:50:42 269

原创 CSS课堂案例2

新闻页面制作页面整体分成两步搭建HTML结构页面修改CSS样式HTML文件：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>天气预警</title> <link rel="stylesheet" href="14_2-综合案例样式.css"></head><body&g

2021-10-16 21:49:34 70

原创 CSS知识点总结1

CSS知识点1.CSS简介1.1HTML的局限性1.2CSS-网页的美容师1.3CSS语法规范1.4CSS代码风格2.CSS基础选择器2.1CSS选择器的作用2.2选择器分类2.2.1基础选择器2.2.1.1标签选择器2.1.1.2类选择器（最常用）2.1.1.3类选择器-多类名2.1.2.4id选择器2.1.2.5通配符选择器2.1.2.6基础选择器总结2.2.23.CSS字体属性3.1字体系列4.CSS文本属性5.CSS的引入方式1.CSS简介CSS的主要使用场景就是美化网页，布局页面的1.1HT

2021-10-15 22:40:49 730

原创 CSS课堂案例1

使用类选择器画盒子类选择器的使用<div></div>就是一个盒子，用来装网页内容的<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>使用类选择器画三个盒子</title> <style> /*修改class属性为red的标签的样式*/ .r

2021-10-15 22:00:39 69

原创 HTML综合案例

注册页面使用学过的HTML标签的知识，来实现一个注册页面<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sc

2021-10-15 20:47:06 112

原创 HTML知识点2

HTML知识点总结-简略1.HTML常用标签1.1表格标签（双标签）1.1.1表格的主要作用1.1.2表格的基本语法1.1.3表头单元格标签1.1.4表格属性（HTML不常用，由CSS来设置）1.1.5表格结构标签1.1.6合并单元格1.2列表标签（双标签）1.2.1列表的主要作用1.2.2列表的分类1.3表单标签1.3.1为什么需要表单1.3.2表单的组成1.3.2.1表单域(双标签)1.3.2.2表单元素（单标签）1.HTML常用标签1.1表格标签（双标签）表格是实际开发中非常常用的标签1.1.

2021-10-15 20:10:17 115

原创 HTML课堂案例2

表格制作<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl

2021-10-14 21:49:38 153

原创 HTML课堂案例1

体育新闻利用标题标签，段落标签、换行标签实现效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0

2021-10-14 19:27:09 223

原创 HTML知识点1

HTML知识点总结-简略1.网页1.1 什么是网页1.2 什么是HTML1.3 网页的形成2.Web标准2.1 为什么需要Web标准2.2 Web标准的构成3.HTML语法规范3.1基本语法概述3.2标签关系4.HTML基本结构标签4.1第一个HTML页面1.网页1.1 什么是网页网站是在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容的网页集合网页是网站的一“页”，通常是HTML格式的文件，通过浏览器来阅读网页是构成网站的基本元素，通常由图片、文字、链接等元素构成。我们看到的网页，常

2021-10-14 19:16:50 132

一只小白657的博客