目录
CSS选择器优先级
<!DOCTYPE html> <html lang="en"head> Meta charset="UTF-8"title>Title</style> /* css继承效果 优先级为0 */ 元素选择器 优先级为1 */ div{ color: red; } span blue} 类值选择器 优先级为10 .c1 green .c2 purple id选择器 优先级为100 #d1 aqua !important 优先级为最高 antiquewhite!important 多级选择器，优先级累加，但是不进位 意思就是11个类值选择器比不过1个id选择器 .c1 .c2 seagreen} bodydiv class="c1"> div1111 <!-- 内联样式 优先级为1000 --> span ="c2" id="d1" style="color: orange">span1111spandivhtml>
关于css选择器优先级的总结
补充：margin是可以设置百分比的
> .cc height 100px; width 600px border 1px solid red 50px background-color; 给margin设置百分比 margin-left 10%="cc"> ></>
实现效果如下所示
JS
1.JS全称Javascript
2.JS现在最常用的两个版本是ECMAjavascript5和ECMAjavascript6
3.ECMAjavascript的三部分:
a.ECMAjavascript的核心是js代码
b.BOM（浏览器对象模型）：js操作浏览器，帮助你做事情
c.DOM（HTML文档对象模型）：通过js代码控制html文档中的所有元素（标签，标签属性，文本内容，css样式等等）
1.js代码的引入方式
方式1：script标签中写js代码 --> script js代码 方式2：创建.js结尾的文件，写js代码，通过script标签的src属性来引入（建议放到body标签下面） script src="xx.js">
2.变量
var a = 10; // 声明变量 var b; 只声明没有赋值，默认值为undefined
3.数据类型
数值类型(number)
var a = 11; var b = 11.11typeof a; number typeof b; number // + - * / % 都行,没有取整
字符串类型(string)
var s = '我爱我的家'typeof s; "string" 索引取值 s[0] "我" s.charat(1); "爱" 切片 s.substring(起始值,结束值); 都是索引值 s.substring(2,4); "我的" var a = ' hello '; a.trim(); 移除两端空格 a.trimLeft(); 移除左边的空格 a.trimRight(); 移除右边的空格
布尔类型(boolean)
js中的bool类型的true和false都是小写 true false
underfine和null类型
undefined 变量声明了,但是没有赋值,此时这个变量是undefined类型 null 变量不用了,就可以给变量赋值为null,--- object类型
4.数组(类似于python中的列表)
头部/尾部 追加或移除元素
var name = [11,22,33]; 数组常用方法: names[0] 索引,索引也是从0开始的 names.push(ele) 尾部追加元素 示例:names.push('xx'); -- [11,33,"xx"] var ele = names.obj.pop() 尾部移除一个元素 示例:names.pop(); -- [11,33] names.unshift(ele) 头部插入元素 示例:names.unshift('ssss'); -- ["ssss",11,33] var ele = obj.shift() 头部移除一个元素 示例:names.shift(); -- [11,33]
splice：删除和替换
] names.splice(从哪删(索引),删几个(个数),删除位置替换的新元素(可不写,可写多个)) names.splice(index,ele) 在指定索引位置插入元素 示例:names.splice(2,'ele'); --[11,"ele",1)"> names.splice(index,1,1)"> 指定索引位置替换元素 示例：names.splice(1,1,'kkk'); -- [11,"kkk",1) 指定位置删除元素names.slice(start,end) 切片 示例:names.slice(1,3); -- [22,1)"> names.reverse() 原数组反转 示例:a.reverse(); -- [33,11] names.join(sep) 将数组元素连接起来以构建一个字符串 示例: var a = ['ni','hao','ma',18] a.join('+'); -- "ni+hao+ma+18" names.concat(val,..) 连接数组示例: var a = [11,22]; var b = ['aa','bb'] var c = a.concat(b); c -- [11,"aa","bb"] names.sort() 对原数组进行排序 需要自己定义规则: function compare(a,b){ return a - b; 当大于0时,两个数据换位置 }; 使用: a.sort(compare); 升序排列
5.自定义对象类型(类似于python中的字典)
var a = {username:'xx',password:'123'}; key可以不加引号 typeof info; "object" 常用方法 var val = info['name'] 获取,通过键取值必须加引号, var val = info.name info.name 也是可以的 info['age'] = 20 修改 info['gender'] = 'male' 新增 delete info['age'] 删除
在js中，创建一个string字符串对象的语法：
创建一个string字符串对象 var a = new String('ss') typeof a; 'object'
6.if判断
var a = 0; if(a > 1){ console.log('1111'); }else if(a<1){ console.log('2222'else { console.log('3333'); }
7.运算符
比较运算符
js中的比较运算符有 > < == != >= <= === !== var a = '11'var b = 11; a == b; 弱等于 只判断数值大小 并不判断数据类型 true a === b; 强等于 会判断数据类型是否一致 false a != b; 弱不等于 a !== b; 强不等于 true
算术运算符
js中的算术运算符有 + - * / % ++ -- ++ 自增 1 -- 自减 1 var a = 3 a++ 先执行逻辑 在+1 ++a 先+1 在执行逻辑 简单示例: if (++a === 4){ 先加1，再执行逻辑，所以这个条件成立，打印xxx console.log('xxx'); } { console.log('ooo'); };
8.for循环
1.循环数组 方式1： for (var i in a){ console.log(i,a[i]); } 方式2 var i=0;i<a.length;i++){ console.log(i,a[i]); } 2.循环自定义对象 var d = {name:'chao',age:18}; d){ console.log(i,d[i]); } 不能用下面的属性取值的方法 9.while循环; while (a < 10){ console.log(a); 打印 0 1 2 3 4 5 6 7 8 9 a++; }10.函数
普通函数
f1(a,b){ return a+b; } 执行: f1(1,2); -- 3 注意：不能返回多个值 return a,b; }; 执行：f1(1,2); -- 2[return不能返回多个值]匿名函数
匿名函数：function后面没有跟名字 (a,b){ console.log('xxx'); } 在value中定义一个函数，通过变量名.键(参数) 执行函数 var d = {'xx':'oo','f':); }}; 执行:d.f(1,2);自执行函数
用CSS写一个小米商城的导航栏
HTML部分
link rel="stylesheet" href="xiaomi.css"="nav"="nav-content clearfix"> ="nav-left"> a href="" class="nav-link">小米商城a> ="shugang">|>Miui>LoT>云服务>金融>有品>小爱开放平台>企业团购>资质证照>协议规则>智能生活>Select Location="cart-part"="nav-link cart">购物车 (0)="cart-list hide"="nav-right">登录>注册>消息通知>CSS部分
/* 清除左上的小空白 */ body{ margin: 0; padding: 0; } 长方形黑框 .nav{ height: 40px; background-color: #333333; line-height: 40px; } 防止父级标签塌陷 .clearfix:after{ content: ''; display: block; clear: both; } 让整个内容向右偏移5% 并且内容占90% 所以右边也占5% 保持左右对称 .nav-content{ margin-left: 5%; width: 90%; position: relative; } 左部分内容和右部分内容浮动 离左右40px .nav-content .nav-left{ float: left; 40px; } .nav-content .nav-right{ right; 40px; } 设置内容里面所有a标签的样式 .nav-content a{ color: #b0b0b0; text-decoration: none; font-size: 12px; } 设置所有竖杠的样式 .nav-content .shugang{ #424242; } 购物车 (0)的位置 .cart-part{ right; } 设置购物车小块块的样式 .cart-part .cart{ inline-block; 120px; #424242; text-align: center; } 触碰购物车会出现一个下拉框 */ 原本display是none 当触碰购物车时会变为block状态 在block块级标签状态下可与设置高度宽度等参数 .cart-part:hover .cart-list{ block; } 触碰购物车下拉框的样式 .cart-list{ 100px; 320px; absolute; right: top: red; } 隐藏 .hide{ none; }实现效果
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
