01 复习内容
复习之前的知识点
02演示VS创建元素
03div和span区别
通过display属性进行DIV与Span之间的转换。div->span 设置display:inline span->div 设置display:block
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <div style="border:red solid 1px;height:200px;"> <input type="button" name="name" value="我是按钮，我骄傲"/> </div> <span> 我也骄傲！ <input type="button" name="name" value="我更骄傲"/> </span> 如果发现我邪恶了,请记住,我曾纯洁过. 传智播客<div style=" 300px; height: 200px; background-color: Yellow; display: inline; ">官网</div>http://www.itcast.cn <br /> 传智播客<span style=" 300px; height: 200px; background-color: Yellow; display: block; ">官网</span>http://www.itcast.cn </body> </html>
04 CSS中常用的几个属性
05常见的几个CSS属性
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <div style=" 500px; height: 300px; background-color: white; border: 1px solid red; color: black; cursor: pointer;"> 另外一种方法cursor: url(dinosaru.ani); <input type="button" name="name" value="我是老马，点我，狠点" /> 如果我邪恶了，请记住，我曾经纯洁过。 <ul style="list-style-type:none;padding:0"> <li>靠，又变帅了</li> <li>靠，又变帅了</li> <li>靠，又变帅了</li> <li>靠，又变帅了</li> <li>靠，又变帅了</li> </ul> <table style="border:1px red solid">区分border="1"， 只有外边框，没有单元格的边框 <tr> <td>123456</td> <td>123456</td> <td>123456</td> <td>123456</td> </tr> <tr> <td>123456</td> <td>123456</td> <td>123456</td> <td>123456</td> </tr> <tr> <td>123456</td> <td>123456</td> <td>123456</td> <td>123456</td> </tr> <tr> <td>123456</td> <td>123456</td> <td>123456</td> <td>123456</td> </tr> </table> </div> </body> </html>
06.三个选择器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <!--第二种情况：写CSS代码，在本页面上写--> <style type="text/css"> #dv /*id选择器*/ { width: 300px; height: 200px; background-color:orange; border:1px solid red; } /*运用于全部的DIV控件层，但是如果同时存在ID选择器及DIV层，则存在优先级设置样式*/ div /*标签选择器*/ { cursor: pointer; font-family: 全新硬笔行书简; color: blue; } .cls /*类选择器*/ { width: 300px; height: 200px; background-color: orange; /*当同时存在同一个属性的时候，以排序后面的为准。*/ } .cls1 /*同一个标签，可以使用多个类选择器*/ { color: red; background-color: yellow; /*当同时存在同一个属性的时候，以排序后面的为准。*/ } /*#dv--表示的是ID选择器，通常用在特定或者指定的某个元素上使用 div--表示的是标签选择器，通常用在很多相同标签上，希望这些标签都是用一个标签 .cls--表示的是类选择器，通常用在不同标签上，一般是几个标签（不同）应用同一个样式 优先级别：第一种情况中的就近原则 >> ID选择器最高 >> 类选择器 >>标签选择器 例子：第一步，如果div标签，则一定会先设置了div标签样式，然后再覆盖其它选择器的样式。 */ </style> </head> <body> <!--第一种情况：写CSS代码，直接在HTML标签里面填写，--> <div style="300px;height:200px;"> <!--id选择器--> 老马有才：文能提笔控萝莉 </div> <!--第二种情况：写CSS代码，在本页面上写,使用ID选择器，则样式的优先级属于ID选择器--> <div id="dv" ><!--id选择器--> 老马有才：文能提笔控萝莉 </div> <div class="cls cls1" > <!--/*同一个标签，可以使用多个类选择器*/--> 老马看到了老苏洗澡/*当同时存在同一个属性的时候，以排序后面的为准。*/ </div> <div> 老马看到了老苏洗澡 </div> <div> 老马看到了老苏洗澡 </div> <input class="cls" type="button" name="name" value="我是按钮"/> <input type="text" name="name" value="我是文本框"/> <a href="http://www.xuanjics.com">玄机论坛</a> </body> </html>
07其它选择器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> /*类名相同，但是不同标签就应用不同的样式，标签+类选择器*/ input.cls { background-color: black; width: 200px; height: 100px; } div.cls { background-color: yellow; width: 500px; height: 300px; } /*类名相同，但是不同标签就应用不同的样式*/ div p span /*包含选择器（层次选择器）,写死了。*/ { background-color: blue; } </style> </head> <body> <input class="cls" type="button" name="name" value="我是按钮。" /> <div class="cls"> 我是层。 </div> <div> <p> <span> 我是Span </span> </p> </div> </body> </html>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> /*伪选择器，不常用*/ a:link { text-decoration:none; color:black; } a:hover { text-decoration:underline; color:red; } a:active { color:yellow; text-decoration:none; } a:visited { color:blue; text-decoration:underline; } </style> </head> <body> <a href="http://www.xuanjics.com"> 玄机论坛，技术高手论坛 </a> </body> </html>
08几种使用CSS样式的方法
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> /*伪选择器，不常用，第二种（页面嵌入）使用CSS的方式*/ a:link { text-decoration:none; color:black; } a:hover { text-decoration:underline; color:red; } a:active { color:yellow; text-decoration:none; } a:visited { color:blue; text-decoration:underline; } /*第二种（页面嵌入）使用CSS的方式*/ div { background-color: blue; width: 100px; height: 300px; } </style> <!--/*第三种：使用CSS方式，外部引用*/--> <link href="01.css" rel="stylesheet" /> > <!--/*当同时使用多个CSS文件的时候，则会合并到一个ALL.css中*/--> <link href="All.css" rel="stylesheet" /> </head> <body> <a href="http://www.xuanjics.com"> 玄机论坛，技术高手论坛 </a> <div style=" 200px;height:500px;" > <!--第一种（元素内联）使用CSS的方式，直接在标签里面写CSS样式--> 玄机论坛，技术高手论坛 </div> <div > 玄机论坛，技术高手论坛 </div> </body> </html> 01.css div { background-color: yellow; 500px; height: 300px; } 02.css div { border:1px solid red; } all.cs @import url(01.css); @import url(02.css);
09 脱离文档流
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> #dv1 { background-color: red; width: 300px; height: 150px; position: relative; /*脱离文档流，相当于之前的位置，相对定位*/ left: 100px; /*虽然已经脱离，但是后面的元素不会占了位置*/ top: 50px; } #dv2 { background-color: green; width: 300px; height: 150px; position: absolute; /*脱离文档流，绝对定位,相对于body*/ left: 500px; /*已经脱离，则后面的元素会占了位置*/ top: 50px; z-index: 1001;/*值越大就越上面*/ } #dv3 { background-color: blue; width: 300px; height: 150px; position:fixed;/*脱离文档流，固定定位，相对于浏览器平面*/ } #dv4 { background-color: green; width: 300px; height: 150px; position: absolute; /*脱离文档流，绝对定位,相对于body*/ left: 500px; /*已经脱离，则后面的元素会占了位置*/ top: 50px; z-index: 1000; /*值越大就越上面*/ } </style> </head> <body> <div id="dv1"> </div> <div id="dv2"> </div> <div id="dv3"> </div> </body> </html>
11 div和CSS布局
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <!--<script type="text/javascript"> window.onload = function() { document.onclick = function () { alert('我的范围'); }; document.body.onclick = function () { alert('Body的范围'); }; }; </script>--> </head> <body> <div style=" 90%; border: 1px solid red; margin: 0 auto; margin-bottom: 10px; "> <!--margin: 0 auto; 设置居中显示。margin-bottom:10px;设置俩个DIV距离--> <img src="imgs/01.png" /> </div> <div> <img src="imgs/02.png" /> </div> <div> <img src="imgs/03.png" /> </div> <div> <img src="imgs/04.png" /> </div> <div id="dvbig"style="border:1px solid red;"> <div style="float:left;"><!--浮动向左边靠--> <img src="imgs/05.png" /> </div> <div style="float:left; margin-left:20px;"><!--浮动向左边靠--> <img src="imgs/06.png" /> </div> </div> <div> <img src="imgs/07.png" /> </div> </body> </html>
12 浮动的问题
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> 大家好，你们好，你好，我也好。 下面的俩个DIV没有内容，则会导致第三个DIV会出现混乱排序，需要清除浮动的效果。 <div style="background:red;500px;height:200px;float:left;"> </div> <div style="background:green;500px;height:200px;float:right;"> </div> <div style="background:blue;500px;height:200px;clear:both;"> <!--clear:both; 清除浮动，对于有时使用float会导致排序混乱的时候，则需要清除浮动。--> </div> </body> </html>
13. 盒子模型
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <div style="300px;height:200px;border:10px solid red "> <input type="button" name="name" value="按钮" style="100px;height:50px; border:5px solid blue; margin:50px;"/> </div> <!--div层，设置的大小，不包括边框大小，只算空白部分。--> <!--input，设置的大小，包括边框大小。--> </body> </html>
14.框架
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <!--frameset rows="30%,*"> 根据此例子，可以对页面进行分块。 <frameset cols="30%,*"> <frame src="08伪选择器.html" /> <frame src="13盒子模型.html" /> </frameset> <frameset cols="30%,30%,*"> <frame src="13盒子模型.html" /> <frame src="08伪选择器.html" /> <frame src="13盒子模型.html" /> </frameset> </frameset>--> <frameset rows="30%,70%" cols="50%,50%"> <frame src="13盒子模型.html" noresize/><!--noresize,设置不可以拉动窗口。--> <frameset cols="30%,*"> <frame src="08伪选择器.html" noresize /> <frame src="13盒子模型.html" noresize /> </frameset> <noframes> <body>当浏览器不支持框架时，则显示这个body中内容。</body> </noframes> </frameset> </html>
15 介绍JavaScript
1.JavaScript基本语法
2.JavaScript Dom(JavaScript操作html页面)
16 JS基本代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <!--<script type="text/javascript"> 如果放在前面，则会卡住页面加载信息。 var newDate = new Date(); alert(newDate.toLocaleDateString()); alert(newDate.toLocaleTimeString()); </script>--> </head> <body> </body> </html> <!--script放在后面再加载，有利于客户体验。让网页页面先加载，再加载JS代码。--> <script type="text/javascript"> var newDate = new Date(); alert(newDate.toLocaleDateString()); alert(newDate.toLocaleTimeString()); </script> <script type="text/javascript"> alert('哈哈，我今天又变帅了。'); alert('我今天学习了<' + '/script>'); </script> <!--如果包含了字符"</script>"，则会出错，使用字符串拼接的方法-->