CSS布局与定位
- 盒子模型：
本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性，分为标准模型和IE模型，标准模型的宽度不包括内边距，IE模型的宽度要包括内边距。
content：即实际内容，显示文本和图像； border：即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成； padding：即内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的background属性影响； margin：即外边距，在元素外创建格外的空白，空白通常指不能放其他元素的区域。
-
定位方式
使用position属性来定义元素的定位方式，常用的取值：
- static：这是position的默认属性
- fixed：固定定位，fixed是相对于window窗口的定位
- relative ：相对定位；相对于自己本身的定位；这个定位一般是和absolute属性值一起用；相对定位不会破坏元素的文本流，但是会改变元素的视觉效果
- absolute：绝对定位；相对于父级元素的定位，如果没有父级元素时相对于窗口的定位；
需要注意的是static relative这两个属性值是不会破坏元素的文本属性；但是fixed 和 abosulte则会改变元素的文本流，有float的效果。
<style> .fu{ width: 250px; height: 200px; background-color: aqua; position: relative; } .z1,.z2{ position: absolute; } .z1{ width: 100px; height: 150px; background-color: black; border-radius:50% ; left: 10px; } .z2{ width: 100px; height: 150px; background-color: rgb(209, 25, 25); border-radius:50% ; left: 120px; } </style> </head> <body> <div class="fu"> <div class="z1"></div> <div class="z2"></div> </div> </body>CSS动画
css动画属性和技术：
-
@keyframes关键帧技术：
使用@keyframes可以创建动画。
在动画过程中，您可以更改CSS样式的设定多次
指定的变化时发生时使用％，或关键字“from”和“to”，等价于0％到100％
0％是开头动画，100％是当动画完成。
@keyframes mycolor { 0% { background-color: red; } 30% { background-color: darkblue; } 50% { background-color: yellow; } 70% { background-color: darkblue; } 100% { background-color: red; } }2.animation属性：用于将关键帧动画应用到元素上。
animation-name:指定关键帧规则的名称
animation-duration:指定动画持续的时间
animation-delay:指定动画延迟时间
3.box-shadow:可以添加阴影效果到元素上，可以指定阴影的颜色、位置、模糊半径和扩展半径。
- linear-gradient:可以创建线性渐变背景。可以指定起始和结束颜色，以及渐变方向
- transform:可以对元素进行变化，如平移、旋转、和倾斜
- z-index:可以指定元素的层级关系
- 太极图
<style> .fu{ width: 500px; height: 500px; border: 1px solid black; position:relative; background-color: rgb(133, 135, 137); } .fu>div{ position: absolute; } .z1{ width: 250px; height: 500px; background-color: white; border-radius: 250px 0px 0px 250px ; } .z2{ width: 250px; height: 500px; background-color: black; border-radius:0px 250px 250px 0px ; left: 250px; } .z3{ width: 250px; height: 250px; background-color: black; border-radius: 50%; left: 125px; z-index: 1; } .z4{ width: 250px; height: 250px; background-color: white; top: 250px; left: 125px; border-radius: 50%; z-index: 1; } .z5{ width: 100px; height: 100px; top:75px ; left: 200px; border-radius: 50%; z-index:2; background-color: white; } .z6{ width: 100px; height: 100px; top:325px ; left: 200px; border-radius: 50%; z-index:2; background-color: black; } </style> </head> <body> <div class="fu"> <div class="z1"></div> <div class="z2"></div> <div class="z3"></div> <div class="z4"></div> <div class="z5"></div> <div class="z6"></div> </div> </body> </html>- 太极图旋转
<style> body{ background-color: antiquewhite; } .fu{ width: 500px; height: 500px; position:relative; animation: circle 2s linear 1; } .fu>div{ position: absolute; } .z1{ width: 250px; height: 500px; background-color: white; border-radius: 250px 0px 0px 250px ; } .z2{ width: 250px; height: 500px; background-color: black; border-radius:0px 250px 250px 0px ; left: 250px; } .z3{ width: 250px; height: 250px; background-color: black; border-radius: 50%; left: 125px; z-index: 1; } .z4{ width: 250px; height: 250px; background-color: white; top: 250px; left: 125px; border-radius: 50%; z-index: 1; } .z5{ width: 100px; height: 100px; top:75px ; left: 200px; border-radius: 50%; z-index:2; background-color: white; } .z6{ width: 100px; height: 100px; top:325px ; left: 200px; border-radius: 50%; z-index:2; background-color: black; } @keyframes circle{ from { transform: rotate(0deg); }to{ transform: rotate(360deg); } } </style> <body> <div class="fu"> <div class="z1"></div> <div class="z2"></div> <div class="z3"></div> <div class="z4"></div> <div class="z5"></div> <div class="z6"></div> </div> </body>- 心的制作
<style> .fu{ width:170px ; height: 160px; position: relative; top:150px; left:150px; } .fu>div{ position: absolute; } .z1,.z2{ width:100px ; height:100px ; border-radius: 50%; background-color: red; } .z2{ left: 70px; } .z3{ width: 100px; height: 100px; background-color: red; left: 35px; top: 35px; transform: rotate(45deg); } </style> <body> <div class="fu"> <div class="z1"></div> <div class="z2"></div> <div class="z3"></div> </div> </body>- JS篇
1.数据类型：String(字符串)、Number(数字)、Boolean(布尔值)、Null(空值)、Undefined(未定义)、Symbol（符号）、Object（对象）.
2.变量和常量：使用var、let或const来声明变量和常量。变量是可以被重新赋值的，而常量是一旦赋值就不能被修改的
3.算符：JavaScript支持各种数学和逻辑运算符，例如加减乘除、比较和逻辑运算符等
4.控制流程：使用if-else语句、switch语句和循环语句（如for循环和while循环）来控制程序的执行流程
<body> <div id="app"> 年龄<input type="text" v-model="age">经判定，为: <span v-if="age <=35">年起人(35以下)</span> <span v-else-if ="age >35 && age <60">中年人(35-60)</span> <span v-else>老年人(60及以上)</span> <br><br> 年龄<input type="text" v-model="age">经判定，为: <span v-show="age <=35">年起人(35以下)</span> <span v-show="age >35 && age<60">中年人(35-60)</span> <span v-show="age >60">老年人(60及以上)</span> </div> </body>5.函数是一段可重复使用的代码块，用于封装一些特定的操作。可以使用function关键字定义函数，也可以使用箭头函数
var add =function(a,b){ return a+b; }6.对象：JavaScript是一门面向对象的语言，对象是由属性和方法组成的集合。可以使用对象字面量、构造函数或类来创建对象
<script> //自定义对象 // var usr={ // name:"Tom", // age:10, // gender:"male", // eat(){ // alert("吃饭"); // } // } // alert(usr.name); // usr.eat(); //定义json var jsonstr='{"name":"Tom","age":18,"addr":["北京","上海"]}'; alert(jsonstr.name);//undefine //json字符串--转化成js对象 var obj = JSON.parse(jsonstr); alert(obj.name);//Tom //js对象--json字符串 alert(JSON.stringify(obj));//"name":"Tom","age":18,"addr":["北京","上海"] </script> </body>7.数组：数组是一个有序的数据集合，可以包含任意的数据类型。可以通过索引来访问数组中的元素，并使用一系列的数组方法对数组进行操作
<script> var arr =[1,2,3,4]; arr[10]=50; //for (let i = 0; i < arr.length; i++) { //console.log(arr[i]); //} //forEach:遍历数组中有值的元素 // arr.forEach(function(e){ // console.log(e); //}) var arr= [1,2,3,4]; arr[10]=50; //箭头函数（...）=>(...) --简化函数定义 //arr.forEach((e)=>{ //console.log(e); //}) //push:添加元素到数组末尾 //arr.push(7,8,9); //console.log(arr); //splice:删除元素 arr.splice(2,2); console.log(arr); </script>- DOM操作：JavaScript可通过Document Object Model（DOM）来操作HTML文档。可以使用getElementById、querySelector等方法来选择元素，并使用添加、删除、修改元素的属性和内容等操作
<script> //获取元素 //获取元素--根据id获取 //var img=document.getElementById('h1'); //alert(img); //获取元素-根据标签-div //var divs = document.getElementsByTagName('div'); //for(let i =0;i<divs.length;i++){ // alert(divs[i]); //} //获取元素-根据name属性获取 //var ins = document.getElementsByName('hobby'); //for(let i=0;i<ins.length;i++){ // alert(ins[i]); //} //获取元素-根据class属性获取 //var divs=document.getElementsByClassName('cls'); //for(let i=0;i<divs.length;i++){ // alert(divs[i]); //} //查询参考手册,属性，方法 var divs= document.getElementsByClassName('cls'); var div1=divs[0]; div1.innerHTML="传智教育666"; </script>9.. 事件处理：JavaScript可以通过事件处理程序来响应用户的交互动作，例如点击、输入等。可以使用addEventListener方法来注册事件，并编写对应的事件处理函数
<body> <img id="light" src="img/" alt=""> <br><br> <input type="button" value="点亮" onclick="turn()" > <input type="button" value="熄灭" onclick="off()" > <br><br> <input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()" > <br><br> <input type="checkbook" name="hobby">电影 <input type="checkbook" name="hobby">旅游 <input type="checkbook" name="hobby">游戏 <br> <input type="button" value="全选" onclick="allcheck()"> <input type="button" value="反选" onclick="reverse()"> </body> <script> function turn(){ var img=document.getElementById("light"); img.src="img/on.gif"; } function off(){ var img =document.getElementById("light"); img.src="img/off.gif"; } function lower(){ var input=document.getElementById("name"); input.value=input.value.toLowerCase(); } function upper(){ var input = document.getElementById("name"); input.value=input.value.toUpperCase(); } function allcheck(){ var hobbys= document.getElementsByName("hobby"); for (let i = 0; i < hobbys.length; i++) { const element = hobbys[i]; element.checked=true; } } function reverse(){ var hobbys= document.getElementsByName("hobby"); for (let i = 0; i < hobbys.length; i++) { const element = hobbys[i]; element.checked=false; } } </script>
226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
