搜索到
53
篇与
的结果
-
JavaScript基础 1 - 编程语言1.1 编程 编程： 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。 计算机程序： 就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。 1.2 计算机语言 计算机语言指用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介。 计算机语言的种类非常的多，总的来说可以分成机器语言，汇编语言和高级语言三大类。 实际上计算机最终所执行的都是 机器语言，它是由“0”和“1”组成的二进制数，二进制是计算机语言的基础。 1.3 编程语言编程语言： 可以通过类似于人类语言的“语言”来控制计算机，让计算机为我们做事情，这样的语言就叫做编程语言（Programming Language）。编程语言是用来控制计算机的一系列指令，它有固定的格式和词汇（不同编程语言的格式和词汇不一样），必须遵守。如今通用的编程语言有两种形式：汇编语言和高级语言。 语言类型 说明 汇编语言 汇编语言和机器语言实质是相同的，都是直接对硬件操作，只不过指令采用了英文缩写的标识符，容易识别和记忆。 高级语言 高级语言主要是相对于低级语言而言，它并不是特指某一种具体的语言，而是包括了很多编程语言，常用的有C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言、Objective-C、Swift等。 1.4 翻译器 高级语言所编制的程序不能直接被计算机识别，必须经过转换才能被执行，为此，我们需要一个翻译器。翻译器可以将我们所编写的源代码转换为机器语言，这也被称为二进制化。 1.5 编程语言和标记语言区别 语言 说明 编程语言 编程语言有很强的逻辑和行为能力。在编程语言里, 你会看到很多 if else 、for 、while等具有逻辑性和行为能力的指令，这是主动的。 标记语言 标记语言（html）不用于向计算机发出指令，常用于格式化和链接。标记语言的存在是用来被读取的, 他是被动的。 总结 计算机可以帮助人类解决某些问题 程序员利用编程语言编写程序发出指令控制计算机来实现这些任务 编程语言有机器语言、汇编语言、高级语言 高级语言需要一个翻译器转换为计算机识别的机器语言 编程语言是主动的有很强的逻辑性 2 - 计算机基础2.1 计算机组成2.2 数据存储 计算机内部使用二进制 0 和 1来表示数据。 所有数据，包括文件、图片等最终都是以二进制数据（0 和 1）的形式存放在硬盘中的。 所有程序，包括操作系统，本质都是各种数据，也以二进制数据的形式存放在硬盘中。平时我们所说的安装软件，其实就是把程序文件复制到硬盘中。 硬盘、内存都是保存的二进制数据。 2.3 数据存储单位大小关系：bit < byte < kb < GB < TB<..... 位(bit)： 1bit 可以保存一个 0 或者 1 （最小的存储单位） 字节(Byte)：1B = 8b 千字节(KB)：1KB = 1024B 兆字节(MB)：1MB = 1024KB 吉字节(GB): 1GB = 1024MB 太字节(TB): 1TB = 1024GB 2.4 程序运行计算机运行软件的过程： 1. 打开某个程序时，先从硬盘中把程序的代码加载到内存中 2. CPU执行内存中的代码 注意：之所以要内存的一个重要原因，是因为 cpu运行太快了，如果只从硬盘中读数据，会浪费cpu性能，所以，才使用存取速度更快的内存来保存运行时的数据。（内存是电，硬盘是机械） 3 - 初始JavaScript3.1 JavaScript 是什么 JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 3.2 JavaScript的作用 表单动态校验（密码强度检测） （ JS 产生最初的目的 ） 网页特效 服务端开发(Node.js) 桌面程序(Electron) App(Cordova) 控制硬件-物联网(Ruff) 游戏开发(cocos2d-js) 3.3 HTML/CSS/JS 的关系3.4 浏览器执行 JS 简介浏览器分成两部分：渲染引擎和 JS 引擎 浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。 3.5 JS 的组成 ECMAScript ECMAScript 是由ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。 ECMAScript：规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。更多参看MDN: MDN手册 DOM——文档对象模型 文档对象模型（DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等） BOM——浏览器对象模型 浏览器对象模型(Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。 3.6 JS 初体验JS 有3种书写位置，分别为行内、内嵌和外部。 行内式 <input type="button" value="点我试试" onclick="alert('Hello World')" /> 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick 注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号 可读性差， 在html中编写JS大量代码时，不方便阅读； 引号易错，引号多层嵌套匹配时，非常容易弄混； 特殊情况下使用 内嵌式<script> alert('Hello World~!'); </script> 可以将多行JS代码写到 script 标签中 内嵌 JS 是学习时常用的方式 外部JS文件<script src="my.js"></script> 利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用 引用外部 JS文件的 script 标签中间不可以写代码 适合于JS 代码量比较大的情况 4 - JavaScript注释4.1 单行注释为了提高代码的可读性，JS与CSS一样，也提供了注释功能。 JS中的注释主要有两种，分别是 单行注释 和 多行注释。 单行注释的注释方式如下：// 我是一行文字，不想被 JS引擎 执行，所以 注释起来 // 用来注释单行文字（ 快捷键 ctrl + / ） 4.2 多行注释多行注释的注释方式如下：/* 获取用户年龄和姓名 并通过提示框显示出来 */ /* */ 用来注释多行文字（ 默认快捷键 alt + shift + a ） 快捷键修改为： ctrl + shift + /vscode → 首选项按钮 → 键盘快捷方式 → 查找 原来的快捷键 → 修改为新的快捷键 → 回车确认5 - JavaScript输入输出语句为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下： 方法 说明 归属 alert(msg) 浏览器弹出警示框 浏览器 console.log(msg) 浏览器控制台打印输出信息 浏览器 prompt(info) 浏览器弹出输入框，用户可以输入 浏览器 注意：alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息。 6 - 变量的概念6.1 什么是变量白话：变量就是一个装东西的盒子。通俗：变量是用于存放数据的容器。 我们通过 变量名 获取数据，甚至数据可以修改。6.2 变量在内存中的存储 本质：变量是程序在内存中申请的一块用来存放数据的空间。类似我们酒店的房间，一个房间就可以看做是一个变量。 7 - 变量的使用 变量的声明 变量的赋值 7.1 声明变量// 声明变量 var age; // 声明一个 名称为age 的变量 var 是一个 JS关键字，用来声明变量( variable 变量的意思 )。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管 age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间 7.2 赋值age = 10; // 给 age 这个变量赋值为 10 = 用来把右边的值赋给左边的变量空间中 此处代表赋值的意思 变量值是程序员保存到变量空间里的值 7.3 变量的初始化var age = 18; // 声明变量同时赋值为 18 // 声明一个变量并赋值， 我们称之为变量的初始化。 7.4 变量语法扩展 更新变量 一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。var age = 18; age = 81; // 最后的结果就是81因为18 被覆盖掉了 同时声明多个变量 同时声明多个变量时，只需要写一个 var， 多个变量名之间使用英文逗号隔开。var age = 10, name = 'zs', sex = 2; 声明变量特殊情况 情况 说明 结果 var age ; console.log (age); 只声明 不赋值 undefined console.log(age) 不声明 不赋值 直接使用 报错 age = 10; console.log (age); 不声明 只赋值 10 7.5 变量命名规范规则： 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name 严格区分大小写。var app; 和 var App; 是两个变量 不能 以数字开头。 18age 是错误的 不能 是关键字、保留字。例如：var、for、while 变量名必须有意义。 MMD BBD nl → age 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName 推荐翻译网站： 有道 爱词霸8 - 数据类型8.1 数据类型简介 为什么需要数据类型 在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。简单来说，数据类型就是数据的类别型号。比如姓名“张三”，年龄18，这些数据的类型是不一样的。 变量的数据类型 变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定：var age = 10; // 这是一个数字型 var areYouOk = '是的'; // 这是一个字符串 在代码运行时，变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断 的，运行完毕之后， 变量就确定了数据类型。JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型： var x = 6; // x 为数字var x = "Bill"; // x 为字符串 数据类型的分类JS 把数据类型分为两类： 简单数据类型 （Number,String,Boolean,Undefined,Null） 复杂数据类型 （object) 8.2 简单数据类型简单数据类型（基本数据类型）JavaScript 中的简单数据类型及其说明如下： 数字型 Number JavaScript 数字类型既可以保存整数，也可以保存小数(浮点数）。var age = 21; // 整数 var Age = 21.3747; // 小数 数字型进制最常见的进制有二进制、八进制、十进制、十六进制。 // 1.八进制数字序列范围：0~7 var num1 = 07; // 对应十进制的7 var num2 = 019; // 对应十进制的19 var num3 = 08; // 对应十进制的8 // 2.十六进制数字序列范围：0~9以及A~F var num = 0xA; 现阶段我们只需要记住，在JS中八进制前面加0，十六进制前面加 0x 数字型范围JavaScript中数值的最大和最小值 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308 最小值：Number.MIN_VALUE，这个值为：5e-32 数字型三个特殊值 Infinity ，代表无穷大，大于任何数值 -Infinity ，代表无穷小，小于任何数值 NaN ，Not a number，代表一个非数值 isNaN用来判断一个变量是否为非数字的类型，返回 true 或者 false var usrAge = 21; var isOk = isNaN(userAge); console.log(isNum); // false ，21 不是一个非数字 var usrName = "andy"; console.log(isNaN(userName));// true ，"andy"是一个非数字 字符串型 String 字符串型可以是引号中的任意文本，其语法为 双引号 "" 和 单引号''var strMsg = "我爱北京天安门~"; // 使用双引号表示字符串 var strMsg2 = '我爱吃猪蹄~'; // 使用单引号表示字符串 // 常见错误 var strMsg3 = 我爱大肘子; // 报错，没使用引号，会被认为是js代码，但js没有这些语法 因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。 字符串引号嵌套 JS 可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双)var strMsg = '我是"高帅富"程序猿'; // 可以用''包含"" var strMsg2 = "我是'高帅富'程序猿"; // 也可以用"" 包含'' // 常见错误 var badQuotes = 'What on earth?"; // 报错，不能 单双引号搭配 字符串转义符 类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。 转义符都是 \ 开头的，常用的转义符及其说明如下： 转义符 解释说明 \n 换行符，n 是 newline 的意思 \ \ 斜杠 \ ' ' 单引号 " ”双引号 \t tab 缩进 \b 空格 ，b 是 blank 的意思 字符串长度 字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。var strMsg = "我是帅气多金的程序猿！"; alert(strMsg.length); // 显示 11 字符串拼接 多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串//1.1 字符串 "相加" alert('hello' + ' ' + 'world'); // hello world //1.2 数值字符串 "相加" alert('100' + '100'); // 100100 //1.3 数值字符串 + 数值 alert('11' + 12); // 1112 + 号总结口诀：数值相加 ，字符相连 字符串拼接加强console.log('pink老师' + 18); // 只要有字符就会相连 var age = 18; console.log('pink老师age岁啦'); // 这样不行哦 console.log('pink老师' + age); // pink老师18 console.log('pink老师' + age + '岁啦'); // pink老师18岁啦 经常会将字符串和变量来拼接，变量可以很方便地修改里面的值 变量是不能添加引号的，因为加引号的变量会变成字符串 如果变量两侧都有字符串拼接，口诀“引引加加 ”，删掉数字，变量写加中间 布尔型Boolean 布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。 布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。console.log(true + 1); // 2 console.log(false + 1); // 1 Undefined和 Null 一个声明后没有被赋值的变量会有一个默认值undefined ( 如果进行相连或者相加时，注意结果）var variable; console.log(variable); // undefined console.log('你好' + variable); // 你好undefined console.log(11 + variable); // NaN console.log(true + variable); // NaN 一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)var vari = null; console.log('你好' + vari); // 你好null console.log(11 + vari); // 11 console.log(true + vari); // 1 8.3 获取变量数据类型 获取检测变量的数据类型 typeof 可用来获取检测变量的数据类型var num = 18; console.log(typeof num) // 结果 number 不同类型的返回值 字面量 字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。 数字字面量：8, 9, 10 字符串字面量：'黑马程序员', "大前端" 布尔字面量：true，false 8.4 数据类型转换 什么是数据类型转换？ 使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另一种数据类型，通常会实现3种方式的转换：转换为字符串类型 转换为数字型 转换为布尔型 转换为字符串 toString() 和 String() 使用方式不一样。 三种转换方式，更多第三种加号拼接字符串转换方式， 这一种方式也称之为隐式转换。 转换为数字型（重点） 注意 parseInt 和 parseFloat 单词的大小写，这2个是重点 隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型 转换为布尔型 代表空、否定的值会被转换为 false ，如 ''、0、NaN、null、undefined 其余值都会被转换为 trueconsole.log(Boolean('')); // false console.log(Boolean(0)); // false console.log(Boolean(NaN)); // false console.log(Boolean(null)); // false console.log(Boolean(undefined)); // false console.log(Boolean('小白')); // true console.log(Boolean(12)); // true 9 - 解释型语言和编译型语言9.1 概述计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。 翻译器翻译的方式有两种：一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同 编译器是在代码执行之前进行编译，生成中间代码文件 解释器是在运行时进行及时解释，并立即执行(当编译器以解释方式运行的时候，也称之为解释器) 9.2 执行过程类似于请客吃饭： 编译语言：首先把所有菜做好，才能上桌吃饭 解释语言：好比吃火锅，边吃边涮，同时进行 10 - 关键字和保留字10.1 标识符标识(zhi)符：就是指开发人员为变量、属性、函数、参数取的名字。 标识符不能是关键字或保留字。 10.2 关键字关键字：是指 JS本身已经使用了的字，不能再用它们充当变量名、方法名。 包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。 10.3 保留字保留字：实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。 包括：boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等。 注意：如果将保留字用作变量名或函数名，那么除非将来的浏览器实现了该保留字，否则很可能收不到任何错误消息。当浏览器将其实现后，该单词将被看做关键字，如此将出现关键字错误。 -
代码规范 1. 概述欢迎使用品优购代码规范， 这个是我借鉴京东前端代码规范，组织的品优购内部规范。旨在增强团队开发协作、提高代码质量和打造开发基石的编码规范，以下规范是团队基本约定的内容，必须严格遵循。HTML规范基于 W3C、苹果开发者 等官方文档，并结合团队业务和开发过程中总结的规范约定，让页面HTML代码更具语义性。图片规范了解各种图片格式特性，根据特性制定图片规范，包括但不限于图片的质量约定、图片引入方式、图片合并处理等，旨在从图片层面优化页面性能。CSS规范统一规范团队 CSS 代码书写风格和使用 CSS 预编译语言语法风格，提供常用媒体查询语句和浏览器私有属性引用，并从业务层面统一规范常用模块的引用。命名规范从 目录、图片、HTML/CSS文件、ClassName 的命名等层面约定规范团队的命名习惯，增强团队代码的可读性。2. HTML 规范DOCTYPE 声明HTML文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明：<!DOCTYPE html> HTML5标准模版<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>HTML5标准模版</title> </head> <body> </body> </html> 页面语言lang推荐使用属性值 cmn-Hans-CN（简体, 中国大陆），但是考虑浏览器和操作系统的兼容性，目前仍然使用 zh-CN 属性值<html lang="zh-CN"> 更多地区语言参考：zh-SG 中文 (简体, 新加坡) 对应 cmn-Hans-SG 普通话 (简体, 新加坡) zh-HK 中文 (繁体, 香港) 对应 cmn-Hant-HK 普通话 (繁体, 香港) zh-MO 中文 (繁体, 澳门) 对应 cmn-Hant-MO 普通话 (繁体, 澳门) zh-TW 中文 (繁体, 台湾) 对应 cmn-Hant-TW 普通话 (繁体, 台湾) charset 字符集合一般情况下统一使用 “UTF-8” 编码<meta charset="UTF-8"> 由于历史原因，有些业务可能会使用 “GBK” 编码<meta charset="GBK"> 请尽量统一写成标准的 “UTF-8”，不要写成 “utf-8” 或 “utf8” 或 “UTF8”。根据 IETF对UTF-8的定义，其编码标准的写法是 “UTF-8”；而 UTF8 或 utf8 的写法只是出现在某些编程系统中，如 .NET framework 的类 System.Text.Encoding 中的一个属性名就叫 UTF8。书写风格HTML代码大小写HTML标签名、类名、标签属性和大部分属性值统一用小写推荐：<div class="demo"></div> 不推荐：<div class="DEMO"></div> <DIV CLASS="DEMO"></DIV> 类型属性不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含推荐：<link rel="stylesheet" href="" > <script src=""></script> 不推荐：<link rel="stylesheet" type="text/css" href="" > <script type="text/javascript" src="" ></script> 元素属性 元素属性值使用双引号语法 元素属性值可以写上的都写上 推荐：<input type="text"> <input type="radio" name="name" checked="checked" > 不推荐：<input type=text> <input type='text'> <input type="radio" name="name" checked > 特殊字符引用文本可以和字符引用混合出现。这种方法可以用来转义在文本中不能合法出现的字符。在 HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体推荐：<a href="#">more>></a> 不推荐：<a href="#">more>></a> 代码缩进统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）<div class="jdc"> <a href="#"></a> </div> 代码嵌套元素嵌套规范，每个块状元素独立一行，内联元素可选推荐：<div> <h1></h1> <p></p> </div> <p><span></span><span></span></p> 不推荐：<div> <h1></h1><p></p> </div> <p> <span></span> <span></span> </p> 段落元素与标题元素只能嵌套内联元素推荐：<h1><span></span></h1> <p><span></span><span></span></p> 不推荐：<h1><div></div></h1> <p><div></div><div></div></p> 3. 图片规范内容图内容图多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大 优先考虑 JPEG 格式，条件允许的话优先考虑 WebP 格式 尽量不使用PNG格式，PNG8 色位太低，PNG24 压缩率低，文件体积大 PC平台单张的图片的大小不应大于 200KB。 背景图背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片 PNG 与 GIF 格式，优先考虑使用 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩率 图像颜色比较简单的，如纯色块线条图标，优先考虑使用 PNG8 格式，避免不使用 JPEG 格式 图像颜色丰富而且图片文件不太大的（40KB 以下）或有半透明效果的优先考虑 PNG24 格式 图像颜色丰富而且文件比较大的（40KB - 200KB）优先考虑 JPEG 格式 条件允许的，优先考虑 WebP 代替 PNG 和 JPEG 格式 4. CSS规范代码格式化样式书写一般有两种：一种是紧凑格式 (Compact).jdc{ display: block;width: 50px;} 一种是展开格式（Expanded）.jdc { display: block; width: 50px; } 团队约定统一使用展开格式书写样式代码大小写样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。/* 推荐 */ .jdc{ display:block; } /* 不推荐 */ .JDC{ DISPLAY:BLOCK; } 选择器 尽量少用通用选择器 * 不使用 ID 选择器 不使用无具体语义定义的标签选择器 /* 推荐 */ .jdc {} .jdc li {} .jdc li p{} /* 不推荐 */ *{} #jdc {} .jdc div{} 代码缩进统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）.jdc { width: 100%; height: 100%; } 分号每个属性声明末尾都要加分号；.jdc { width: 100%; height: 100%; } 代码易读性左括号与类名之间一个空格，冒号与属性值之间一个空格推荐：.jdc { width: 100%; } 不推荐：.jdc{ width:100%; } 逗号分隔的取值，逗号之后一个空格推荐：.jdc { box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc; } 不推荐：.jdc { box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc; } 为单个css选择器或新申明开启新行推荐：.jdc, .jdc_logo, .jdc_hd { color: #ff0; } .nav{ color: #fff; } 不推荐：.jdc,jdc_logo,.jdc_hd { color: #ff0; }.nav{ color: #fff; } 颜色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要带有不必要的 0推荐：.jdc { color: rgba(255,255,255,.5); } 不推荐：.jdc { color: rgba( 255, 255, 255, 0.5 ); } 属性值十六进制数值能用简写的尽量用简写推荐：.jdc { color: #fff; } 不推荐：.jdc { color: #ffffff; } 不要为 0 指明单位推荐：.jdc { margin: 0 10px; } 不推荐：.jdc { margin: 0px 10px; } 属性值引号css属性值需要用到引号时，统一使用单引号/* 推荐 */ .jdc { font-family: 'Hiragino Sans GB'; } /* 不推荐 */ .jdc { font-family: "Hiragino Sans GB"; } 属性书写顺序建议遵循以下顺序： 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式） 自身属性：width / height / margin / padding / border / background 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient … .jdc { display: block; position: relative; float: left; width: 100px; height: 100px; margin: 0 10px; padding: 20px 0; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #333; background: rgba(0,0,0,.5); -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } mozilla官方属性顺序推荐命名规范由历史原因及个人习惯引起的 DOM 结构、命名不统一，导致不同成员在维护同一页面时，效率低下，迭代、维护成本极高。目录命名 项目文件夹：shoping 样式文件夹：css 脚本文件夹：js 样式类图片文件夹：img 产品类图片文件夹： upload 字体类文件夹： fonts ClassName命名ClassName的命名应该尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线 “_” 连接.nav_top常用命名推荐注意：ad、banner、gg、guanggao 等有机会和广告挂勾的不建议直接用来做ClassName，因为有些浏览器插件（Chrome的广告拦截插件等）会直接过滤这些类名，因此<div class="ad"></div> 这种广告的英文或拼音类名不应该出现另外，敏感不和谐字眼也不应该出现，如：<div class="fuck"></div> <div class="jer"></div> <div class="sm"></div> <div class="gcd"></div> <div class="ass"></div> <div class="KMT"></div> ... ClassName 含义 about 关于 account 账户 arrow 箭头图标 article 文章 aside 边栏 audio 音频 avatar 头像 bg,background 背景 bar 栏（工具类） branding 品牌化 crumb,breadcrumbs 面包屑 btn,button 按钮 caption 标题，说明 category 分类 chart 图表 clearfix 清除浮动 close 关闭 col,column 列 comment 评论 community 社区 container 容器 content 内容 copyright 版权 current 当前态，选中态 default 默认 description 描述 details 细节 disabled 不可用 entry 文章，博文 error 错误 even 偶数，常用于多行列表或表格中 fail 失败（提示） feature 专题 fewer 收起 field 用于表单的输入区域 figure 图 filter 筛选 first 第一个，常用于列表中 footer 页脚 forum 论坛 gallery 画廊 group 模块，清除浮动 header 页头 help 帮助 hide 隐藏 hightlight 高亮 home 主页 icon 图标 info,information 信息 last 最后一个，常用于列表中 links 链接 login 登录 logout 退出 logo 标志 main 主体 menu 菜单 meta 作者、更新时间等信息栏，一般位于标题之下 module 模块 more 更多（展开） msg,message 消息 nav,navigation 导航 next 下一页 nub 小块 odd 奇数，常用于多行列表或表格中 off 鼠标离开 on 鼠标移过 output 输出 pagination 分页 pop,popup 弹窗 preview 预览 previous 上一页 primary 主要 progress 进度条 promotion 促销 rcommd,recommendations 推荐 reg,register 注册 save 保存 search 搜索 secondary 次要 section 区块 selected 已选 share 分享 show 显示 sidebar 边栏，侧栏 slide 幻灯片，图片切换 sort 排序 sub 次级的，子级的 submit 提交 subscribe 订阅 subtitle 副标题 success 成功（提示） summary 摘要 tab 标签页 table 表格 txt,text 文本 thumbnail 缩略图 time 时间 tips 提示 title 标题 video 视频 wrap 容器，包，一般用于最外层 wrapper 容器，包，一般用于最外层
-
品优购项目-下 目标 能够写出列表页 能够写出注册页 能够把品优购网站部署到本地服务器 能够把品优购网站上传到远程服务器 品优购项目首页制作main 主体模块制作以前书写的就是模块化中的公共部分。main 主体模块是 index 里面专有的，注意需要新的样式文件 index.css main 盒子宽度为 980 像素，高度是455像素，位置距离左边 220px (margin-left ) ，给高度就不用清除浮动 main 里面包含左侧盒子，宽度为 721像素，左浮动，focus 焦点图模块 main 里面包含右侧盒子，宽度为 250像素，右浮动，newsflash 新闻快报模块结构代码<div class="w"> <div class="main"> <div class="focus"> ... </div> <div class="newsflash"> ... </div> </div> </div> 样式代码.main { width: 980px; height: 455px; margin-left: 220px; margin-top: 10px; } .focus { float: left; width: 721px; height: 455px; background-color: purple; } .newsflash { float: right; width: 250px; height: 455px; } 左侧 focus 模块制作 大的 focus 盒子 包裹 1 号展示图片的盒子，2号 3号 左右箭头的盒子，4号 小圆点的盒子<div class="focus fl"> <a href="#" class="arrow-l"> < </a> <a href="#" class="arrow-r"> > </a> <ul> <li> <a href="#"><img src="upload/focus.jpg" alt=""></a> </li> </ul> <ol class="circle"> <li></li> <li class="current"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> </div> 包裹 1 号盒子（ul > li > a > img），轮播图这样的布局是为了后面方便配置js逻辑代码 2 号盒子 跟 3 号盒子 左右箭头，利用定位的方式来实现样式代码.arrow-l, .arrow-r { position: absolute; top: 50%; margin-top: -20px; width: 24px; height: 40px; background: rgba(0, 0, 0, .3); text-align: center; line-height: 40px; color: #fff; font-family: 'icomoon'; font-size: 18px; } .arrow-r { right: 0; } 4 号盒子 里面放 小圆点 （ol > li） 小圆圈利用边框实现 小圆点里面背景颜色来实现 样式代码.circle { position: absolute; bottom: 10px; left: 50px; } .circle li { float: left; width: 8px; height: 8px; /*background-color: #fff;*/ border: 2px solid rgba(255, 255, 255, 0.5); margin: 0 3px; border-radius: 50%; /*鼠标经过显示小手*/ cursor: pointer; } .current { background-color: #fff; box-shadow: } 右侧 newsflash 模块制作 右侧的模块 分为上中下三个盒子结构代码<div class="newsflash"> <div class="news"> ... </div> <div class="lifeservice"> ... </div> <div class="bargain"> ... </div> </div> 1 号盒子为 news 新闻模块 高度为 165px 分为上下两个结构，但是两个模块都用 div，上面是 news-hd，下面是 news-bd结构代码<div class="news"> <div class="news-hd"> ... </div> <div class="news-bd"> ... </div> </div> 样式代码.news { height: 165px; border: 1px solid #e4e4e4; } 上面是news-hd，设置高度是 33px，设置下边框 里面放一个h5 标题 放一个a标签，内容是 更多，然后让 a 进行右浮动，三角用伪元素设置字体图标就好 结构代码<div class="news-hd"> <h5>品优购快报</h5> <a href="#" class="more">更多</a> </div> 样式代码.news-hd { height: 33px; line-height: 33px; border-bottom: 1px dotted #e4e4e4; padding: 0 15px; } .news-hd h5 { float: left; font-size: 14px; } .news-hd .more { float: right; } .news-hd .more::after { font-family: 'icomoon'; content: '\e920'; } 下面是news-bd 里面包含 ul 和 li 还有链接 给li设置高度，24px，设置单行文字溢出省略： 1. 设置 overflow: hidden; 2.设置 white-space: nowrap; 3. 设置 text-overflow: ellipsis; 结构代码<div class="news-bd"> <ul> <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了, 它是谁？</a></li> <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了</a></li> <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了</a></li> <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了</a></li> <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了, 它是谁？</a></li> </ul> </div> 样式代码.news-bd { padding: 5px 15px 0; } .news-bd ul li { height: 24px; line-height: 24px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 2 号盒子为 lifeservice 生活服务模块 高度为 209px 设置边框（左右下 边框） 里面的内容 是 ul > 12*li，给li设置宽 63px，高71px，设置 右边和下边的边框，设置浮动 这样设置后，第四个li会装不开，掉下来，解决办法如下 lifeservice 盒子宽度为 250 ，但是装不开里面的 4 个小 li 可以让 lifeservice 里面的 ul 宽度为 252，就可以装的下 4 个 小 li lifeservice 盒子 overflow 隐藏多余的部分就可以了 在 li 里面放一个 i（里面放图标），下面的文本用 p 标签包裹 给 i 设置 24px宽和28px的高（注意 i 是行内元素， 转成行内块），给 li 设置 text-align:center 让里面内容居中显示 结构代码<div class="lifeservice"> <ul> <li> <i></i> <p>话费</p> </li> <li> <i></i> <p>话费</p> </li> <li> <i></i> <p>话费</p> </li> <li> <i></i> <p>话费</p> </li> <li> <i></i> <p>话费</p> </li> <li> <i></i> <p>话费</p> </li> <li> <i></i> <p>话费</p> </li> <li> <i></i> <p>话费</p> </li> <li> <i></i> <p>话费</p> </li> <li> <i></i> <p>话费</p> </li> <li> <i></i> <p>话费</p> </li> <li> <i></i> <p>话费</p> </li> </ul> </div> 样式代码.lifeservice { overflow: hidden; height: 209px; /* background-color: purple; */ border: 1px solid #e4e4e4; border-top: 0; } .lifeservice ul { width: 252px; } .lifeservice ul li { float: left; width: 63px; height: 71px; border-right: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; text-align: center; } .lifeservice ul li i { display: inline-block; width: 24px; height: 28px; background-color: pink; margin-top: 12px; background: url(../images/icons.png) no-repeat -19px -15px; } 3 号盒子为 bargain 特价商品 这个比较简单，直接插入一张图片即可 结构代码<div class="bargain"> <img src="upload/bargain.png" alt=""> </div> 样式代码.bargain { margin-top: 5px; } 推荐模块制作 -- recom 大盒子 recom 推荐模块 recommend 给这个 recom 大盒子 设置版心，设置 163px的高，背景颜色（#ebebeb），设置距离上边 12px 结构代码<div class="w recom"> ... </div> 样式代码.recom { height: 163px; background-color: #ebebeb; margin-top: 12px; } 里面包含 2 个盒子， 浮动即可结构代码 <div class="w recom"> <div class="recom_hd"> ... </div> <div class="recom_bd"> ... </div> </div> 1 号盒子 recom_hd 设置宽度205px，高度163px 里面放一个img标签，插入图片即可 结构代码<div class="recom_hd"> <img src="https://www.wangmanyuan.com/usr/uploads/wmy/2022/05/02/recom.png" alt=""> </div> 样式代码.recom_hd { float: left; height: 163px; width: 205px; background-color: #5c5251; text-align: center; padding-top: 30px; } 2 号盒子 recom_bd ，注意里面的小竖线 右侧结构里面放 ul 包含 4个 li，每个li里面包含一个img 直接利用切片工具把里面的内容当成一张图片 给 li 设置浮动 给 img 设置宽高，宽度 248px，高度 163px 小竖线利用伪元素来实现，给每一个li设置一个 after 伪元素，然后给这个伪元素设置绝对定位，设置top 10px，给li设置相对定位（注意，最后一个li不用设置伪元素），可以利用 nth-child(-n+3){...} 结构代码<div class="recom_bd"> <ul> <li><img src="upload/recom_03.jpg" alt=""></li> <li><img src="upload/recom_03.jpg" alt=""></li> <li><img src="upload/recom_03.jpg" alt=""></li> <li><img src="upload/recom_03.jpg" alt=""></li> </ul> </div> 样式代码.recom_bd { float: left; } .recom_bd ul li { position: relative; float: left; } .recom_bd ul li img { width: 248px; height: 163px; } .recom_bd ul li:nth-child(-n+3)::after { content: ''; position: absolute; right: 0; top: 10px; width: 1px; height: 145px; background-color: #ddd; } 家用电器模块注意这个 floor ，不要给高度，内容有多少，算多少第一楼是家用电器模块： 里面包含两个盒子box_hd 制作 1 号盒子 box_hd，给一个高度，有个下边框，里面分为左右 2 个盒子 box_hd 给 30px 的高度，2个像素的下边框 里面放一个左侧 h3 的盒子，右侧一个div盒子，div盒子里面放 ul > li > a 左侧盒左浮动，右侧盒子右浮动 a标签之间的距离用左右的padding撑开即可 结构代码<div class="box_hd"> <h3>家用电器</h3> <div class="tab_list"> <ul> <li> <a href="#" class="style_red">热门</a>|</li> <li><a href="#">大家电</a>|</li> <li><a href="#">生活电器</a>|</li> <li><a href="#">厨房电器</a>|</li> <li><a href="#">生活电器</a>|</li> <li><a href="#">个护健康</a>|</li> <li><a href="#">应季电器</a>|</li> <li><a href="#">空气/净水</a>|</li> <li><a href="#">新奇特</a>|</li> <li><a href="#"> 高端电器</a></li> </ul> </div> </div> 样式代码.box_hd { height: 30px; border-bottom: 2px solid #c81623; } .box_hd h3 { float: left; font-size: 18px; color: #c81623; font-weight: 400; } .tab_list { float: right; line-height: 30px; } .tab_list ul li { float: left; } .tab_list ul li a { margin: 0 15px; } box_bd 制作 2 号盒子 box_bd，不要给高度 box_bd 属于是tab栏的内容区域，所以在这个里面先嵌套一个盒子 tab_content，在tab_content 里面包裹tab选项卡对应的内容 内容被一个大盒子包裹（tab_list_item），里面是 ul 包裹 5个 li，每个li设置对应的宽度，然后设置浮动 而这5个li的宽度是不一致的，在这里我们的做法是 先把宽度的样式列出来，然后给对应的li设置 第一个小 li 分为上下结构，上面是 ul 包裹 li ，li里面包裹 a，下面插入一张图片 上面的li设置宽高，设置浮动，这样就排列下来了 后面的小 li 里面先放一个a标签，然后在a标签里面插入图片即可 结构代码<div class="box_bd"> <div class="tab_content"> <div class="tab_list_item"> <div class="col_210"> <ul> <li><a href="#">节能补贴</a></li> <li><a href="#">节能补贴</a></li> <li><a href="#">节能补贴</a></li> <li><a href="#">节能补贴</a></li> <li><a href="#">节能补贴</a></li> <li><a href="#">节能补贴</a></li> </ul> <a href="#"> <img src="upload/floor-1-1.png" alt=""> </a> </div> <div class="col_329"> <a href="#"> <img src="upload/floor-1-b01.png" alt=""> </a> </div> <div class="col_221"> <a href="#" class="bb"> <img src="upload/floor-1-2.png" alt=""></a> <a href="#"> <img src="upload/floor-1-3.png" alt=""></a> </div> <div class="col_221"> <a href="#"> <img src="upload/floor-1-4.png" alt=""></a> </div> <div class="col_219"> <a href="#" class="bb"> <img src="upload/floor-1-5.png" alt=""></a> <a href="#"> <img src="upload/floor-1-6.png" alt=""></a> </div> </div> </div> </div> 样式代码.box_bd { height: 361px; } .tab_list_item>div { float: left; height: 361px; } .col_210 { width: 210px; background-color: #f9f9f9; text-align: center; } .col_210 ul li { float: left; width: 85px; height: 34px; border-bottom: 1px solid #ccc; text-align: center; line-height: 33px; margin-right: 10px; } .col_210 ul { padding-left: 12px; } .col_329 { width: 329px; } .col_221 { width: 221px; border-right: 1px solid #ccc; } .col_219 { width: 219px; } .bb { /* 一般情况下，a如果包含有宽度的盒子，a需要转为块级元素 */ display: block; border-bottom: 1px solid #ccc; } tab栏切换需求 tab栏的布局是 ul > li > a 有多少个tab选项卡，那么对应就有多少个内容 但是每一次只会显示一个内容块，其他内容进行的隐藏 等后面我们学习了js之后，我们就会配合js来实现，tab栏的切换 列表制作（★★★）品优购列表页制作准备工作 列表页面是新的页面，我们需要新建页面文件 list.html 因为列表页的头部和底部基本一致，所以我们需要把首页中的头部和底部的结构复制过来 头部和底部的样式也需要，因此 list.html 中还需要引入 common.css 需要新的 list.css 样式文件，这是列表页专门的样式文件 列表页 header 和 nav 修改 秒杀盒子 sk（ second kill ） 定位即可 结构代码<header class="header w"> <!-- logo模块 --> ... <!-- 列表页的秒杀模块 --> <div class="sk"> <img src="images/sk.png" alt=""> </div> <!-- search搜索模块 --> ... <!-- hotwords模块制作 --> ... <!-- 购物车模块 --> ... </header> 样式代码.sk { position: absolute; left: 190px; top: 40px; border-left: 1px solid #c81523; padding: 3px 0 0 14px; } 1 号盒子左侧浮动 sk_list 里面包含 ul 和 li 2 号盒子左侧浮动 sk_con 里面包含 ul 和 li 结构代码<!-- nav模块制作 start --> <nav class="nav"> <div class="w"> <div class="sk_list"> <ul> <li><a href="#">品优秒杀</a></li> <li><a href="#">品优秒杀</a></li> <li><a href="#">品优秒杀</a></li> </ul> </div> <div class="sk_con"> <ul> <li><a href="#">女装</a></li> <li><a href="#" class="style_red">女鞋</a></li> <li><a href="#">女装</a></li> <li><a href="#">女装</a></li> <li><a href="#">女装</a></li> <li><a href="#">女装</a></li> <li><a href="#">女装</a></li> <li><a href="#">女装</a></li> <li><a href="#">更多分类</a></li> </ul> </div> </div> </nav> 样式代码.sk_list { float: left; } .sk_list ul li { float: left; } .sk_list ul li a { display: block; line-height: 47px; padding: 0 30px; font-size: 16px; font-weight: 700; color: #000; } .sk_con { float: left; } .sk_con ul li { float: left; } .sk_con ul li a { display: block; line-height: 49px; padding: 0 20px; font-size: 14px; } .sk_con ul li:last-child a::after { content: '\e91e'; font-family: 'icomoon'; } 列表页主体 sk_container 1 号盒子 sk_container 给宽度 1200，不要给高度 结构代码<!-- 列表页主体部分 --> <div class="w sk_container"> <div class="sk_hd"> ... </div> <div class="sk_bd"> ... </div> </div> sk_hd 制作 2 号盒子 sk_hd ，插入图片即可 结构代码<div class="sk_hd"> <img src="upload/bg_03.png" alt=""> </div> sk_bd 制作 3 号盒子 sk_bd ，里面包含很多的 ul 和 li 当鼠标移入到 li 上面的时候显示红色的边框，在这里先给 li 设置透明的边框，当鼠标移入的时候 设置为红色即可 由于给每个 li 都设置了外边距，导致一行的最后一个 li 掉了下来，在这里我们利用 nth-child(4n) 来选择出来每一行最后一个 li，去掉外边距就好了 结构代码<div class="sk_bd"> <ul class="clearfix"> <li> <img src="upload/list.jpg" alt=""> </li> <li> <img src="upload/list.jpg" alt=""> </li> <li> <img src="upload/list.jpg" alt=""> </li> <li> <img src="upload/list.jpg" alt=""> </li> <li> <img src="upload/list.jpg" alt=""> </li> <li> <img src="upload/list.jpg" alt=""> </li> <li> <img src="upload/list.jpg" alt=""> </li> <li> <img src="upload/list.jpg" alt=""> </li> <li> <img src="upload/list.jpg" alt=""> </li> </ul> </div> 样式代码.sk_bd ul li { overflow: hidden; float: left; margin-right: 13px; width: 290px; height: 460px; border: 1px solid transparent; } .sk_bd ul li:nth-child(4n) { margin-right: 0; } .sk_bd ul li:hover { border: 1px solid #c81523; } 注册页面（★★★）**注意：**注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化准备工作 创建register.html，引入 base.css，引入favicon图标 创建register.css ，在html页面进行引入 header 头部实现 整个内容用 版心 进行包裹 第一个头部区域怎么简单怎么来，用一个header盒子包裹链接，链接里面放图片即可 结构代码<header> <div class="logo"> <a href="index.html"> <img src="images/logo.png" alt=""></a> </div> </header> 样式代码.w { width: 1200px; margin: 0 auto; } header { height: 84px; border-bottom: 2px solid #c81523; } .logo { padding-top: 18px; } registerarea 主体模块实现 整个大盒子 高度为 522px，设置4个边框结构代码<div class="registerarea"> ... </div> 样式代码.registerarea { height: 522px; border: 1px solid #ccc; margin-top: 20px; } 1号盒子 是一个 h3 标签，放标题 里面放 注册新用户 的文字，然后包一个 div的标签，让div标签右浮动 结构代码<h3>注册新用户 <div class="login">我有账号，去<a href="#">登陆</a></div> </h3> 样式代码.registerarea h3 { height: 42px; border-bottom: 1px solid #ccc; background-color: #ececec; line-height: 42px; padding: 0 10px; font-size: 18px; font-weight: 400; } .login { float: right; font-size: 14px; } .login a { color: #c81523; } 2号盒子 里面放注册的内容 先用一个盒子，把整个内容包裹起来，设置盒子宽度（600px），让这个盒子距上边50px，水平居中显示 里面的内容利用 ul 包含 li 来实现的（不需要用表格） 每个 li 里面，左侧放 label 标签， 中间放input 标签， 右侧放 span 提示信息 左侧 label里面的文字都是右对齐，我们可以给label设置一个宽度（88px），然后利用text-align 来设置右对齐 input 表单设置 宽度 242px，高度 37px，设置边框 右侧 span修饰一下文字颜色 提示信息的样式优化 定义一个 错误的样式，定义一个 正确的样式，然后给对应的盒子设置类名 在span里面放一个小盒子，这个小盒子用来显示 图标的，设置一下宽高 （20x20） 插入图片了之后，默认与文字是基线对齐，通过 vertical-algin 来设置 图片与文字对齐方式 安装程度的布局，在第4个小 li 里面放 三个盒子，分别放 弱、中、强 设置 em 的 左右 12px 的内边距，设置一下文字颜色 分别设置 背景颜色 同意协议 和 完成注册 都是用 li 进行包裹 结构代码<div class="reg_form"> <form action=""> <ul> <li><label for="">手机号：</label> <input type="text" class="inp"> <span class="error"> <i class="error_icon"></i> 手机号码格式不正确，请从新输入 </span></li> <li><label for="">短信验证码：</label> <input type="text" class="inp"> <span class="success"> <i class="success_icon"></i> 短信验证码输入正确 </span></li> <li><label for="">登录密码：</label> <input type="password" class="inp"> <span class="error"> <i class="error_icon"></i> 手机号码格式不正确，请从新输入 </span></li> <li class="safe">安全程度 <em class="ruo">弱</em> <em class="zhong">中</em> <em class="qiang">强</em> </li> <li><label for="">确认密码：</label> <input type="password" class="inp"> <span class="error"> <i class="error_icon"></i> 手机号码格式不正确，请从新输入 </span></li> <li class="agree"><input type="checkbox" name="" id=""> 同意协议并注册 <a href="#">《知晓用户协议》</a> </li> <li> <input type="submit" value="完成注册" class="btn"> </li> </ul> </form> </div> 样式代码.reg_form { width: 600px; margin: 50px auto 0; } .reg_form ul li { margin-bottom: 20px; } .reg_form ul li label { display: inline-block; width: 88px; text-align: right; } .reg_form ul li .inp { width: 242px; height: 37px; border: 1px solid #ccc; } .error { color: #c81523; } .error_icon, .success_icon { display: inline-block; vertical-align: middle; width: 20px; height: 20px; background: url(../images/error.png) no-repeat; margin-top: -2px; } .success { color: green; } .success_icon { background: url(../images/success.png) no-repeat; } .safe { padding-left: 170px; } .safe em { padding: 0 12px; color: #fff; } .ruo { background-color: #de1111; } .zhong { background-color: #40b83f; } .qiang { background-color: #f79100; } .agree { padding-left: 95px; } .agree input { vertical-align: middle; } .agree a { color: #1ba1e6; } .btn { width: 200px; height: 34px; background-color: #c81623; font-size: 14px; color: #fff; margin: 30px 0 0 70px; } 底部实现结构代码<footer> <div class="mod_copyright"> <div class="links"> <a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U </div> <div class="copyright"> 地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702 </div> </div> </footer> 样式代码.mod_copyright { text-align: center; padding-top: 20px; } .links { margin-bottom: 15px; } .links a { margin: 0 3px; } .copyright { line-height: 20px; } Web服务器把自己网站上传到服务器上，可以让其他人访问什么是Web服务器我们写的品优购网站，目前是放到自己电脑上的，只能自己访问浏览。如果想要很多人访问我们的网站，可以把品优购放到服务器上，这样就可以多人访问我们的品优购网站了服务器（我们也会称之为主机）是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web 服务器等。Web 服务器****一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等 Web 客户端提供文档，也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载。以下服务器我们主要指的是Web服务器。根据服务器在网络中所在的位置不同，又可分为本地服务器和远程服务器。本地服务器我们可以把自己的电脑设置为本地服务器， 这样同一个局域网内的同学就可以访问你的品优购网站了。 就业班学ajax的时候，再进行讲解远程服务器本地服务器主要在局域网中访问，如果想要在互联网中访问，可以把品优购网站上传到远程服务器。远程服务器是通常是别的公司为我们提供的一台电脑（主机），我们只要把网站项目上传到这台电脑上，任何人都可以利用域名访问我们的网站了。比如域名： www.mi.com 可以访问小米网站小结 服务器就是一台电脑。因为我们主要是做网站，所以我们主要使用web服务器 服务器可以分为本地服务器和远程服务器 远程服务器是别的公司为我们提供了一台计算机。 我们可以把网站上传到远程服务器里面， 别人就可以通过域名访问我们的网站了 将自己的网站上传到远程服务器（★★★）注意：一般稳定的服务器都是需要收费的。 比如：阿里云这里给大家推荐一个免费的远程服务器（免费空间） http://free.3v.do/ 去免费空间网站注册账号。 记录下主机名、用户名、密码、域名。 利用 utftp 软件 上传网站到远程服务器 在浏览器中输入域名，即可访问我们的品优购网站了
-
品优购项目-上 目标 能够遵循品优购代码规范 能够在品优购首页中引入 favicon 图标 能够说出三大标签 SEO 优化 能够在品优购首页中使用字体图标 能够说出 LOGO 需要哪些 SEO 优化 品优购项目规划网站制作流程原型图： 页面的布局，告知我们开发人员，整个页面的结构是怎样的，说白了就是什么地方放什么内容**效果图：**告知我们开发人员，最终做出来的成品应该是什么样子，相比原型图，效果图里面包含内容，风格，字体大小等等品优购项目介绍 **项目名称：**品优购 **项目描述：**品优购是一个电商网站，我们要完成 PC 端首页、列表页、注册页面的制作 主页列表页注册页品优购项目的学习目的 电商类网站比较综合，里面需要大量的布局技术，包括布局方式、常见效果以及周边技术 品优购项目能复习、总结、提高基础班所学布局技术 写完品优购项目，能对实际开发中制作 PC 端页面流程有一个整体的感知 为后期学习移动端项目做铺垫 开发工具以及技术栈开发工具VScode 、Photoshop（fw）、主流浏览器（以Chrome浏览器为主）技术栈 利用 HTML5 + CSS3 手动布局，可以大量使用 H5 新增标签和样式 采取结构与样式相分离，模块化开发 良好的代码规范有利于团队更好的开发协作，提高代码质量，因此品优购项目里面，请同学们遵循以下代码规范。（详情见素材文件夹--- 品优购代码规范.md） 品优购项目搭建工作创建的文件夹如下（称为项目结构）创建文件如下初始化样式有些网站初始化的不太提倡 * { margin: 0; padding: 0; } 比如新浪： html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0} 项目模块化开发所谓的模块化：将一个项目按照功能划分，一个功能一个模块，互不影响，模块化开发具有重复使用、更换方便等优点代码也如此，有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有(如下图)。此时，可以把这些结构和样式单独作为一个模块，然后重复使用 有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复使用 这里最典型的应用就是 common.css 公共样式。写好一个样式，其余的页面用到这些相同的样式 模块化开发具有重复使用、修改方便等优点 网站 favicon 图标（★★★）favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持 favicon.ico 图标。制作favicon图标 把品优购图标切成 png 图片 把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/ 使用favicon图标favicon图标放到网站根目录下HTML页面引入favicon图标在html 页面里面的 <head> </head>元素之间引入代码 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> TDK三大标签SEO优化（★★）SEO是什么**SEO（Search Engine Optimization）**汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。页面必须有三个标签用来符合 SEO 优化TDK是什么T -- Title（网站标题）title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。**建议：**网站名（产品名）- 网站的介绍 （尽量不要超过30个汉字）例如： 京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！ 小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站 D -- description（网站描述）简要说明我们网站主要是做什么的。我们提倡，description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话：010…”之类语句。例如：<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />K -- keywords （关键字）keywords 是页面关键词，是搜索引擎的关注点之一。keywords 最好限制为 6～8 个关键词，关键词之间用英文逗号隔开，采用 关键词1,关键词2 的形式例如：<meta name= " keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的 SEO 人员准备示例代码<head> ... <title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！ </title> <!-- 网站说明 --> <meta name="description" content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" /> <!-- 关键字 --> <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" /> ... </head> 品优购首页制作我们开始制作首页的头部和底部的时候，根据模块化开发，样式要写到common.css里面常用模块类名命名公共部分 -- header 头部制作快捷导航 shortcut 制作（★★）布局思路 通栏的盒子命名为 shortcut ，是快捷导航的意思。 注意这里的行高，可以继承给里面的子盒子 里面包含版心的盒子 版心盒子里面包含 1 号左侧盒子左浮动 1 号盒子 里面包含一个ul，ul包裹li，第一个li里面包裹文字就行，因为不能点击，第二个li包含两个a标签 里面的内容是水平排列，所以需要给li设置浮动 文字要垂直居中，我们可以给 shortcut设置行高，因为行高可以继承，里面的孩子就不需要设置了 版心盒子里面包含 2 号右侧盒子右浮动 2 号盒子 里面包含一个ul，ul包裹li，中间的|可以用样式去设置，也可以用字符 | 里面内容水平排列，给li设置浮动 找到里面所有偶数的 li 设置样式（偶数的 li 显示是一个 | 竖线，所以需要单独选择出来设置样式，利用nth-child就可以实现） 需要用到字体图标 利用伪元素的方式来实现字体图标，给需要添加的标签设置类名为 ： arrow-icon 先要引入字体图片的资源 在样式里面利用 font-face 来进行声明 在伪元素的 content属性设置 图标的编码 给伪元素设置font-family属性 结构示例代码<!-- 快捷导航模块 start --> <section class="shortcut"> <div class="w"> <div class="fl"> <ul> <li>品优购欢迎您！ </li> <li> <a href="#">请登录</a> <a href="#" class="style_red">免费注册</a> </li> </ul> </div> <div class="fr"> <ul> <li>我的订单</li> <li></li> <li class="arrow-icon">我的品优购</li> <li></li> <li>品优购会员</li> <li></li> <li>企业采购</li> <li></li> <li class="arrow-icon">关注品优购</li> <li></li> <li class="arrow-icon">客户服务</li> <li></li> <li class="arrow-icon">网站导航</li> </ul> </div> </div> </section> 样式示例代码/* 声明字体图标 这里一定要注意路径的变化 */ @font-face { font-family: 'icomoon'; src: url('../fonts/icomoon.eot?tomleg'); src: url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?tomleg') format('truetype'), url('../fonts/icomoon.woff?tomleg') format('woff'), url('../fonts/icomoon.svg?tomleg#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } /* 快捷导航模块 */ .shortcut { height: 31px; line-height: 31px; background-color: #f1f1f1; } .shortcut ul li { float: left; } /* 选择所有的偶数的小li */ .shortcut .fr ul li:nth-child(even) { width: 1px; height: 12px; background-color: #666; margin: 9px 15px 0; } .arrow-icon::after { content: '\e91e'; font-family: 'icomoon'; margin-left: 6px; } header头部模块搭建（★★★） header 盒子必须要有高度 1 号盒子是 logo 标志定位，在正常开发过程中，logo的布局其实是有讲究的，需要进行 logoSEO的优化 （★★★） logo 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要 h1 里面再放一个链接，可以返回首页的，把 logo 的背景图片给链接即可 为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来 方法1：text-indent 移到盒子外面（text-indent: -9999px) ，然后 overflow:hidden ，淘宝的做法 方法2：直接给 font-size: 0; 就看不到文字了，京东的做法 最后给链接一个 title 属性，这样鼠标放到 logo 上就可以看到提示文字了 结构代码<!-- logo模块 --> <div class="logo"> <h1> <a href="index.html" title="品优购商城">品优购商城</a> </h1> </div> 样式代码/* header 头部制作 */ .header { position: relative; height: 105px; } .logo { position: absolute; top: 25px; width: 171px; height: 61px; } .logo a { display: block; width: 171px; height: 61px; background: url(../images/logo.png) no-repeat; /* font-size: 0;京东的做法*/ /* 淘宝的做法让文字隐藏 */ text-indent: -9999px; overflow: hidden; } 2 号盒子是 search 搜索模块定位 search盒子利用定位的方式放在对应的位置 search盒子设置绝对定位，header盒子设置相对定位 search盒子里面包含两个子元素，一个是输入框，一个是按钮，分别跟定固定的宽高（搜索框 宽度：454px；按钮宽度：80px） 输入框和按钮本来就是行内块元素，在一行显示，但是中间会有间隙，所以我们可以让让这两个元素浮动起来 结构代码<!-- search搜索模块 --> <div class="search"> <input type="search" name="" id="" placeholder="语言开发"> <button>搜索</button> </div> 样式代码.search { position: absolute; left: 346px; top: 25px; width: 538px; height: 36px; border: 2px solid #b1191a; } .search input { float: left; width: 454px; height: 32px; padding-left: 10px; } .search button { float: left; width: 80px; height: 32px; background-color: #b1191a; font-size: 16px; color: #fff; } 3 号盒子是 hotwords 热词模块定位 热词模块怎么简单怎么来，直接在里面放a标签即可 给里面所有的a标签设置 左右10px的外边距 给第一个a标签设置文字变红色（#c81623） 结构代码<!-- hotwords模块制作 --> <div class="hotwords"> <a href="#" class="style_red">优惠购首发</a> <a href="#">亿元优惠</a> <a href="#">9.9元团购</a> <a href="#">美满99减30</a> <a href="#">办公用品</a> <a href="#">电脑</a> <a href="#">通信</a> </div> 样式代码.hotwords { position: absolute; top: 66px; left: 346px; } .hotwords a { margin: 0 10px; } 4 号盒子是 shopcar 购物车模块 在shopcar里面添加一个before伪元素和after伪元素，分别放置 购物车的图标和 右箭头 count 统计部分用绝对定位做 count 统计部分不要给宽度，因为可能买的件数比较多，让件数撑开就好了，给一个高度 一定注意左下角不是圆角，其余三个是圆角 写法： border-radius: 7px 7px 7px 0; 结构代码<!-- 购物车模块 --> <div class="shopcar"> 我的购物车 <i class="count">8</i> </div> 样式代码.shopcar { position: absolute; right: 60px; top: 25px; width: 140px; height: 35px; line-height: 35px; text-align: center; border: 1px solid #dfdfdf; background-color: #f7f7f7; } .shopcar::before { content: '\e93a'; font-family: 'icomoon'; margin-right: 5px; color: #b1191a; } .shopcar::after { content: '\e920'; font-family: 'icomoon'; margin-left: 10px; } .count { position: absolute; top: -5px; left: 105px; height: 14px; line-height: 14px; color: #fff; background-color: #e60012; padding: 0 5px; border-radius: 7px 7px 7px 0; } nav导航模块制作（★★★） nav 盒子通栏有高度，而且有个下边框，里面包含版心，版心里面包含 1 号盒子 和 2号盒子结构代码<nav class="nav"> <div class="w"> <div class="dropdown"> ... </div> <div class="navitems"> ... </div> </div> </nav> 样式代码.nav { height: 47px; border-bottom: 2px solid #b1191a; } 1 号盒子左侧浮动，dropdown 1号盒子有讲究，根据相关性 里面包含 .dt 和 .dd 两个盒子 .dt 内容是全部商品分类，然后把这个盒子的宽高设置跟父亲一样，这样就把 .dd 挤到下面去了 给 .dd 盒子设置宽度 和 高度，以及背景颜色 给 .dd 盒子里面定义 无序列表 （ul > li > a） 每个 li 都有一个高度（31px），宽度可以不用设置，让文字垂直居中，左边设置2个像素的margin值 给 li 里面的a设置文字大小（14px） 给 li 设置 hover，当鼠标移入的时候，让li的背景变成白色，让里面的文字变成红色 li 右侧的三角 就可以利用 伪元素来实现，给伪元素设置字体图标，利用定位的方式放在li的右侧，那么给li设置相对定位 结构代码<div class="dropdown"> <div class="dt">全部商品分类</div> <div class="dd"> <ul> <li><a href="#">家用电器</a> </li> <li><a href="#">手机</a>、 <a href="#">数码</a>、<a href="#">通信</a> </li> <li><a href="#">电脑、办公</a> </li> <li><a href="#">家居、家具、家装、厨具</a> </li> <li><a href="#">男装、女装、童装、内衣</a> </li> <li><a href="#">个户化妆、清洁用品、宠物</a> </li> <li><a href="#">鞋靴、箱包、珠宝、奢侈品</a> </li> <li><a href="#">运动户外、钟表</a> </li> <li><a href="#">汽车、汽车用品</a> </li> <li><a href="#">母婴、玩具乐器</a> </li> <li><a href="#">食品、酒类、生鲜、特产</a> </li> <li><a href="#">医药保健</a> </li> <li><a href="#">图书、音像、电子书</a> </li> <li><a href="#">彩票、旅行、充值、票务</a> </li> <li><a href="#">理财、众筹、白条、保险</a> </li> </ul> </div> </div> 样式代码.dropdown .dt { width: 100%; height: 100%; color: #fff; text-align: center; line-height: 45px; font-size: 16px; } .dropdown .dd { display: none; width: 210px; height: 465px; background-color: #c81623; margin-top: 2px; } .dropdown .dd ul li { position: relative; height: 31px; line-height: 31px; margin-left: 2px; padding-left: 10px; } .dropdown .dd ul li:hover { background-color: #fff; } .dropdown .dd ul li::after { position: absolute; top: 1px; right: 10px; color: #fff; font-family: 'icomoon'; content: '\e920'; font-size: 14px; } .dropdown .dd ul li a { font-size: 14px; color: #fff; } .dropdown .dd ul li:hover a { color: #c81623; } 2 号盒子左侧浮动，navitems 导航栏组 里面结构是 ul > li > a 导航栏都是能点击的，所以我们不能给定宽度，给a左右的padding把两侧撑开 让文字垂直居中（行高等于高度） 结构代码<div class="navitems"> <ul> <li><a href="#">服装城</a></li> <li><a href="#">服装城</a></li> <li><a href="#">服装城</a></li> <li><a href="#">服装城</a></li> <li><a href="#">服装城</a></li> <li><a href="#">服装城</a></li> <li><a href="#">服装城</a></li> <li><a href="#">服装城</a></li> </ul> </div> 样式代码.navitems ul li { float: left; } .navitems ul li a { display: block; height: 45px; line-height: 45px; font-size: 16px; padding: 0 25px; } 公共部分 -- footer 底部制作 footer 页面底部盒子通栏给一个高度（415px）和灰色的背景 footer 里面有一个大的版心 版心里面包含 1 号盒子，mod_service 是服务模块，mod 是模块的意思 给 mod_service 设置高度（80px）和下边框 在里面定义 ul > li ,每个li 宽度是300px 高度是 50px，给每个li设置35px的左内边距 在每个li里面，放一个 h5（里面放图标），一个div（里面放div和p） 给 h5设置浮动，让h5与这个div左右排列 通过精灵图技术（核心思路：利用background-position来实现），把图标设置给h5 结构代码<div class="mod_service"> <ul> <li> <h5></h5> <div class="service_txt"> <h4>正品保障</h4> <p>正品保障,提供发票</p> </div> </li> <li> <h5></h5> <div class="service_txt"> <h4>正品保障</h4> <p>正品保障,提供发票</p> </div> </li> <li> <h5></h5> <div class="service_txt"> <h4>正品保障</h4> <p>正品保障,提供发票</p> </div> </li> <li> <h5></h5> <div class="service_txt"> <h4>正品保障</h4> <p>正品保障,提供发票</p> </div> </li> </ul> </div> 样式代码/* 底部模块制作 */ .footer { height: 415px; background-color: #f5f5f5; padding-top: 30px; } .mod_service { height: 80px; border-bottom: 1px solid #ccc; } .mod_service ul li { float: left; width: 300px; height: 50px; padding-left: 35px; } .mod_service ul li h5 { float: left; width: 50px; height: 50px; background: url(../images/icons.png) no-repeat -252px -2px; margin-right: 8px; } .service_txt h4 { font-size: 14px; } .service_txt p { font-size: 12px; } 版心里面包含 2 号盒子，mod_help 是帮助模块 给 mod_help 设置 50px的左内边距和20px的上内边距，给定高度（185px） 里面的布局利用 自定义列表来实现（dl > dt + dd） 给 dl 设置浮动，让其可以水平排列，给每个dl盒子设置宽度 给 dt 设置文字大小（16px），设置下外边距（10px），让dt和dd之间有些距离 最后一个 dl 结构和样式不一样，需要单独设置 <div class="mod_help"> <dl> <dt>服务指南</dt> <dd><a href="#">购物流程</a></dd> <dd><a href="#">会员介绍</a></dd> <dd><a href="#">生活旅行/团购</a></dd> <dd><a href="#">常见问题</a></dd> <dd><a href="#">大家电</a></dd> <dd><a href="#">联系客服</a></dd> </dl> <dl> <dt>服务指南</dt> <dd><a href="#">购物流程</a></dd> <dd><a href="#">会员介绍</a></dd> <dd><a href="#">生活旅行/团购</a></dd> <dd><a href="#">常见问题</a></dd> <dd><a href="#">大家电</a></dd> <dd><a href="#">联系客服</a></dd> </dl> <dl> <dt>服务指南</dt> <dd><a href="#">购物流程</a></dd> <dd><a href="#">会员介绍</a></dd> <dd><a href="#">生活旅行/团购</a></dd> <dd><a href="#">常见问题</a></dd> <dd><a href="#">大家电</a></dd> <dd><a href="#">联系客服</a></dd> </dl> <dl> <dt>服务指南</dt> <dd><a href="#">购物流程</a></dd> <dd><a href="#">会员介绍</a></dd> <dd><a href="#">生活旅行/团购</a></dd> <dd><a href="#">常见问题</a></dd> <dd><a href="#">大家电</a></dd> <dd><a href="#">联系客服</a></dd> </dl> <dl> <dt>服务指南</dt> <dd><a href="#">购物流程</a></dd> <dd><a href="#">会员介绍</a></dd> <dd><a href="#">生活旅行/团购</a></dd> <dd><a href="#">常见问题</a></dd> <dd><a href="#">大家电</a></dd> <dd><a href="#">联系客服</a></dd> </dl> <dl> <dt>帮助中心</dt> <dd> <img src="images/wx_cz.jpg" alt=""> 品优购客户端 </dd> </dl> </div> 样式代码.mod_help { height: 185px; border-bottom: 1px solid #ccc; padding-top: 20px; padding-left: 50px; } .mod_help dl { float: left; width: 200px; } .mod_help dl:last-child { width: 90px; text-align: center; } .mod_help dl dt { font-size: 16px; margin-bottom: 10px; } 版心里面包含 3 号盒子，mod_copyright 是版权模块 分为上下两块，上面是 links 友情链接，下面是 copyright，给mod_copyright 大盒子设置 文字水平居中，20px的上内边距，让上面内容和下面内容之间有些间隙 把内容分别复制到相应模块中 给 links 设置 15px 的下外边距，给links 里面 的 a 标签设置 左右 3px 的外边距 给copyright 设置 20px 的行高 结构代码<div class="mod_copyright"> <div class="links"> <a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U </div> <div class="copyright"> 地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702 </div> </div> 样式代码.mod_copyright { text-align: center; padding-top: 20px; } .links { margin-bottom: 15px; } .links a { margin: 0 3px; } .copyright { line-height: 20px; }
-
html5+css3新特性 HTML5新特性概述HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。语义化标签 （★★）以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的<div class=“header”> </div> <div class=“nav”> </div> <div class=“content”> </div> <div class=“footer”> </div> 发展到了HTML5后，新增了一些语义化标签，这样的话更加有利于浏览器的搜索引擎搜索，也方便了网站的seo（Search Engine Optimization，搜索引擎优化），下面就是新增的一些语义化标签 <header> 头部标签 <nav> 导航标签 <article> 内容标签 <section> 定义文档某个区域 <aside> 侧边栏标签 <footer> 尾部标签 多媒体标签多媒体标签分为 音频 audio 和视频 video 两个标签 使用它们，我们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件了。因为多媒体标签的 属性、方法、事件比较多，因此我们需要什么功能的时候，就需要去查找相关的文档进行学习使用。视频标签- video（★★★）基本使用当前 元素支持三种视频格式： 尽量使用 mp4格式使用语法： <video src="media/mi.mp4"></video> 兼容写法由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可<video controls="controls" width="300"> <source src="move.ogg" type="video/ogg" > <source src="move.mp4" type="video/mp4" > 您的浏览器暂不支持 <video> 标签播放视频 </ video > 上面这种写法，浏览器会匹配video标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本video 常用属性属性很多，有一些属性需要大家重点掌握： autoplay 自动播放 注意： 在google浏览器上面，默认禁止了自动播放，如果想要自动播放的效果，需要设置 muted属性 width 宽度 height 高度 loop 循环播放 src 播放源 muted 静音播放 示例代码：<video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/mi9.jpg"></video> 音频标签- audio基本使用当前 元素支持三种视频格式： 尽量使用 mp3格式使用语法：<audio src="media/music.mp3"></audio> 兼容写法由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可< audio controls="controls" > <source src="happy.mp3" type="audio/mpeg" > <source src="happy.ogg" type="audio/ogg" > 您的浏览器暂不支持 <audio> 标签。 </ audio> 上面这种写法，浏览器会匹配audio标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本audio 常用属性示例代码：<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio> 小结 音频标签和视频标签使用方式基本一致 浏览器支持情况不同 谷歌浏览器把音频和视频自动播放禁止了 我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过JavaScript解决） 视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性 新增的表单元素 （★★）在H5中，帮我们新增加了很多类型的表单，这样方便了程序员的开发课堂案例：在这个案例中，熟练了新增表单的用法案例代码：<!-- 我们验证的时候必须添加form表单域 --> <form action=""> <ul> <li>邮箱: <input type="email" /></li> <li>网址: <input type="url" /></li> <li>日期: <input type="date" /></li> <li>时间: <input type="time" /></li> <li>数量: <input type="number" /></li> <li>手机号码: <input type="tel" /></li> <li>搜索: <input type="search" /></li> <li>颜色: <input type="color" /></li> <!-- 当我们点击提交按钮就可以验证表单了 --> <li> <input type="submit" value="提交"></li> </ul> </form> 常见输入类型text password radio checkbox button file hidden submit reset image 新的输入类型类型很多，我们现阶段重点记忆三个： number tel searchCSS3新特性CSS3 的现状 新增的CSS3特性有兼容性问题，ie9+才支持 移动端支持优于 PC 端 不断改进中 应用相对广泛 现阶段主要学习：新增选择器和盒子模型以及其他特性 CSS3 新增选择器CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。 属性选择器 结构伪类选择器 伪元素选择器 属性选择器（★★）属性选择器，按照字面意思，都是根据标签中的属性来选择元素示例代码： /* 只选择 type =text 文本框的input 选取出来 */ input[type=text] { color: pink; } /* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */ div[class^=icon] { color: red; } /* 选择首先是section 然后 具有class属性 并且属性值 必须是 data结尾的这些元素 */ section[class$=data] { color: blue; } 属性选择器，按照字面意思，都是根据标签中的属性来选择元素 属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器 属性选择器也可以选择出来自定义的属性 **注意：**类选择器、属性选择器、伪类选择器，权重为 10。 结构伪类选择器结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素E:first-child匹配父元素的第一个子元素E <style> ul li:first-child{ background-color: red; } </style> <ul> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> <li>列表项四</li> </ul> E:last-child 则是选择到了最后一个li标签E:nth-child(n)（★★★）匹配到父元素的第n个元素 匹配到父元素的第2个子元素ul li:nth-child(2){} 匹配到父元素的序号为奇数的子元素ul li:nth-child(odd){} odd 是关键字 奇数的意思（3个字母 ） 匹配到父元素的序号为偶数的子元素ul li:nth-child(even){} even（4个字母 ） 匹配到父元素的前3个子元素ul li:nth-child(-n+3){}选择器中的 n 是怎么变化的呢？因为 n是从 0 ，1，2，3.. 一直递增所以 -n+3 就变成了 n=0 时 -0+3=3 n=1时 -1+3=2 n=2时 -2+3=1 n=3时 -3+3=0 ... 一些常用的公式： 公式不是死的，在这里列举出来让大家能够找寻到这个模式，能够理解代码，这样才能写出满足自己功能需求的代码常用的结构伪类选择器是： nth-child(n) {...}E:nth-child 与 E:nth-of-type 的区别这里只讲明 E:nth-child(n) 和 E:nth-of-type(n) 的区别 剩下的 E:first-of-type E:last-of-type E:nth-last-of-type(n) 同理做推导即可<style> ul li:nth-child(2){ /* 字体变成红色 */ color: red; } ul li:nth-of-type(2){ /* 背景变成绿色 */ background-color: green; } </style> <ul> <li>列表项一</li> <p>乱来的p标签</p> <li>列表项二</li> <li>列表项三</li> <li>列表项四</li> </ul> 也就是说： E:nth-child(n) 匹配父元素的第n个子元素E，也就是说，nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配 E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E，也就是说，对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子 小结 结构伪类选择器一般用于选择父级里面的第几个孩子 nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配 nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子 关于 nth-child（n） 我们要知道 n 是从 0 开始计算的，要记住常用的公式 如果是无序列表，我们肯定用 nth-child 更多 类选择器、属性选择器、伪类选择器，权重为 10 伪元素选择器（★★★）伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构示例demo<style> div { width: 200px; height: 200px; background-color: pink; } /* div::before 权重是2 */ div::before { /* 这个content是必须要写的 */ content: '我'; } div::after { content: '小猪佩奇'; } </style> <body> <div> 是 </div> </body> 注意： before 和 after 创建一个元素，但是属于行内元素 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素 语法： element::before {} before 和 after 必须有 content 属性 before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素伪元素选择器和标签选择器一样，权重为 1 应用场景一： 字体图标在实际工作中，字体图标基本上都是用伪元素来实现的，好处在于我们不需要在结构中额外去定义字体图标的标签，通过content属性来设置字体图标的 编码步骤： 结构中定义div盒子 在style中先申明字体 @font-face 在style中定义after伪元素 div::after{...} 在after伪元素中 设置content属性，属性的值就是字体编码 在after伪元素中 设置font-family的属性 利用定位的方式，让伪元素定位到相应的位置；记住定位口诀：子绝父相 <head> ... <style> @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?1lv3na'); src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?1lv3na') format('truetype'), url('fonts/icomoon.woff?1lv3na') format('woff'), url('fonts/icomoon.svg?1lv3na#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } div { position: relative; width: 200px; height: 35px; border: 1px solid red; } div::after { position: absolute; top: 10px; right: 10px; font-family: 'icomoon'; /* content: ''; */ content: '\e91e'; color: red; font-size: 18px; } </style> </head> <body> <div></div> </body> 应用场景二： 仿土豆效果把之前的代码进行了改善步骤： 找到之前写过的仿土豆的结构和样式，拷贝到自己的页面中 删除之前的mask遮罩 在style中，给大的div盒子（类名叫tudou的），设置 before伪元素 这个伪元素充当的是遮罩的角色，所以我们不用设置内容，但是需要设置content属性，属性的值为空字符串 给这个遮罩设置宽高，背景颜色，默认是隐藏的 当鼠标移入到 div盒子时候，让遮罩显示，利用 hover 来实现 <head> ... <style> .tudou { position: relative; width: 444px; height: 320px; background-color: pink; margin: 30px auto; } .tudou img { width: 100%; height: 100%; } .tudou::before { content: ''; /* 隐藏遮罩层 */ display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center; } /* 当我们鼠标经过了 土豆这个盒子，就让里面before遮罩层显示出来 */ .tudou:hover::before { /* 而是显示元素 */ display: block; } </style> </head> <body> <div class="tudou"> <img src="images/tudou.jpg" alt=""> </div> <div class="tudou"> <img src="images/tudou.jpg" alt=""> </div> <div class="tudou"> <img src="images/tudou.jpg" alt=""> </div> <div class="tudou"> <img src="images/tudou.jpg" alt=""> </div> </body> 应用场景三： 清除浮动回忆一下清除浮动的方式： 额外标签法也称为隔墙法，是 W3C 推荐的做法。 父级添加 overflow 属性 父级添加after伪元素 父级添加双伪元素 额外标签法也称为隔墙法，是 W3C 推荐的做法注意： 要求这个新的空标签必须是块级元素后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化盒子模型（★★★）CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变可以分成两种情况： box-sizing: content-box 盒子大小为 width + padding + border （以前默认的） box-sizing: border-box 盒子大小为 width 如果盒子模型我们改为了box-sizing: border-box ， 那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）其他特性（★）图标变模糊 -- CSS3滤镜filterfilter CSS属性将模糊或颜色偏移等图形效果应用于元素语法：filter: 函数(); --> 例如： filter: blur(5px); --> blur模糊处理 数值越大越模糊 计算盒子宽度 -- calc 函数calc() 此CSS函数让你在声明CSS属性值时执行一些计算语法：width: calc(100% - 80px); 括号里面可以使用 + - * / 来进行计算CSS3 过渡（★★★）过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。过渡动画： 是从一个状态 渐渐的过渡到另外一个状态可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响页面布局。我们现在经常和 :hover 一起 搭配使用。语法：transition: 要过渡的属性 花费时间 运动曲线 何时开始; 属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以 花费时间： 单位是 秒（必须写单位） 比如 0.5s 运动曲线： 默认是 ease （可以省略） 何时开始：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略） 后面两个属性可以省略 记住过渡的使用口诀： 谁做过渡给谁加 过渡练习步骤： 创建两个div的盒子，属于的嵌套关系，外层类名叫 bar，里层类名叫 bar_in 给外层的bar 这个盒子设置边框，宽高，圆角边框 给里层的bar_in 设置 初试的宽度，背景颜色，过渡效果 给外层的 bar 添加 hover事件，当触发了hover事件 让里层的bar_in 来进行宽度的变化 代码：<head> ... <style> .bar { width: 150px; height: 15px; border: 1px solid red; border-radius: 7px; padding: 1px; } .bar_in { width: 50%; height: 100%; background-color: red; /* 谁做过渡给谁加 */ transition: all .7s; } .bar:hover .bar_in { width: 100%; } </style> </head> <body> <div class="bar"> <div class="bar_in"></div> </div> </body> 广义H5说法 了解狭隘H5广义H5 广义的 HTML5 是 HTML5 本身 + CSS3 + JavaScript 。 这个集合有时称为 HTML5 和朋友，通常缩写为 HTML5 。 虽然 HTML5 的一些特性仍然不被某些浏览器支持，但是它是一种发展趋势。 HTML5 MDN 介绍：https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML
-
css精灵图 1. 精灵图（重点）1.1 为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。为什么使用精灵图（目的）： 为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。核心原理： 将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。精灵图举例:1.2 精灵图（sprites）的使用使用精灵图核心： 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。 这个大图片也称为 sprites 精灵图 或者 雪碧图 移动背景图片位置， 此时可以使用 background-position 。 移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同 因为一般情况下都是往上往左移动，所以数值是负值。 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。 使用精灵图核心总结： 精灵图主要针对于小的背景图片使用。 主要借助于背景位置来实现---background-position 。 一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。） 1.3 案例：拼出自己名字1.3.1 案例效果1.3.2 代码参考结构<span class="p">p</span> <span class="i">i</span> <span class="n">n</span> <span class="k">k</span> 样式span { display: inline-block; background: url(images/abcd.jpg) no-repeat; } .p { width: 100px; height: 112px; /* background-color: pink; */ background-position: -493px -276px; } .i { width: 60px; height: 108px; /* background-color: pink; */ background-position: -327px -142px; } .n { width: 108px; height: 109px; /* background-color: pink; */ background-position: -215px -141px; } .k { width: 105px; height: 114px; /* background-color: pink; */ background-position: -495px -142px; } 2. 字体图标2.1 字体图标的产生字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。精灵图是有诸多优点的，但是缺点很明显。1.图片文件还是比较大的。2.图片本身放大和缩小会失真。3.一旦图片制作完毕想要更换非常复杂。此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。2.2 字体图标的优点轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等 兼容性：几乎支持所有的浏览器，请放心使用 注意： 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。 总结：1.如果遇到一些结构和样式比较简单的小图标，就用字体图标。2.如果遇到一些结构和样式复杂一点的小图片，就用精灵图。使用步骤字体图标是一些网页常见的小图标，我们直接网上下载即可。 因此使用可以分为：1.字体图标的下载2.字体图标的引入 （引入到我们html页面中）3.字体图标的追加 （以后添加新的小图标）2.3 字体图标的下载推荐下载网站： icomoon 字库 http://icomoon.io 推荐指数 ★★★★★ IcoMoon 成立于 2011 年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使它们成一字型。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。 阿里 iconfont 字库 http://www.iconfont.cn/ 推荐指数 ★★★★★ 这个是阿里妈妈 M2UX 的一个 iconfont 字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用 AI制作图标上传生成。 重点是，免费！2.4 字体图标的引入下载完毕之后，注意原先的文件不要删，后面会用。 把下载包里面的 fonts 文件夹放入页面根目录下 字体文件格式 不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。1).TureType( .ttf )格式.ttf字体是Windows和Mac的最常见的字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；2).Web Open Font Format( .woff )格式woff字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；3).Embedded Open Type( .eot )格式.eot字体是IE专用字体，支持这种字体的浏览器有IE4+；4).SVG( .svg )格式.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；2.在 CSS 样式中全局声明字体： 简单理解把这些字体文件通过css引入到我们页面中。一定注意字体文件路径的问题 @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); font-weight: normal; font-style: normal; } html 标签内添加小图标。 给标签定义字体。 span { font-family: "icomoon"; } 注意：务必保证 这个字体和上面@font-face里面的字体保持一致2.5 字体图标的追加如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。把压缩包里面的 selection.json 从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。2.6 字体图标加载的原理：3. CSS 三角3.1 介绍网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。一张图， 你就知道 CSS 三角是怎么来的了, 做法如下： div { width: 0; height: 0; border: 50px solid transparent; border-color: red green blue black; line-height:0; font-size: 0; } 我们用css 边框可以模拟三角效果 宽度高度为0 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了 为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0; 3.2 案例：京东三角3.2.1效果图3.2.2 代码参考<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS 三角制作</title> <style> .box1 { width: 0; height: 0; /* border: 10px solid pink; */ border-top: 10px solid pink; border-right: 10px solid red; border-bottom: 10px solid blue; border-left: 10px solid green; } .box2 { width: 0; height: 0; border: 50px solid transparent; border-left-color: pink; margin: 100px auto; } .jd { position: relative; width: 120px; height: 249px; background-color: pink; } .jd span { position: absolute; right: 15px; top: -10px; width: 0; height: 0; /* 为了照顾兼容性 */ line-height: 0; font-size: 0; border: 5px solid transparent; border-bottom-color: pink; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="jd"> <span></span> </div> </body> </html> 4. CSS 用户界面样式什么是界面样式所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。 更改用户的鼠标样式 表单轮廓 防止表单域拖拽 4.1 鼠标样式 cursor li { cursor: pointer; } 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。4.2 轮廓线 outline给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。 input { outline: none; } 4.3 防止拖拽文本域 resize实际开发中，我们文本域右下角是不可以拖拽的。 textarea{ resize: none; } vertical-align 属性应用5. vertical-align 属性应用CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。语法：vertical-align : baseline | top | middle | bottom 5.1 图片、表单和文字对齐图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。5.2 解决图片底部默认空白缝隙问题bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。主要解决方法有两种：1.给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）2.把图片转换为块级元素 display: block;6. 溢出的文字省略号显示6.1 单行文本溢出显示省略号单行文本溢出显示省略号--必须满足三个条件： /*1. 先强制一行内显示文本*/ white-space: nowrap; （ 默认 normal 自动换行） /*2. 超出的部分隐藏*/ overflow: hidden; /*3. 文字用省略号替代超出的部分*/ text-overflow: ellipsis; 6.2 多行文本溢出显示省略号（了解）多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）/*1. 超出的部分隐藏 */ overflow: hidden; /*2. 文字用省略号替代超出的部分 */ text-overflow: ellipsis; /* 3. 弹性伸缩盒子模型显示 */ display: -webkit-box; /* 4. 限制在一个块元素显示的文本的行数 */ -webkit-line-clamp: 2; /* 5. 设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-box-orient: vertical; 更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。7. 常见布局技巧巧妙利用一个技术更快更好的布局： margin负值的运用 文字围绕浮动元素 行内块的巧妙运用 CSS三角强化 7.1. margin负值运用1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）7.2 文字围绕浮动元素效果布局示意图巧妙运用浮动元素不会压住文字的特性7.3 行内块巧妙运用页码在页面中间显示: 把这些链接盒子转换为行内块， 之后给父级指定 text-align:center; 利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中 7.4. CSS 三角强化 案例7.4.1 原理<style> .box1 { width: 0; height: 0; /* 把上边框宽度调大 */ /* border-top: 100px solid transparent; border-right: 50px solid skyblue; */ /* 左边和下边的边框宽度设置为0 */ /* border-bottom: 0 solid blue; border-left: 0 solid green; */ /* 1.只保留右边的边框有颜色 */ border-color: transparent red transparent transparent; /* 2. 样式都是solid */ border-style: solid; /* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */ border-width: 100px 50px 0 0 ; } </style> </head> <body> <div class="box1"></div> </body> 7.4.2 案例效果7.4.3 代码参考<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS三角强化的巧妙运用</title> <style> .price { width: 160px; height: 24px; line-height: 24px; border: 1px solid red; margin: 0 auto; } .miaosha { position: relative; float: left; width: 90px; height: 100%; background-color:red; text-align: center; color: #fff; font-weight: 700; margin-right: 8px; } .miaosha i { position: absolute; right: 0; top: 0; width: 0; height: 0; border-color: transparent #fff transparent transparent; border-style: solid; border-width: 24px 10px 0 0; } .origin { font-size: 12px; color: gray; text-decoration: line-through; } </style> </head> <body> <div class="price"> <span class="miaosha"> ¥1650 <i></i> </span> <span class="origin">¥5650</span> </div> </body> </html> 8. CSS 初始化不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS 初始化简单理解： CSS初始化是指重设浏览器的样式。 (也称为CSS reset）每个网页都必须首先进行 CSS初始化。这里我们以 京东CSS初始化代码为例。Unicode编码字体：把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。比如：黑体 \9ED1\4F53宋体 \5B8B\4F53微软雅黑 \5FAE\8F6F\96C5\9ED1
-
-
-
-
Go语言fmt占位符 占位符 说明 %T 查看类型 %v 输入相应值的默认格式 %b 查看二进制 %o 查看八进制 %d 查看十进制 %x 查看十六进制,字母形式为小写 a-f %X 查看十六进制,字母形式为小写 A-F %U 查看Unicode格式 %p 查看指针 package main import "fmt" func main() { var name = "Vitas" var age = 18 var sex = "male" fmt.Printf("name:%v\n",name) fmt.Printf("age:%v\n",age) fmt.Printf("sex:%v\n",sex) fmt.Printf("name的类型：%T\n",name) fmt.Printf("age的类型：%T\n",age) fmt.Printf("sex的类型：%T\n",sex) fmt.Printf("age的二进制：%b\n",age) fmt.Printf("age的八进制：%o\n",age) fmt.Printf("age的十进制：%d\n",age) fmt.Printf("age的十六进制：%x\n",age) fmt.Printf("name的指针：%p\n",&name) } 打印结果如下 name:Vitas age:18 sex:male name的类型：string age的类型：int sex的类型：string age的二进制：10010 age的八进制：22 age的十进制：18 age的十六进制：12 name的指针：0xc00008e1e0
-
css浮动 一、其他样式1、圆角边框在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。border-radius 属性用于设置元素的外边框圆角。语法： border-radius:length; 参数值可以为数值或百分比的形式 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50% 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius 兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用 2、盒子阴影CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。语法： box-shadow: h-shadow v-shadow blur spread color inset; 3、文字阴影在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。语法： text-shadow: h-shadow v-shadow blur color; 二、浮动1、传统网页布局的三种方式 CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)： 普通流（标准流） 浮动 定位这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。 注意：实际开发中，一个页面基本都包含了这三种布局方式（后面移动端学习新的布局方式） 。2、标准流（普通流/文档流）所谓的标准流: 就是标签按照规定好默认方式排列 块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素：span、a、i、em 等 以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式。3、为什么需要浮动？ 总结： 有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式. 浮动最典型的应用：可以让多个块级元素一行内排列显示。 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。4、什么是浮动？ float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。语法： 选择器 { float: 属性值; } 5、浮动特性加了浮动之后的元素,会具有很多特性,需要我们掌握的.1、浮动元素会脱离标准流(脱标：浮动的盒子不再保留原先的位置)2、浮动的元素会一行内显示并且元素顶部对齐注意： 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。3、浮动的元素会具有行内块元素的特性 浮动元素的大小根据内容来决定 浮动的盒子中间是没有缝隙的6、浮动元素经常和标准流父级搭配使用为了约束浮动元素位置, 我们网页布局一般采取的策略是: 先用标准流父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧三、常见网页布局浮动布局注意点1、浮动和标准流的父盒子搭配。先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置2、一个元素浮动了，理论上其余的兄弟元素也要浮动。一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.四、清除浮动1、为什么需要清除浮动？ 由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。2、清除浮动本质清除浮动的本质是清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度注意： 如果父盒子本身有高度，则不需要清除浮动 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。 父级有了高度，就不会影响下面的标准流了 3、清除浮动样式语法： 选择器{clear:属性值;} 我们实际工作中， 几乎只用 clear: both;清除浮动的策略是: 闭合浮动.4、清除浮动的多种方式4.1、额外标签法额外标签法也称为隔墙法，是 W3C 推荐的做法。使用方式： 额外标签法会在浮动元素末尾添加一个空的标签。html 例如 <div style="clear:both"></div>，或者其他标签（如<br />等）。 优点： 通俗易懂，书写方便 缺点： 添加许多无意义的标签，结构化较差 注意： 要求这个新的空标签必须是块级元素。总结: 1、清除浮动本质是? 清除浮动的本质是清除浮动元素脱离标准流造成的影响 2、清除浮动策略是? 闭合浮动. 只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子. 3、额外标签法? 隔墙法, 就是在最后一个浮动的子元素后面添 4、加一个额外标签, 添加 清除浮动样式. 实际工作可能会遇到,但是不常用4.2、父级添加 overflow 属性可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。例如：overflow:hidden | auto | scroll; 优点：代码简洁缺点：无法显示溢出的部分注意：是给父元素添加代码4.3、父级添加after伪元素:after 方式是额外标签法的升级版。给父元素添加： .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7 专有 */ *zoom: 1; } 优点：没有增加标签，结构更简单缺点：照顾低版本浏览器代表网站： 百度、淘宝网、网易等4.4、父级添加双伪元素给父元素添加 .clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; } 优点：代码更简洁缺点：照顾低版本浏览器代表网站：小米、腾讯等总结为什么需要清除浮动？ 父级没高度。 子盒子浮动了。 影响下面布局了，我们就应该清除浮动了。 五、PS 切图1、图层切图最简单的切图方式：右击图层 → 导出 → 切片。 2、切片切图2.1、利用切片选中图片 利用切片工具手动划出 2.2、导出选中的图片文件菜单 → 存储为 web 设备所用格式 → 选择我们要的图片格式 → 存储 。 3、PS插件切图 Cutterman 是一款运行在 Photoshop 中的插件，能够自动将你需要的图层进行输出，以替代传统的手工 "导出 web 所用格式" 以及使用切片工具进行挨个切图的繁琐流程。官网：http://www.cutterman.cn/zh/cutterman注意：Cutterman 插件要求你的 PS 必须是完整版，不能是绿色版，所以大家需要安装完整版本。
-
css特性 一、css三大特性1、层叠性 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题 层叠性原则: 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式 样式不冲突，不会层叠 2、继承性 CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。子元素可以继承父元素的样式： （text-，font-，line-这些元素开头的可以继承，以及color属性）继承性口诀：龙生龙，凤生凤，老鼠生的孩子会打洞行高的继承性： body { font:12px/1.5 Microsoft YaHei； } 行高可以跟单位也可以不跟单位 如果子元素没有设置行高，则会继承父元素的行高为 1.5 此时子元素的行高是：当前子元素的文字大小 * 1.5 body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高 3、优先级当同一个元素指定多个选择器，就会有优先级的产生。 选择器相同，则执行层叠性 选择器不同，则根据选择器权重执行 选择器优先级计算表格：优先级注意点: 权重是有4组数字组成,但是不会有进位。 可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推.. 等级判断从左向右，如果某一位数值相同，则判断下一位数值。 可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大. 继承的权重是0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。 权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。 div ul li ------> 0,0,0,3 .nav ul li ------> 0,0,1,2 a:hover -----—> 0,0,1,1 .nav a ------> 0,0,1,1 二、盒子模型1、网页布局的本质网页布局的核心本质： 就是利用 CSS 摆盒子。网页布局过程： 先准备好相关的网页元素，网页元素基本都是盒子 Box 。 利用 CSS 设置好盒子样式，然后摆放到相应位置。 往盒子里面装内容 2、盒子模型（Box Model）组成 盒子模型：把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容3、边框（border）3.1、边框的使用1、border可以设置元素的边框。边框有三部分组成：边框宽度(粗细) 边框样式 边框颜色；2、语法： border : border-width || border-style || border-color; 边框样式 border-style 可以设置如下值： none：没有边框即忽略所有边框的宽度（默认值） solid：边框为单实线(最为常用的) dashed：边框为虚线 dotted：边框为点线 3、边框的合写分写边框简写： border: 1px solid red; 边框分开写法： border-top: 1px solid red; /* 只设定上边框， 其余同理 */ 3.2、表格的细线边框1、border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。2、语法： border-collapse:collapse; collapse 单词是合并的意思border-collapse: collapse; 表示相邻边框合并在一起3.3、边框会影响盒子实际大小边框会额外增加盒子的实际大小。因此我们有两种方案解决： 测量盒子大小的时候,不量边框。 如果测量的时候包含了边框,则需要 width/height 减去边框宽度 4、内边距（padding）4.1、内边距的使用方式1、padding 属性用于设置内边距，即边框与内容之间的距离。2、语法：合写属性：分写属性：4.2、内边距会影响盒子实际大小1、当我们给盒子指定 padding 值之后，发生了 2 件事情： 内容和边框有了距离，添加了内边距。 padding影响了盒子实际大小。 2、内边距对盒子大小的影响： 如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。 如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。 3、解决方案： 如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。5、外边距（margin）5.1、外边距的使用方式margin 属性用于设置外边距，即控制盒子和盒子之间的距离。5.2、外边距典型应用外边距可以让块级盒子水平居中的两个条件： 盒子必须指定了宽度（width）。 盒子左右的外边距都设置为 auto 。 常见的写法，以下三种都可以：margin-left: auto; margin-right: auto; margin: auto; margin: 0 auto; 注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。5.3、外边距合并使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。主要有两种情况:1、相邻块元素垂直外边距的合并 当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。解决方案：尽量只给一个盒子添加 margin 值。2、嵌套块元素垂直外边距的塌陷 对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。解决方案： 可以为父元素定义上边框。 可以为父元素定义上内边距。 可以为父元素添加 overflow:hidden。 5.4、清除内外边距 网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。 * { padding:0; /* 清除内边距 */ margin:0; /* 清除外边距 */ } 注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了三、PS 基本操作 因为网页美工大部分效果图都是利用 PS（Photoshop）来做的，所以以后我们大部分切图工作都是在 PS 里面完成。 部分操作： 文件→打开 ：可以打开我们要测量的图片 Ctrl+R：可以打开标尺，或者 视图→标尺 右击标尺，把里面的单位改为像素 Ctrl+ 加号(+)可以放大视图， Ctrl+ 减号(-)可以缩小视图 按住空格键，鼠标可以变成小手，拖动 PS 视图 用选区拖动 可以测量大小 Ctrl+ D 可以取消选区，或者在旁边空白处点击一下也可以取消选区
