lesson05-解答海绵宝宝
视频1-海绵宝宝
一、如何编写网页
1. 整体布局（三部分：head、content、foot），整个页面的主心骨就是div+css
2.在设置css时，通常都是使用类选择器class（标签选择用来设置大规范）
3.设置body的margin+padding为0，和浏览器紧贴
4.开始头部/中间/底部分别设置：
5.重点在div居中（外部设置div，定义宽度，设置margin：0 auto）头部菜单内部文字使用无序列表+float：left
5.去掉列表前点：list-style：none；下划线/去掉：text-decoration：underline/none；
6.文字居中：div设置高度，文字line-height设置同样高度；
二、扩展（知识点补充）
1.内联但又想有高度和宽度：display:inline-block(案例1)
2.background-position：x y；显示图片的位置eg：坦克大战坦克方向图 (案例2)
-----------------------------------------
0-答疑
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--getElementsByTagName和getElementsByClassName--> 9 <div class="box" style="height:200px;">我就是我</div> 10 <script> 11 //p/id/class 12 var div=document.getElementsByTagName("div")[0]; //获取div标签[0]对象 13 var box=document.getElementsByClassName("box")[0]; //获取class="box"的对象 14 //p/#id/.class 15 var obj=document.querySelector(".box");//Dom对象 css选择器通过class,获取class="box"的对象 16 console.log(div); //打印--- <div class="box" style="height:200px;">我就是我</div> 17 console.log(box); 18 console.log(obj); 19 20 </script> 21 </body> 22 </html>
----------------------------------------------------
1-网页编写入门布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 9 } 10 ul{ 11 list-style:none; /*去除点*/ 12 } 13 </style> 14 </head> 15 <body> 16 <!--1.布局，div分上中下层--> 17 <div class="top"><p></p></div> 18 <div class="middle"> 19 <div class="left"></div> 20 <div class="right"></div> 21 </div> 22 <div class="bottom"><p></p></div> 23 <!--2.加上样式--> 24 25 </body> 26 </html>
----------------------------------------------------
2-display 块级
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 height:200px; 9 width:200px; 10 background: #52a6f7; 11 } 12 p{ 13 /*隐藏*/ 14 display: none; 15 } 16 div:hover p{ 17 /*块级元素*/ 18 display:block; 19 } 20 .test{ 21 /*行内元素是不能直接设置宽高的*/ 22 /*行内变块级*/ 23 /*display:block;*/ 24 25 border:1px solid red; /*200x200红线边框*/ 26 height:200px; 27 width:200px; 28 29 /*具有行内元素的特点一行上显示,同时也可以设置宽高*/ 30 display: inline-block; 31 } 32 </style> 33 </head> 34 <body> 35 <div><p>我就是我</p></div> 36 <strong class="test">哈哈</strong> 37 <strong>哈哈</strong> 38 <strong>哈哈</strong> 39 </body> 40 </html>
----------------------------------------------------
3-三角形
例子1
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 /*border:30px solid transparent;*/ 9 border-top:30px solid red; 10 border-right:30px solid green; 11 border-bottom:30px solid blue; 12 border-left:30px solid black; 13 display:inline-block; 14 } 15 </style> 16 </head> 17 <body> 18 <div></div> 19 </body> 20 </html>
例子2
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 border:30px solid transparent; 9 /*border-top:30px solid red;*/ 10 /*border-right:30px solid green;*/ 11 /*border-bottom:30px solid blue;*/ 12 border-left:30px solid black; 13 display:inline-block; /*行内元素在块级中显示*/ 14 } 15 </style> 16 </head> 17 <body> 18 <div></div> 19 </body> 20 </html>
----------------------------------------------------
4-三角形 隐藏显示切换
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 border:30px solid transparent; /*border复合样式写法*/ 9 border-top:30px solid red; /*显示上层红色三角形*/ 10 display: inline-block; /*行内元素在块级元素中显示*/ 11 } 12 div:hover{ 13 border:30px solid transparent; 14 border-bottom:30px solid red; /*鼠标划入三角形时，显示下层红色三角形*/ 15 } 16 </style> 17 </head> 18 <body> 19 <div></div> 20 </body> 21 </html>
----------------------------------------------------
5-海绵宝宝 切换图形
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width:350px; 9 height:350px; 10 background: blueviolet url("img/1.jpg") no-repeat; /*背景是海绵宝宝图片，no-repeat不平铺*/ 11 12 /*正脸0,0;左脸:-350px,0;下脸:0,-350px;右脸:-350px,-350px*/ 13 /*background-position:-350px -350px ;*/ 14 } 15 </style> 16 </head> 17 <body> 18 <div></div> 19 <input type="button" value="上"> 20 <input type="button" value="下"> 21 <input type="button" value="左"> 22 <input type="button" value="右"> 23 <script> 24 var box=document.getElementsByTagName("div")[0]; //获取div标签[0] 25 //[1,2,3] 26 console.log(box); 27 var btn=document.getElementsByTagName("input"); //获取所有input标签 28 //[input,input,input,input] 29 //点击[上]时显示海绵宝宝图片 30 btn[0].onclick=function () { 31 box.style.backgroundPositionX="0px"; 32 box.style.backgroundPositionY="0px"; 33 }; 34 //点击[下] 35 btn[1].onclick=function () { 36 box.style.backgroundPositionX="0px"; 37 box.style.backgroundPositionY="-350px"; 38 }; 39 //点击[左] 40 btn[2].onclick=function () { 41 box.style.backgroundPositionX="-350px"; 42 box.style.backgroundPositionY="0px"; 43 }; 44 //点击[右] 45 btn[3].onclick=function () { 46 box.style.backgroundPositionX="-350px"; 47 box.style.backgroundPositionY="-350px"; 48 }; 49 </script> 50 </body> 51 </html>
----------------------------------------------------
视频2-加减框
6-加减框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .test{ 8 text-align: center; /*文字居中*/ 9 } 10 </style> 11 </head> 12 <body> 13 <input type="button" value="-"> 14 <input type="text" class="test"> 15 <input type="button" value="+"> 16 17 <script> 18 var obj =document.getElementsByTagName("input"); /*获取所有input标签*/ 19 obj[0].onclick=function () { 20 var num = obj[1].value; //获取text文本框内值 3 21 // console.log(num); 22 num--;/*返回值num,然后num-1*/ 23 // console.log(y); 24 obj[1].value=num; //text文本框赋值 25 }; 26 obj[2].onclick=function () { 27 var num = obj[1].value; 28 console.log(typeof num); //num是string类型 29 num=Number(num)+1; //转换number类型 30 obj[1].value=num; 31 } 32 </script> 33 </body> 34 </html>
