这是一个删除不掉的代码区！！我也没办法
目录
CSS选择器优先级
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* css继承效果 优先级为0 */ /* 元素选择器 优先级为1 */ div{ color: red; } span{ color: blue; } /* 类值选择器 优先级为10 */ .c1{ color: green; } .c2{ color: purple; } /* id选择器 优先级为100 */ #d1{ color: aqua; } /* !important 优先级为最高 */ #d1{ color: antiquewhite!important; } /* 多级选择器，优先级累加，但是不进位 */ /* 意思就是11个类值选择器比不过1个id选择器 */ .c1 .c2{ color: seagreen; } </style> </head> <body> <div class="c1"> div1111 <!-- 内联样式 优先级为1000 --> <span class="c2" id="d1" style="color: orange">span1111</span> </div> </body> </html>
关于css选择器优先级的总结
补充：margin是可以设置百分比的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .cc{ height: 100px; width: 600px; border: 1px solid red; } .c1{ height: 50px; width: 100px; background-color: green; /* 给margin设置百分比 */ margin-left: 10%; } </style> </head> <body> <div class="cc"> <div class="c1"></div> </div> </body> </html>
实现效果如下所示
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代码 </script> <!-- 方式2：创建.js结尾的文件，写js代码，通过script标签的src属性来引入（建议放到body标签下面） --> <script src="xx.js"></script>
2.变量
var a = 10; // 声明变量 var b; // 只声明没有赋值，默认值为undefined
3.数据类型
数值类型(number)
var a = 11; var b = 11.11; typeof 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, 22, 33, "xx"] var ele = names.obj.pop() // 尾部移除一个元素 // 示例:names.pop(); -- [11, 22, 33] names.unshift(ele) // 头部插入元素 // 示例:names.unshift('ssss'); -- ["ssss", 11, 22, 33] var ele = obj.shift() // 头部移除一个元素 // 示例:names.shift(); -- [11, 22, 33]
splice：删除和替换
var name = [11,22,33] // names.splice(从哪删(索引),删几个(个数),删除位置替换的新元素(可不写,可写多个)) names.splice(index,0,ele) // 在指定索引位置插入元素 // 示例:names.splice(2,0,'ele'); --[11, 22, "ele", 33] names.splice(index,1,ele) // 指定索引位置替换元素 // 示例：names.splice(1,1,'kkk'); -- [11, "kkk", "ele", 33] names.splice(index,1) // 指定位置删除元素 // 示例：names.splice(1,2); -- [11, 33]
其他
names.slice(start,end) // 切片 // 示例:names.slice(1,3); -- [22, 33] names.reverse() // 原数组反转 // 示例:a.reverse(); -- [33, 22, 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, 22, "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; // 弱不等于 false a !== b; // 强不等于 true
算术运算符
// js中的算术运算符有 + - * / % ++ -- // ++ 自增 1 // -- 自减 1 var a = 3; // a++ 先执行逻辑 在+1 // ++a 先+1 在执行逻辑 简单示例: if (++a === 4){ // 先加1，再执行逻辑，所以这个条件成立，打印xxx console.log('xxx'); } else{ console.log('ooo'); };
8.for循环
// 1.循环数组 // 方式1： for (var i in a){ console.log(i,a[i]); } // 方式2 for (var i=0;i<a.length;i++){ console.log(i,a[i]); } // 2.循环自定义对象 var d = {name:'chao', age:18}; for (var i in d){ console.log(i,d[i]); } // 不能用下面的属性取值的方法 for (var i in d){ console.log(i,d.i); }
9.while循环
var a = 0; while (a < 10){ console.log(a); // 打印 0 1 2 3 4 5 6 7 8 9 a++; }
10.函数
普通函数
function f1(a,b){ return a+b; } // 执行: f1(1,2); -- 3 // 注意：不能返回多个值 function f1(a,b){ return a,b; }; // 执行：f1(1,2); -- 2[return不能返回多个值]
匿名函数
// 匿名函数：function后面没有跟名字 var a = function (a,b){ console.log('xxx'); } // 在value中定义一个函数，通过变量名.键(参数) 执行函数 var d = {'xx':'oo','f':function (a,b){ console.log('xxx'); }}; // 执行:d.f(1,2);
自执行函数
// 定义function，并且整个function都用括号包起来 // 在括号外面加上（）来执行function函数 (function () { alert('自执行函数!') })()
用CSS写一个小米商城的导航栏
HTML部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="xiaomi.css"> </head> <body> <div class="nav"> <div class="nav-content clearfix"> <div class="nav-left"> <a href="" class="nav-link">小米商城</a> <span class="shugang">|</span> <a href="" class="nav-link">MIUI</a> <span class="shugang">|</span> <a href="" class="nav-link">LoT</a> <span class="shugang">|</span> <a href="" class="nav-link">云服务</a> <span class="shugang">|</span> <a href="" class="nav-link">金融</a> <span class="shugang">|</span> <a href="" class="nav-link">有品</a> <span class="shugang">|</span> <a href="" class="nav-link">小爱开放平台</a> <span class="shugang">|</span> <a href="" class="nav-link">企业团购</a> <span class="shugang">|</span> <a href="" class="nav-link">资质证照</a> <span class="shugang">|</span> <a href="" class="nav-link">协议规则</a> <span class="shugang">|</span> <a href="" class="nav-link">智能生活</a> <span class="shugang">|</span> <a href="" class="nav-link">Select Location</a> </div> <div class="cart-part"> <a href="" class="nav-link cart">购物车 (0)</a> <div class="cart-list hide"></div> </div> <div class="nav-right"> <a href="" class="nav-link">登录</a> <span class="shugang">|</span> <a href="" class="nav-link">注册</a> <span class="shugang">|</span> <a href="" class="nav-link">消息通知</a> </div> </div> </div> </body> </html>
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; height: 40px; } .nav-content .nav-right{ float: right; height: 40px; } /* 设置内容里面所有a标签的样式 */ .nav-content a{ color: #b0b0b0; text-decoration: none; font-size: 12px; } /* 设置所有竖杠的样式 */ .nav-content .shugang{ color: #424242; } /* 购物车 (0)的位置 */ .cart-part{ float: right; } /* 设置购物车小块块的样式 */ .cart-part .cart{ display: inline-block; height: 40px; width: 120px; background-color: #424242; text-align: center; } /* 触碰购物车会出现一个下拉框 */ /* 原本display是none 当触碰购物车时会变为block状态*/ /* 在block块级标签状态下可与设置高度宽度等参数 */ .cart-part:hover .cart-list{ display: block; } /* 触碰购物车下拉框的样式 */ .cart-list{ height: 100px; width: 320px; position: absolute; right: 0; top: 40px; background-color: red; } /* 隐藏 */ .hide{ display: none; }
实现效果
