CSS
关注
分享
扫一扫
文章平均质量分 94
最爱琴女E
哈哈哈哈哈哈哈哈哈
展开
-
Javascript笔记大全03
BOM简介BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象使window区别DOM文档对象模型DOM就是把【文档】当做是一个【对象】来看待DOM的顶级对象是documentDOM主要学习的是操作页面元素DOM是W3C标准规范BOM浏览器对象模型把【浏览器】当做是一个【对象】来看待BOM的顶级对象是windowBOM学习的是浏览器窗口交互的一些对象BOM是浏览器厂商在各自浏览器上定义的，兼容性较差原创 2021-08-14 16:30:02 · 524 阅读 · 0 评论 -
Javascript笔记大全02
DOM简介文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口DOM树窗口加载事件// 为window绑定一个onload事件window.onload = function() {}或者window.addEventListener('load',function() {});// 该事件对应的响应函数将会在页面加载完成之后执行// 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了原创 2021-08-03 17:58:32 · 460 阅读 · 0 评论 -
HTML+CSS笔记大全，之后会持续更新~
HTML第一个HTML页面<!-- 1.这是HTML的注释 2.加上以下代码的第一行就表示HTML5语法，去掉就表示HTML4.0 3.HTML不区分大小写，语法松散不严格--><!doctype html><!--根--><html> <!--头--> <head> <!--网页标题，显示在网页左上角--> <title>网页的标题</title> </h原创 2021-07-23 18:39:20 · 870 阅读 · 1 评论 -
Js笔记05
简单类型与复杂类型简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型string、number、Boolean、undefined、null引用类型：复杂数据类型，在存储变量中存储的仅仅是地址（引用），因此叫做引用数据类型通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等<!DOCTYPE html><html> <head>原创 2021-07-20 17:11:40 · 518 阅读 · 1 评论 -
Js笔记04
预解析JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步：预解析和代码执行<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> // 1 console.l原创 2021-06-29 14:46:47 · 158 阅读 · 0 评论 -
JS笔记02
算术运算符概念：算术运算使用的符号，用于执行两个变量或值的算术运算运算符描述实例+加10 + 20 = 30-减10 - 20 = -10*乘10 * 20 = 200/除10 / 20 = 0.5%取余数（取模）返回除去的余数9 % 2 = 1<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>原创 2021-06-18 17:02:02 · 342 阅读 · 0 评论 -
CSS笔记11 2D与3D转换
2D转换转换（transform）是CSS中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果移动：translate旋转：rotate缩放：scale移动translate2D移动是2D转换里面的一种功能，可以改变元素再在页面中的位置，类似定位语法transform:translate(x,y);或者分开写transform:translateX(n);transform:translateY(n);<!DOCTYPE html><html>原创 2021-06-13 17:36:21 · 243 阅读 · 0 评论 -
练习---仿品优购项目
购物项目搭建工作1.需要创建如下文件夹名称说明项目文件夹shopping样式类图片文件夹images样式文件夹css产品类图片文件夹upload字体类文件夹fonts脚本文件夹js2.创建如下文件名称说明首页index.htmlCSS初始化样式文件base.cssCSS公共样式文件common.cssindex文件<!DOCTYPE html><html> &原创 2021-06-09 16:46:21 · 357 阅读 · 0 评论 -
CSS学习笔记10H5与CSS3的部分新特性
HTML5的新特性新增的语义化标签header ：头部标签nav ：导航标签article ：内容标签section ：定义文档某个区域aside ：侧边栏标签footer ：尾部标签注意：这种语义化标准主要是针对搜索引擎的这些新标签页面中可以使用多次在IE9中，需要把这些元素转换为块级元素其实，我们移动端更喜欢使用这些标签<!DOCTYPE html><html> <head> <meta charset="utf-8"&原创 2021-05-27 15:51:17 · 135 阅读 · 0 评论 -
CSS学习笔记9
精灵图精灵技术目的：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度精灵图的使用核心总结：精灵图主要针对于小的背景图片使用主要借助于背景位置来实现—background-position一般情况下精灵图都是负值（千万注意网页中的坐标：x轴右边走是正值，左边走是负值，y轴同理）<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>精灵图使用<转载 2021-05-27 15:42:36 · 195 阅读 · 0 评论 -
CSS学习笔记8 定位与显示、隐藏
定位将盒子定在某一个位置，所有定位也是在摆放盒子，按照定位的方式移动盒子定位 = 定位模式 + 边偏移定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置定位模式定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：值语义static静态定位relative相对定位absolute绝对定位fixed固定定位边偏移边偏移就是定位的盒子移动到最终位置，有4个属性边偏移属性示例描原创 2021-05-18 15:54:56 · 330 阅读 · 0 评论 -
CSS学习笔记7PS切图与仿学成在线例子
PS切图常见的图片格式jpg，产品类的图片经常使用gif，实际经常用于一些图片小动画效果png，如果想要切成背景透明的图片，请选择png格式PSD，可以直接从上面复制文字，获得图片，还可以测量大小和距离PS有很多切图方式：图层切图、切片切图、PS插件切图等图层切图最简单的切图方式：右击图层—>快速导出为PNG但是很多情况下，我们需要合并图层再导出：选中需要的图层：图层菜单—>合并图层（Ctrl + e）右击—>快速导出为PNG切片切图利用切片选中图片原创 2021-05-15 15:10:24 · 332 阅读 · 1 评论 -
CSS学习笔记6
圆角边框（重点）在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了语法border-radius:length;radius半径（圆的半径）原理：圆与边框的交集形成圆角效果<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>圆角边框</title> <style type="text/css"> .yuanxing原创 2021-05-11 16:10:26 · 172 阅读 · 0 评论 -
CSS学习笔记5CSS的三大特性与盒子模型
CSS的三大特性CSS有三个非常重要的特性：层叠性、继承性、优先级。层叠性相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一种冲突的样式。层叠性主要是解决样式冲突的问题层叠性原则：样式冲突，遵循的原则就是就近原则，哪个样式离结构近，就执行哪个样式样式不冲突，不会层叠<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS层叠性</tit原创 2021-04-29 16:03:52 · 211 阅读 · 0 评论 -
CSS学习笔记4CSS的背景以及属性
CSS的背景通过背景属性，可以给页面元素添加背景样式背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等背景颜色background-color属性定义了元素的背景颜色background-color:颜色值;一般情况下元素背景颜色默认值是transparent（透明），我们也可以手动指定背景颜色为透明<!DOCTYPE html><html> <head> <meta charset="utf-8"> <原创 2021-04-19 16:13:19 · 172 阅读 · 0 评论 -
CSS学习笔记3Emmet语法、复合选择器、元素显示模式
Emmet语法快速生成HTML结构语法生成标签直接输入标签名按tab键即可，比如输入div然后按tab键，就可以生成了若想生成多个相同的标签，加上*就可以了，比如 div * 3（别有空格）再按tab键就可以快速生成3个div了若有父子级关系的标签，可以用> 比如 ul>li若有兄弟关系的标签，用+ 比如 div+p若生成带有类名或者id名字的，直接写 .demo 或者 #two tab键就可以了p.one按tab键后如下<p class="one"></原创 2021-04-15 16:27:42 · 250 阅读 · 0 评论 -
CSS学习笔记2字体属性和文本属性
CSS字体属性CSS Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式字体系列CSS使用font-family属性定义文本的字体系列p { font-family:"微软雅黑";}div {font-family: Arial,"Microsoft Yahei","微软雅黑";}各种字体之间必须使用英文状态下的逗号隔开一般情况下，如果有空格隔开的多个单词组成的字体加引号尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示最常见的几个字体：body { font-f原创 2021-04-11 16:18:04 · 320 阅读 · 0 评论 -
CSS学习笔记1css引入方式和选择器
CSSCSS（Cascading Style Sheet）：层叠样式表语言CSS的作用：修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。HTML引入CSS的三种方式第一种在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式语法格式：<标签 style = "样式名:样式值; 样式名:样式值; 样式名:样式值; ..."></标签><!DOCTYPE html><html> <hea原创 2021-04-10 16:19:01 · 123 阅读 · 1 评论 -
HTML精简笔记
概述HTML：Hyper Text Markup Language（超文本标记语言）由大量的标签组成，每一个标签都有开始和结束标签HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htmHTML也有专业的开发工具，例如：DreamWeaver、HBuilder…直接采用浏览器打开HTML文件就是运行第一个HTML页面<!-- 1.这是HTML的注释 2.加上以下代码的第一行就表示HTML5语法，去掉就表示HTML4.0 3.HTML不区分大小写，语法原创 2021-04-08 16:35:49 · 256 阅读 · 2 评论 -
CSS笔记
概述什么是CSS，有什么用？CSS（Cascading Style Sheet）：层叠样式表语言CSS的作用：修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。HTML引入CSS的三种方式第一种方式在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式语法格式：<标签 style = "样式名:样式值; 样式名:样式值; 样式名:样式值; ..."></标签><!DOCTYPE html><htm原创 2020-12-18 17:18:10 · 85 阅读 · 1 评论