## CSS标签的隐藏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 100px; background-color: orange; border-radius: 50%; /*border-style: solid;*/ /*border- 1px;*/ /*border-color: red;*/ border: 1px solid red; background: url("img/001.png") no-repeat 0 0; font: normal 30px/100px 'Arial'; color: green; text-align: center; } .d1:hover ~ .d2 { display: block; } .d2 { /*不以任何方式显示，在页面中不占位，但重新显示，任然占位*/ display: none; } .d3 { /*修改盒子的透明度，值为0，完全透明，但在页面中占位*/ opacity: 0.5; } /*显示和影藏都不占位，用来做一些标签的显示影藏切换*/ </style> </head> <body> <div class="d1">1</div> <div class="d2">2</div> <div class="d3">3</div> <div class="d4">4</div> <div class="d5">5</div> </body> </html>
##CSS 盒子阴影
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; background-color: orange; margin: 100px auto; /*x轴偏移 y轴偏移 虚化程度 阴影宽度 颜色*/ box-shadow: 150px 0 10px 0 red, 0 150px 10px 0 green; } </style> </head> <body> <div></div> </body> </html>
##CSS定位布局
#1、定位布局引入 “”“ 学习完盒模型样式后，可以完成盒模型位置的改变，学习了浮动样式布局后，又能让默认上下排列显示的盒模型快速左右排列，但是仍然不好或不能完成一下两种样式布局需求： 需求1：在页面可以发生滚动的时候，盒模型能不能相当页面窗口是静止的，不会随着页面滚动而滚动（页面小广告） 需求2：父标签已经规定死了宽和高，多个子标签之间不相互影响位置布局，每个子标签自身相对于父级宽高提供的显示区域进行独立的位置布局 ”“” #2、固定定位： 1、一个标签要相对于窗口静止，采用固定定位 2、如果有多个固定定位标签，都是参考窗口，所以之间不相互影响，但可能出现图层重叠，通过 z-index 值绝对图层上下关系 #3、绝对定位： 1、一个标签要随着父级移动而移动(子级布局完毕后相对于父级位置是静止的)，且兄弟标签之间布局不影响(兄弟动，自身相对父级还是保持静止) 2、z-index 值能改变重叠的兄弟图层上下关系 3、子级相对的父级一定要 定位处理 （三种定位均可以） 父级要先于子级布局，所以子级在采用绝对定位时，父级一般已经完成了布局，如果父级采用了 定位 来完成的布局，子级自然就相当于父级完成 绝对定位 如果父级没有采用 定位 来完成的布局，我们要后期为父级增加 定位 处理，来辅助子级 绝对定位，父级的 定位 是后期增加的，我们要保证增加后不影响父级之前的布局，相对定位可以完成 #4、相对定位： 1、父相子绝 2、相对定位也存在独立使用，但是可以用盒模型完全取代，所以一般不用
##CSS定位案例
#案例一、固定定位**************************************************************************************************** <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { /* 当前页面窗口的宽高(锁屏幕尺寸变化而变化)：vw vh vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%） vh：视窗高度的百分比*/ height: 500vw; background-color: red; } .tag { width: 180px; height: 300px; background-color: orange; /*一旦打开定位属性，left、right、top、bottom四个方位词均能参与布局*/ /*固定定位参考浏览器窗口*/ /*布局依据：固定定位的盒子四边距浏览器窗口四边的距离：eg：left - 左距左，right - 右距右*/ /*左右取左，上下取上*/ position: fixed; left: 0; /*calc会计算，使用窗口一半的高度减去.tag标签的一半高度*/ top: calc(50% - 150px); right: 50px; bottom: 20px; } .flag { width: 220px; height: 330px; background-color: pink; position: fixed; left: 0; top: calc(50% - 165px); } .tag { /*z-index值就是大于等于1的正整数，多个重叠图层通过z-index值决定上下图层显示先后*/ z-index: 666; } .flag { z-index: 888; } </style> </head> <body> <div class="tag"></div> <div class="box"></div> <div class="flag"></div> </body> </html> #2、绝对定位和绝对定位结合案例**************************************************************************************************** <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width: 300px; height: 300px; background-color: orange; margin: 100px auto 0; } .s { width: 100px; height: 100px; font: normal 20px/100px 'Arial'; text-align: center; } .s1 { background-color: red } .s2 { background-color: pink } .s3 { background-color: green } .s { /*绝对定位：子标签获取不到父级标签的宽，也撑不开父级的高*/ /*子标签必须自己设置宽高，父级也必须自己设置宽高*/ position: absolute; /*绝对定位的标签都是相对于一个参考系进行定位，直接不会相互影响*/ /*参考系：最近的定位父级*/ /*打开了四个定位方位*/ /*上距上...下距下*/ /*上下去上、左右取左*/ } .box { /*子级采用绝对定位，一般都是想参考父级进行定位，父级必须采用定位处理才能作为子级的参考系*/ /*父级可以选取 fixed、 absolute，但这两种定位都会影响盒模型，relative定位不会影响盒模型*/ /*父相子绝*/ position: relative; } .s1 { right: 0; left: 0; bottom: 0; z-index: 1; } .s2 { bottom: 50px; left: 0; z-index: 10; } </style> </head> <body> <div class="box"> <div class="s s1">1</div> <div class="s s2">2</div> <div class="s s3">3</div> </div> </body> </html> #3、绝对定位和相对定位案例2（父相子绝）**************************************************************************************************** <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body, ul, a { /*清除系统默认样式*/ margin: 0; padding: 0; list-style: none; text-decoration: none; } </style> </head> <body> <style> .header { width: 100vw; height: 50px; background-color: brown; } .header li { width: 150px; height: 50px; background-color: orange; /*左浮动*/ float: left; /*控制兄弟向右移动10*/ margin-right: 10px; text-align: center; font: normal 20px/50px 'Arial'; } .nav { width: 100vw; height: 80px; background-color: tomato; } .info { width: 150px; height: 200px; background-color: pink; } .header { /*子级移动要相对于父级，所以要对父级进行定位处理，relative相对移动不影响盒子，规则：父相子绝*/ position: relative; } .info { position: absolute; left: 160px; top: 50px; display: none; } .card:hover ~ .info { display: block; } </style> <ul class="header"> <li>首页</li> <li class="card">下载</li> <li>个人主页</li> <div class="info"></div> </ul> <div class="nav"></div> </body> </html> #3、定位案例3****************************************************************************************************
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .wrapper { width: calc(200px * 5 + 40px); margin: 0 auto; border: 1px solid black; } .wrapper:after { content: ""; display: block; clear: both; } .box { width: 200px; height: 260px; background-color: orange; margin-right: 10px; margin-bottom: 10px; float: left; /*要不要辅助子级，父级都可以添加一个相对定位*/ position: relative; } .box:nth-child(5n) { margin-right: 0; } .t, .b { height: 125px; background-color: pink; } .t { margin-bottom: 10px; } .b1 { /*设置背景图片 不平铺*/ background: url("img/001.jpg") no-repeat; /*修改图片大小 显示宽度的效果*/ background-size: 200px 260px; } .b2 div { position: absolute; width: 50px; height: 30px; background-color: cyan; left: calc(50% - 25px); /*display: none;*/ } .b2 img { width: 150px; position: absolute; left: calc(50% - 75px); top: 50px; } .b2 p { position: absolute; background-color: brown; bottom: 10px; width: calc(100%); text-align: center; } .b2 .f { width: calc(100%); background-color: #ff6700; position: absolute; left: 0; bottom: 0; /*没有高度，也会显示文本，所以文本要隐藏*/ overflow: hidden; /*display: none;*/ height: 0; /*谁过渡谁有transition*/ transition: 0.2s; } .box { transition: 0.2s; top: 0; } .b2:hover { /*margin-top: -5px;*/ top: -5px; /*盒子阴影*/ box-shadow: 0 0 5px 0 black; } .b2:hover .f { /*display: block;*/ height: 60px; } </style> </head> <body> <div class="wrapper"> <div class="box b1"></div> <div class="box b2"> <div>新品</div> <img src="img/002.jpg"> <p>小米么么么么</p> <div class="f">1234567878</div> </div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"> <div class="t"></div> <div class="b"></div> </div> </div> </body> </html>
##Javascript
#1、javascript介绍 js:前台脚本语言 - 编程语言 - 弱语言类型 - 完成页面业务逻辑及页面交互 1、可以自己生成页面数据 2、可以请求后台数据 3、可以接受用户数据 - 可以渲染给页面的其他位置；提交给后台 4、修改页面标签的 内容、样式、属性、事件(页面通过js可以完成与电脑的输入输出设备的交互) #2、JavaScript如何学习 学习方向：从JS代码书写位置、JS基础语法、JS选择器和JS页面操作四部分进行学习 学习目的：完成页面标签与用户的人机交互及前台数据处理的业务逻辑
##Javascript书写位置
#1、书写位置：可以分为行间式、内联式和外联式三种。 #2、行间式 <!-- 关键代码 --> <!-- 给div标签添加点击事件的交互逻辑：弹出文本提示框 --> <div onclick="alert('点击我完成页面交互')">点我</div> #3、内联式 JS代码书写在script标签中，script标签可以出现在页面中的任意位置，建议放在body标签的最后(html代码是自上而下进行解析加载，放在body标签的最下方，会保证页面所有标签都加载完毕，html再去加载js文件，那么js脚步文件就会更好的控制页面标签的人机交互了) <!-- 关键代码 --> <!-- 页面被加载打开时，就会触发事件的交互逻辑：弹出文本提示框 --> <body> <!-- body标签中的所有子标签位置 --> <!-- script标签出现在body标签的最下方 --> <script> alert('该页面被加载！') </script> </body> #4、外联式 JS代码书在外部js文件中，在html页面中用script标签引入js文件（建议在body标签最下方引入，理由同上） #4-1、js文件夹下的my.js alert('外联式js文件弹出框') #4-2、根目录下的second.html <!-- 关键代码 --> <!-- 页面被加载打开时，就会触发事件的交互逻辑：弹出文本提示框 --> <body> <!-- body标签中的所有子标签位置 --> <!-- script标签出现在body标签的最下方 --> <script src="js/my.js"> /* 不要在此写JS代码，原因是用来引入外部js文件的script标签，标签内部书写的JS代码不在起作用 */ </script> </body> #5、总结 行间式控制交互最直接，但是交互逻辑多了直接导致页面可读性变差，且交互逻辑相同的标签样式也需要各自设置，复用性差，不建议使用； 内联式可以同时为多个标签提供交互逻辑（课程后面会详细介绍），学习阶段代码量不大的情况下，也不需要分文件处理的，这时候建议使用内联式； 外联式是分文件管理不同的页面存在的相同与不同的数据处理的业务逻辑与人机交互，可以极大提高开发效率，项目开发时一定要采用外联式来处理JS代码。 通过上面的介绍，大家很清楚JS是一门脚本编程语言，那么我们一定先要了解一下这门编程语言的基础语法，才可以慢慢的展开学。
##JavaScript基础语法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>js语法</h1> </body> <script> let aaa = 123; let bbb = '123'; console.log(aaa == bbb); // == 只做数据比较 console.log(aaa === bbb); // === 做数据与类型比较 // 弱语言类型：会自己根据环境决定如何选择类型存储数据 console.log(1 + 2); // 3 console.log('1' + '2'); // 12 console.log(1 + '2'); // 12 console.log(1 - '2'); // -1 </script> <script> // 三、数据类型 // 值类型 // 1) 数字类型 let a = 123; console.log(a, typeof(a)); a = 3.14; console.log(a, typeof(a)); // 2) 布尔类型 let b = false; console.log(typeof(b), b); // 3) 字符串类型：'' "" `` let c = `123 456 789`; console.log(c, typeof(c)); // 4) 未定义类型：未初始化的变量 let d; console.log(d, typeof(d)); // 引用类型 // 5) 数组（相当于list）： let arr = [1, 2, 3]; console.log(arr, typeof(arr)); // 6) 对象（相当于dict）：所有的key必须是字符串 let sex = '男'; let dic = { name: 'Owen', age: 17.5, sex, // value如果是变量，变量名与key同名，可以简写 }; console.log(dic, typeof(dic)); // 7) 函数类型 function fn() { } console.log(fn, typeof(fn)); // 8) null类型 let x = null; console.log(x, typeof(x)); </script> <script> // 二、变量与常量 let num = 123; num++; console.log(num); const str = '123'; // str = '456'; // 常量声明时必须赋初值，且一旦赋值，不可改变 console.log(str); </script> <script> // 一、三种输出信息的方式 // 控制台输出语句 console.log('你丫真帅') // 弹出框提示信息 alert('你丫确实帅') // 将内容书写到页面 document.write('<h2 style="color: red">你丫帅掉渣</h2>') </script> </html>