1.  

目录

1.CSS选择器优先级

2.补充：margin是可以设置百分比的

3.JS

　　3.1 js代码的引入方式

　　3.2 变量

　　3.3 数据类型

　　3.4 数组(类似于python中的列表)

　　3.5 自定义对象类型(类似于python中的字典)

　　3.6 if判断

　　3.7 运算符

　　3.8 for循环

　　3.9 while循环

　　3.10 函数

4.作业：使用CSS实现小米商城的导航栏

CSS选择器优先级

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         /* css继承效果 优先级为0 */
  8.         /* 元素选择器 优先级为1 */
  9.         div{
  10.             color: red;
  11.         }
  12.         span{
  13.             color: blue;
  14.         }
  15.         /* 类值选择器 优先级为10 */
  16.         .c1{
  17.             color: green;
  18.         }
  19.         .c2{
  20.             color: purple;
  21.         }
  22.         /* id选择器 优先级为100 */
  23.         #d1{
  24.             color: aqua;
  25.         }
  26.         /* !important 优先级为最高 */
  27.         #d1{
  28.             color: antiquewhite!important;
  29.         }
  30.         /* 多级选择器，优先级累加，但是不进位 */
  31.         /* 意思就是11个类值选择器打不过1个id选择器 */
  32.         .c1 .c2{
  33.             color: seagreen;
  34.         }
  35.     </style>
  36. </head>
  37. <body>
  38.     <div class="c1">
  39.         div1111
  40.         <!-- 内联样式 优先级为1000 -->
  41.         <span class="c2" id="d1" style="color: orange">span1111</span>
  42.     </div>
  43. </body>
  44. </html>

关于css选择器优先级的总结

补充：margin是可以设置百分比的

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .cc{
  8.             height: 100px;
  9.             width: 600px;
  10.             border: 1px solid red;
  11.         }
  12.         .c1{
  13.             height: 50px;
  14.             width: 100px;
  15.             background-color: green;
  16.             /* 给margin设置百分比 */
  17.             margin-left: 10%;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div class="cc">
  23.         <div class="c1"></div>
  24.     </div>
  25. </body>
  26. </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. <!-- 方式1：script标签中写js代码 -->
  2.     <script>
  3.         js代码
  4.     </script>
  5. <!-- 方式2：创建.js结尾的文件，写js代码，通过script标签的src属性来引入（建议放到body标签下面） -->
  6.     <script src="xx.js"></script>

2.变量

  1. var a = 10;  // 声明变量
  2. var b;   // 只声明没有赋值，默认值为undefined

3.数据类型

数值类型(number)

  1. var a = 11;
  2. var b = 11.11;
  3. typeof a;  // number
  4. typeof b;  // number
  5. // + - * / % 都行,没有取整

字符串类型(string)

  1. var s = '我爱我的家';
  2. typeof s;  "string"
  3. // 索引取值
  4. s[0] // "我"
  5. s.charAt(1); // "爱"
  6. // 切片 s.substring(起始值,结束值); 都是索引值
  7. s.substring(2,4); // "我的"
  8. var a = '  hello  ';
  9. a.trim(); // 移除两端空格
  10. a.trimLeft(); // 移除左边的空格
  11. a.trimRight(); // 移除右边的空格

布尔类型(boolean)

  1. // js中的bool类型的true和false都是小写
  2. true
  3. false

underfine和null类型

  1. undefined // 变量声明了,但是没有赋值,此时这个变量是undefined类型
  2. null // 变量不用了,就可以给变量赋值为null,--- object类型

4.数组(类似于python中的列表)

头部/尾部 追加或移除元素

  1. var name = [11,22,33];
  2.  
  3. // 数组常用方法:
  4. names[0] // 索引,索引也是从0开始的
  5.  
  6. names.push(ele) // 尾部追加元素
  7. // 示例:names.push('xx'); --  [11, 22, 33, "xx"]
  8.  
  9. var ele = names.obj.pop() // 尾部移除一个元素
  10. // 示例:names.pop(); -- [11, 22, 33]
  11.  
  12. names.unshift(ele) // 头部插入元素
  13. // 示例:names.unshift('ssss'); --  ["ssss", 11, 22, 33]
  14.  
  15. var ele = obj.shift() // 头部移除一个元素
  16. // 示例:names.shift(); --  [11, 22, 33]

splice：删除和替换

  1. var name = [11,22,33]
  2. // names.splice(从哪删(索引),删几个(个数),删除位置替换的新元素(可不写,可写多个))
  3. names.splice(index,0,ele) // 在指定索引位置插入元素
  4. // 示例:names.splice(2,0,'ele'); --[11, 22, "ele", 33]
  5.  
  6. names.splice(index,1,ele) // 指定索引位置替换元素
  7. // 示例：names.splice(1,1,'kkk'); -- [11, "kkk", "ele", 33]
  8.  
  9. names.splice(index,1) // 指定位置删除元素
  10. // 示例：names.splice(1,2); -- [11, 33]

其他

  1. names.slice(start,end) // 切片
  2. // 示例:names.slice(1,3); --  [22, 33]
  3.  
  4. names.reverse() // 原数组反转
  5. // 示例:a.reverse(); -- [33, 22, 11]
  6.  
  7. names.join(sep)// 将数组元素连接起来以构建一个字符串
  8. // 示例: var a = ['ni','hao','ma',18]
  9. //        a.join('+'); -- "ni+hao+ma+18"
  10.  
  11. names.concat(val,..) // 连接数组
  12. //示例: var a = [11,22]; var b = ['aa','bb']
  13. // var c = a.concat(b); c -- [11, 22, "aa", "bb"]
  14.  
  15. names.sort()// 对原数组进行排序
  16.     // 需要自己定义规则:
  17.         function compare(a,b){
  18.            return a - b; // 当大于0时,两个数据换位置
  19.         };
  20.         // 使用: a.sort(compare); 升序排列

5.自定义对象类型(类似于python中的字典)

  1. var a = {username:'xx',password:'123'}; // key可以不加引号
  2. typeof info; // "object"
  3.  
  4. // 常用方法
  5. var val = info['name'] // 获取,通过键取值必须加引号,
  6. var val = info.name //info.name 也是可以的
  7. info['age'] = 20 // 修改
  8. info['gender'] = 'male' // 新增
  9. delete info['age'] // 删除

在js中，创建一个string字符串对象的语法：

  1. // 创建一个string字符串对象
  2. var a = new String('ss')
  3. typeof a; 'object'

6.if判断

  1.  var a = 0;
  2.     if(a > 1){
  3.         console.log('1111');
  4.     }else if(a<1){
  5.         console.log('2222');
  6.     }else {
  7.         console.log('3333');
  8.     }

7.运算符

比较运算符

  1. // js中的比较运算符有 > < == !=  >=  <=   ===  !==
  2. var a = '11';
  3. var b = 11;
  4.  
  5. a == b; // 弱等于 只判断数值大小 并不判断数据类型
  6. true
  7. a === b; // 强等于 会判断数据类型是否一致
  8. false
  9. a != b; // 弱不等于
  10. false
  11. a !== b; // 强不等于
  12. true

算术运算符

  1. // js中的算术运算符有 +  -  * / %   ++  --
  2. // ++ 自增 1
  3. // -- 自减 1
  4.  
  5. var a = 3;
  6. // a++  先执行逻辑  在+1
  7. // ++a  先+1 在执行逻辑
  8.  
  9. 简单示例:
  10.     if (++a === 4){ // 先加1，再执行逻辑，所以这个条件成立，打印xxx
  11.         console.log('xxx');
  12.     }
  13.     else{
  14.         console.log('ooo');
  15.     };

8.for循环

  1. // 1.循环数组
  2. // 方式1：
  3. for (var i in a){
  4.     console.log(i,a[i]);
  5. }
  6. // 方式2
  7. for (var i=0;i<a.length;i++){
  8.     console.log(i,a[i]);
  9. }
  10.  
  11. // 2.循环自定义对象
  12. var d = {name:'chao', age:18};
  13. for (var i in d){
  14.     console.log(i,d[i]);
  15. }
  16. // 不能用下面的属性取值的方法
  17. for (var i in d){
  18.     console.log(i,d.i);
  19. }

9.while循环

  1. var a = 0;
  2.  
  3. while (a < 10){
  4.     console.log(a); // 打印 0 1 2 3 4 5 6 7 8 9
  5.     a++;
  6. }

10.函数

普通函数

  1. function f1(a,b){
  2.     return a+b;
  3. }
  4. // 执行: f1(1,2); -- 3
  5.  
  6. // 注意：不能返回多个值
  7. function f1(a,b){
  8.     return a,b;
  9. };
  10. // 执行：f1(1,2); -- 2[return不能返回多个值]

匿名函数

  1. // 匿名函数：function后面没有跟名字
  2. var a = function (a,b){
  3.     console.log('xxx');
  4. }
  5.  
  6. // 在value中定义一个函数，通过变量名.键(参数) 执行函数
  7. var d = {'xx':'oo','f':function (a,b){
  8.     console.log('xxx');
  9. }};
  10. // 执行:d.f(1,2);

自执行函数

  1. // 定义function，并且整个function都用括号包起来
  2. // 在括号外面加上（）来执行function函数
  3. (function () {
  4.     alert('自执行函数!')
  5. })()

用CSS写一个小米商城的导航栏

HTML部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="xiaomi.css">
  7. </head>
  8. <body>
  9.     <div class="nav">
  10.         <div class="nav-content clearfix">
  11.             <div class="nav-left">
  12.                 <a href="" class="nav-link">小米商城</a> <span class="shugang">|</span>
  13.                 <a href="" class="nav-link">MIUI</a> <span class="shugang">|</span>
  14.                 <a href="" class="nav-link">LoT</a> <span class="shugang">|</span>
  15.                 <a href="" class="nav-link">云服务</a> <span class="shugang">|</span>
  16.                 <a href="" class="nav-link">金融</a> <span class="shugang">|</span>
  17.                 <a href="" class="nav-link">有品</a> <span class="shugang">|</span>
  18.                 <a href="" class="nav-link">小爱开放平台</a> <span class="shugang">|</span>
  19.                 <a href="" class="nav-link">企业团购</a> <span class="shugang">|</span>
  20.                 <a href="" class="nav-link">资质证照</a> <span class="shugang">|</span>
  21.                 <a href="" class="nav-link">协议规则</a> <span class="shugang">|</span>
  22.                 <a href="" class="nav-link">智能生活</a> <span class="shugang">|</span>
  23.                 <a href="" class="nav-link">Select Location</a>
  24.             </div>
  25.             <div class="cart-part">
  26.                 <a href="" class="nav-link cart">购物车 (0)</a>
  27.                 <div class="cart-list hide"></div>
  28.             </div>
  29.             <div class="nav-right">
  30.                 <a href="" class="nav-link">登录</a> <span class="shugang">|</span>
  31.                 <a href="" class="nav-link">注册</a> <span class="shugang">|</span>
  32.                 <a href="" class="nav-link">消息通知</a>
  33.             </div>
  34.         </div>
  35.     </div>
  36. </body>
  37. </html>

CSS部分

  1. /* 清除左上的小空白 */
  2. body{
  3.     margin:;
  4.     padding:;
  5. }
  6.  
  7. /* 长方形黑框 */
  8. .nav{
  9.     height: 40px;
  10.     background-color: #333333;
  11.     line-height: 40px;
  12. }
  13.  
  14. /* 防止父级标签塌陷 */
  15. .clearfix:after{
  16.     content: '';
  17.     display: block;
  18.     clear: both;
  19. }
  20.  
  21. /* 左部分内容和右部分内容浮动 离左右40px */
  22. .nav-content .nav-left{
  23.     float: left;
  24.     height: 40px;
  25. }
  26. .nav-content .nav-right{
  27.     float: right;
  28.     height: 40px;
  29. }
  30. /* 设置内容里面所有a标签的样式 */
  31. .nav-content a{
  32.     color: #b0b0b0;
  33.     text-decoration: none;
  34.     font-size: 12px;
  35. }
  36. /* 设置所有竖杠的样式 */
  37. .nav-content .shugang{
  38.     color: #424242;
  39. }
  40.  
  41. /* 购物车 (0)的位置 */
  42. .cart-part{
  43.     float: right;
  44. }
  45. /* 设置购物车小块块的样式 */
  46. .cart-part .cart{
  47.     display: inline-block;
  48.     height: 40px;
  49.     width: 120px;
  50.     background-color: #424242;
  51.     text-align: center;
  52. }
  53.  
  54. /* 触碰购物车会出现一个下拉框 */
  55. /* 原本display是none 当触碰购物车时会变为block状态*/
  56. /* 在block块级标签状态下可与设置高度宽度等参数 */
  57. .cart-part:hover .cart-list{
  58.     display: block;
  59. }
  60. /* 触碰购物车下拉框的样式 */
  61. .cart-list{
  62.     height: 100px;
  63.     width: 320px;
  64.     position: absolute;
  65.     right:;
  66.     top: 40px;
  67.     background-color: red;
  68. }
  69. /* 隐藏 */
  70. .hide{
  71.     display: none;
  72. }

实现效果

day44:CSS选择器优先级&JS基础的更多相关文章

  1. 看完就懂--CSS选择器优先级的计算

    CSS选择器优先级的计算 什么是选择器的优先级 优先级的计算与比较(一) - 优先级具有可加性 - 选择器优先级不会超过自身最大数量级 - 同等优先级情况下,后写的覆盖前写的 - 并集选择器之间的优先 ...

  2. 关于Css选择器优先级

    今天练习css的时候,重叠后的style发现不起作用,原来css选择器优先级大有文章. 声明: yi下内容选自 51cto.com  --加以自己的理解 以备日后参照使用,毕竟自己理解的才是自己的. ...

  3. 深入理解CSS选择器优先级

    题外话 今天把 <CSS REFACTORING>(中文名叫<CSS重构:样式表性能调优>)电子书粗略的浏览了一遍,这本书很薄,150页左右,首先是介绍了什么是重构并举了两个简 ...

  4. CSS选择器优先级（转）

    原文:http://www.cnblogs.com/wangfupeng1988/p/4285251.html 另外,w3c有文章介绍了CSS选择器的特定性,见https://www.w3.org/T ...

  5. CSS选择器优先级 CSS权值

    计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1  ID的权值为 0,1,0,0 important的权值为最高 ...

  6. 深入理解CSS选择器优先级的计算

    选择器的优先级关系到元素应用哪个样式.在CSS2.1的规范(http://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#specificity)中是 ...

  7. CSS选择器优先级总结

    CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  8. 导航栏布局时遇到的问题以及解决办法 css选择器优先级

    得到的导航栏效果 添加#menu ul li{width:30px;} 效果如图 将会使列表项和分隔区域的宽度同时改变因为id选择器的优先级高于类选择器,此时应该为列表项添加内联样式如图 才能得到如下 ...

  9. 前端CSS css引入方式 css选择器 css选择器优先级

    一.       CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表 ...

随机推荐

  1. loj #6177. 「美团 CodeM 初赛 Round B」送外卖2 状压dp floyd

    LINK:#6177.美团 送外卖2 一道比较传统的状压dp题目. 完成任务 需要知道自己在哪 已经完成的任务集合 自己已经接到的任务集合. 考虑这个dp记录什么 由于存在时间的限制 考虑记录最短时间 ...

  2. idea修改module name后重启失效

    技术交流群 : 816227112 idea每次修改module name后重启,module还是会在后面加上原来的name. 这时修改: .idea下的modules.xml 内的module名即可 ...

  3. .Net Core下基于Emit的打造AOP

    之前的基于DispatchProxy的AOP组件,实现了属性注入,但是这个依旧有很多限制 比如不支持构造器注入,继承DispatchProxy的子类必须是公开类 个人有点代码洁癖,不喜欢这种不能控制的 ...

  4. 移动物体监控系统-sprint1声音报警子系统

    一.声卡驱动开发 1.1 声卡驱动架构 ——OSS开放式音频系统,声卡驱动中传统的OSS构架在02年被收购后即不开源,并且OSS的混音效果不好,因为产生了ALSA ——AlSA Linux系统高级音频 ...

  5. WebService简单Demo

    看了网上好多关于webservice的例子,基本上对初学者来说都是模棱两可云里雾里,现在,我将网上关于webservice的讲解提炼出来,通过一个最简单使用并且方便的例子,告诉大家什么是webserv ...

  6. Linux 中文编码

  7. RabbitMQ 基础概念进阶

    上一篇 RabbitMQ 入门之基础概念 介绍了 RabbitMQ 的一些基础概念,本文再来介绍其中的一些细节和其它的进阶的概念. 一.消息生产者发送的消息不可达时如何处理 RabbitMQ 提供了消 ...

  8. Python中json.dump与repr的区别

    Json是一种轻量级的数据交换格式,Python3 中可以使用 json 模块来对 JSON 数据进行编解码,它包含了两个函数: 引入json包: import json json.dumps(): ...

  9. 面试中的老大难-mysql事务和锁，一次性讲清楚！

    众所周知,事务和锁是mysql中非常重要功能,同时也是面试的重点和难点.本文会详细介绍事务和锁的相关概念及其实现原理,相信大家看完之后,一定会对事务和锁有更加深入的理解. 本文主要内容是根据掘金小册& ...

  10. 面经手册 · 第4篇《HashMap数据插入、查找、删除、遍历，源码分析》

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 在上一章节我们讲解并用数据验证了,HashMap中的,散列表的实现.扰动函数.负载因 ...