01 复习内容

复习之前的知识点

02演示VS创建元素

03div和span区别

通过display属性进行DIV与Span之间的转换。div->span 设置display:inline    span->div 设置display:block

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <div style="border:red solid 1px;height:200px;">
  9.         <input type="button" name="name" value="我是按钮，我骄傲"/>
  10.     </div>
  11.     <span>
  12.         我也骄傲！
  13.         <input type="button" name="name" value="我更骄傲"/>
  14.     </span>
  15.  
  16.     如果发现我邪恶了,请记住,我曾纯洁过.
  17.     传智播客<div style=" width: 300px; height: 200px; background-color: Yellow; display: inline; ">官网</div>http://www.itcast.cn
  18.     <br />
  19.  
  20.     传智播客<span style=" width: 300px; height: 200px; background-color: Yellow; display: block; ">官网</span>http://www.itcast.cn
  21.  
  22. </body>
  23. </html>

04 CSS中常用的几个属性

05常见的几个CSS属性

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <div style="width: 500px; height: 300px; background-color: white; border: 1px solid red; color: black; cursor: pointer;"> 另外一种方法cursor: url(dinosaru.ani);
  9.         <input type="button" name="name" value="我是老马，点我，狠点" />
  10.         如果我邪恶了，请记住，我曾经纯洁过。
  11.  
  12.       <ul style="list-style-type:none;padding:0">
  13.           <li>靠，又变帅了</li>
  14.           <li>靠，又变帅了</li>
  15.           <li>靠，又变帅了</li>
  16.           <li>靠，又变帅了</li>
  17.           <li>靠，又变帅了</li>
  18.       </ul>
  19.         <table style="border:1px red solid">区分border="1"， 只有外边框，没有单元格的边框
  20.             <tr>
  21.                 <td>123456</td>
  22.                 <td>123456</td>
  23.                 <td>123456</td>
  24.                 <td>123456</td>
  25.             </tr>
  26.             <tr>
  27.                 <td>123456</td>
  28.                 <td>123456</td>
  29.                 <td>123456</td>
  30.                 <td>123456</td>
  31.             </tr>
  32.             <tr>
  33.                 <td>123456</td>
  34.                 <td>123456</td>
  35.                 <td>123456</td>
  36.                 <td>123456</td>
  37.             </tr>
  38.             <tr>
  39.                 <td>123456</td>
  40.                 <td>123456</td>
  41.                 <td>123456</td>
  42.                 <td>123456</td>
  43.             </tr>
  44.         </table>
  45.     </div>
  46. </body>
  47. </html>

06.三个选择器

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <!--第二种情况：写CSS代码，在本页面上写-->
  7.     <style type="text/css">
  8.         #dv /*id选择器*/
  9.         {
  10.             width: 300px;
  11.             height: 200px;
  12.             background-color:orange;
  13.             border:1px solid red;
  14.         }
  15.         /*运用于全部的DIV控件层，但是如果同时存在ID选择器及DIV层，则存在优先级设置样式*/
  16.          div /*标签选择器*/
  17.         {
  18.             cursor: pointer;
  19.             font-family: 全新硬笔行书简;
  20.             color: blue;
  21.         }
  22.         .cls /*类选择器*/ {
  23.             width: 300px;
  24.             height: 200px;
  25.             background-color: orange; /*当同时存在同一个属性的时候，以排序后面的为准。*/
  26.         }
  27.         .cls1 /*同一个标签，可以使用多个类选择器*/
  28.          {
  29.             color: red;
  30.             background-color: yellow; /*当同时存在同一个属性的时候，以排序后面的为准。*/
  31.         }
  32.         /*#dv--表示的是ID选择器，通常用在特定或者指定的某个元素上使用
  33.             div--表示的是标签选择器，通常用在很多相同标签上，希望这些标签都是用一个标签
  34.             .cls--表示的是类选择器，通常用在不同标签上，一般是几个标签（不同）应用同一个样式
  35.  
  36.             优先级别：第一种情况中的就近原则 >> ID选择器最高 >> 类选择器 >>标签选择器
  37.             例子：第一步，如果div标签，则一定会先设置了div标签样式，然后再覆盖其它选择器的样式。
  38.              */
  39.     </style>
  40.  
  41. </head>
  42. <body>
  43.     <!--第一种情况：写CSS代码，直接在HTML标签里面填写，-->
  44.     <div style="width:300px;height:200px;">
  45.         <!--id选择器-->
  46.         老马有才：文能提笔控萝莉
  47.     </div>
  48.     <!--第二种情况：写CSS代码，在本页面上写,使用ID选择器，则样式的优先级属于ID选择器-->
  49.     <div id="dv" ><!--id选择器-->
  50.          老马有才：文能提笔控萝莉
  51.     </div>
  52.  
  53.     <div class="cls cls1" > <!--/*同一个标签，可以使用多个类选择器*/-->
  54.         老马看到了老苏洗澡/*当同时存在同一个属性的时候，以排序后面的为准。*/
  55.     </div>
  56.     <div>
  57.         老马看到了老苏洗澡
  58.     </div>
  59.     <div>
  60.         老马看到了老苏洗澡
  61.     </div>
  62.     <input class="cls" type="button" name="name" value="我是按钮"/>
  63.     <input type="text" name="name" value="我是文本框"/>
  64.     <a href="http://www.xuanjics.com">玄机论坛</a>
  65. </body>
  66.  </html>

07其它选择器

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title></title>
  6.     <style type="text/css">
  7.         /*类名相同，但是不同标签就应用不同的样式，标签+类选择器*/
  8.         input.cls {
  9.             background-color: black;
  10.             width: 200px;
  11.             height: 100px;
  12.         }
  13.  
  14.         div.cls {
  15.             background-color: yellow;
  16.             width: 500px;
  17.             height: 300px;
  18.         }
  19.         /*类名相同，但是不同标签就应用不同的样式*/
  20.  
  21.         div p span /*包含选择器（层次选择器）,写死了。*/
  22.          {
  23.             background-color: blue;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <input class="cls" type="button" name="name" value="我是按钮。" />
  29.     <div class="cls">
  30.         我是层。
  31.     </div>
  32.     <div>
  33.         <p>
  34.             <span>
  35.                 我是Span
  36.             </span>
  37.         </p>
  38.     </div>
  39. </body>
  40. </html>

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <style type="text/css">
  7.         /*伪选择器，不常用*/
  8.         a:link
  9.         {
  10.             text-decoration:none;
  11.             color:black;
  12.         }
  13.         a:hover
  14.         {
  15.             text-decoration:underline;
  16.             color:red;
  17.         }
  18.         a:active
  19.         {
  20.             color:yellow;
  21.             text-decoration:none;
  22.         }
  23.         a:visited
  24.         {
  25.             color:blue;
  26.             text-decoration:underline;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <a href="http://www.xuanjics.com">
  32.      玄机论坛，技术高手论坛
  33.     </a>
  34. </body>
  35. </html>

08几种使用CSS样式的方法

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <style type="text/css">
  7.         /*伪选择器，不常用，第二种（页面嵌入）使用CSS的方式*/
  8.         a:link
  9.         {
  10.             text-decoration:none;
  11.             color:black;
  12.         }
  13.         a:hover
  14.         {
  15.             text-decoration:underline;
  16.             color:red;
  17.         }
  18.         a:active
  19.         {
  20.             color:yellow;
  21.             text-decoration:none;
  22.         }
  23.         a:visited
  24.         {
  25.             color:blue;
  26.             text-decoration:underline;
  27.         }
  28.         /*第二种（页面嵌入）使用CSS的方式*/
  29.         div {
  30.             background-color: blue;
  31.             width: 100px;
  32.             height: 300px;
  33.         }
  34.     </style>
  35.     <!--/*第三种：使用CSS方式，外部引用*/-->
  36.     <link href="01.css" rel="stylesheet" /> >
  37.     <!--/*当同时使用多个CSS文件的时候，则会合并到一个ALL.css中*/-->
  38.     <link href="All.css" rel="stylesheet" />
  39. </head>
  40. <body>
  41.     <a href="http://www.xuanjics.com">
  42.      玄机论坛，技术高手论坛
  43.     </a>
  44.     <div style=" width:200px;height:500px;" > <!--第一种（元素内联）使用CSS的方式，直接在标签里面写CSS样式-->
  45.         玄机论坛，技术高手论坛
  46.     </div>
  47.     <div >
  48.         玄机论坛，技术高手论坛
  49.     </div>
  50. </body>
  51. </html>
  52.  
  53. 01.css
  54.  
  55.   div {
  56.             background-color: yellow;
  57.             width: 500px;
  58.             height: 300px;
  59.         }
  60.  
  61. 02.css
  62.  
  63.   div {
  64.            border:1px solid red;
  65.         }
  66. all.cs
  67.  
  68. @import url(01.css);
  69. @import url(02.css);

09 脱离文档流

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <style type="text/css">
  7.         #dv1 {
  8.             background-color: red;
  9.             width: 300px;
  10.             height: 150px;
  11.             position: relative; /*脱离文档流，相当于之前的位置，相对定位*/
  12.             left: 100px; /*虽然已经脱离，但是后面的元素不会占了位置*/
  13.             top: 50px;
  14.         }
  15.         #dv2 {
  16.             background-color: green;
  17.             width: 300px;
  18.             height: 150px;
  19.             position: absolute; /*脱离文档流，绝对定位,相对于body*/
  20.             left: 500px; /*已经脱离，则后面的元素会占了位置*/
  21.             top: 50px;
  22.             z-index: 1001;/*值越大就越上面*/
  23.         }
  24.         #dv3 {
  25.             background-color: blue;
  26.             width: 300px;
  27.             height: 150px;
  28.             position:fixed;/*脱离文档流，固定定位，相对于浏览器平面*/
  29.  
  30.         }
  31.         #dv4 {
  32.             background-color: green;
  33.             width: 300px;
  34.             height: 150px;
  35.             position: absolute; /*脱离文档流，绝对定位,相对于body*/
  36.             left: 500px; /*已经脱离，则后面的元素会占了位置*/
  37.             top: 50px;
  38.             z-index: 1000; /*值越大就越上面*/
  39.         }
  40.     </style>
  41. </head>
  42. <body>
  43.     <div id="dv1">
  44.  
  45.     </div>
  46.     <div id="dv2">
  47.  
  48.     </div>
  49.     <div id="dv3">
  50.  
  51.     </div>
  52. </body>
  53. </html>

11 div和CSS布局

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <!--<script type="text/javascript">
  7.         window.onload = function() {
  8.             document.onclick = function () {
  9.                 alert('我的范围');
  10.             };
  11.             document.body.onclick = function () {
  12.                 alert('Body的范围');
  13.             };
  14.         };
  15.     </script>-->
  16.  
  17. </head>
  18. <body>
  19.     <div style="width: 90%; border: 1px solid red; margin: 0 auto; margin-bottom: 10px; ">
  20.         <!--margin: 0 auto; 设置居中显示。margin-bottom:10px;设置俩个DIV距离-->
  21.         <img src="imgs/01.png" />
  22.     </div>
  23.     <div>
  24.         <img src="imgs/02.png" />
  25.     </div>
  26.     <div>
  27.         <img src="imgs/03.png" />
  28.     </div>
  29.     <div>
  30.         <img src="imgs/04.png" />
  31.     </div>
  32.     <div id="dvbig"style="border:1px solid red;">
  33.         <div style="float:left;"><!--浮动向左边靠-->
  34.             <img src="imgs/05.png" />
  35.         </div>
  36.         <div style="float:left; margin-left:20px;"><!--浮动向左边靠-->
  37.             <img src="imgs/06.png" />
  38.         </div>
  39.     </div>
  40.     <div>
  41.         <img src="imgs/07.png" />
  42.     </div>
  43. </body>
  44. </html>

12 浮动的问题

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6. </head>
  7. <body>
  8.     大家好，你们好，你好，我也好。
  9.     下面的俩个DIV没有内容，则会导致第三个DIV会出现混乱排序，需要清除浮动的效果。
  10.     <div style="background:red;width:500px;height:200px;float:left;">
  11.  
  12.     </div>
  13.     <div style="background:green;width:500px;height:200px;float:right;">
  14.  
  15.     </div>
  16.     <div style="background:blue;width:500px;height:200px;clear:both;">
  17.         <!--clear:both; 清除浮动，对于有时使用float会导致排序混乱的时候，则需要清除浮动。-->
  18.     </div>
  19. </body>
  20. </html>

13. 盒子模型

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <div style="width:300px;height:200px;border:10px solid red ">
  9.         <input  type="button" name="name" value="按钮"
  10.                style="width:100px;height:50px;
  11. border:5px solid blue; margin:50px;"/>
  12.     </div>
  13.     <!--div层，设置的大小，不包括边框大小，只算空白部分。-->
  14.     <!--input，设置的大小，包括边框大小。-->
  15. </body>
  16. </html>

14.框架

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6. </head>
  7. <!--frameset   rows="30%,*">
  8.      根据此例子，可以对页面进行分块。
  9.     <frameset cols="30%,*">
  10.  
  11.         <frame src="08伪选择器.html" />
  12.         <frame src="13盒子模型.html" />
  13.     </frameset>
  14.     <frameset cols="30%,30%,*">
  15.         <frame src="13盒子模型.html" />
  16.         <frame src="08伪选择器.html" />
  17.         <frame src="13盒子模型.html" />
  18.     </frameset>
  19. </frameset>-->
  20.  
  21. <frameset rows="30%,70%" cols="50%,50%">
  22.     <frame src="13盒子模型.html"  noresize/><!--noresize,设置不可以拉动窗口。-->
  23.     <frameset cols="30%,*">
  24.         <frame src="08伪选择器.html" noresize />
  25.         <frame src="13盒子模型.html" noresize />
  26.     </frameset>
  27.     <noframes>
  28.         <body>当浏览器不支持框架时，则显示这个body中内容。</body>
  29.     </noframes>
  30. </frameset>
  31.  
  32. </html>

15 介绍JavaScript

1.JavaScript基本语法

2.JavaScript Dom(JavaScript操作html页面)

16 JS基本代码

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <!--<script type="text/javascript"> 如果放在前面，则会卡住页面加载信息。
  7.         var newDate = new Date();
  8.         alert(newDate.toLocaleDateString());
  9.         alert(newDate.toLocaleTimeString());
  10.     </script>-->
  11.  
  12. </head>
  13. <body>
  14.  
  15. </body>
  16. </html>
  17.  <!--script放在后面再加载，有利于客户体验。让网页页面先加载，再加载JS代码。-->
  18. <script type="text/javascript">
  19.     var newDate = new Date();
  20.     alert(newDate.toLocaleDateString());
  21.     alert(newDate.toLocaleTimeString());
  22. </script>
  23. <script type="text/javascript">
  24.  
  25.     alert('哈哈，我今天又变帅了。');
  26.     alert('我今天学习了<' + '/script>');
  27. </script>
  28.  <!--如果包含了字符"</script>"，则会出错，使用字符串拼接的方法-->

23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍的更多相关文章

  1. CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别

    1.代码 (1)示例代码1 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...

  2. 脱离文档流两操作，float和position:absolute的区别

    文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行: CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离 ...

  3. HTML+CSS基础 块级元素div分析 文档流 脱离文档流的方法

    块级元素div分析 1.外边距  margin 2.内边距 padding 3.边框  border Div的真实宽度=width+margin-left+margin-right+border*2+ ...

  4. float 浮动 文档流和文字流区别

    关于float属性的脱离文档流的问题 使用float浮动后,元素虽然会脱离文档流,但还处在文本流的位置当中,所以就不会出现重叠的效果吗? 下面我自己试了一下,给两个DIV分别设置了样式,而只给第一个D ...

  5. div排版+文档流+定位秘诀

    由于没有找到自己认为完整的关于普通流.浮动和绝对定位的中文文章,于是鼓起勇气决定自己来写篇. 在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ,类型可以是 ...

  6. [转]div与span区别及用法

    DIV与SPAN区别及div与san用法篇 接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法.新手在使用web标准(div css)开发网页的时候, ...

  7. div与span区别及用法

    DIV与SPAN区别及div与san用法篇 接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法.新手在使用web标准(div css)开发网页的时候, ...

  8. DIV 和 SPAN 区别

    DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染.主要用于应用样式表(共同点). 两者最明显的区别在于DIV是块元素,而SPAN是行内元素(也译作内嵌元素). 详解:1 ...

  9. css常用属性总结之 id和class的区别，使用类还是ID?

    前面两篇文章我们分别谈到了class和id的相关知识和如何使用,但是在实际项目中,我们该如何抉择,class还是id? 先回顾下两者的区别吧! 1.id具有唯一性,class具有普遍性,所以一个页面同 ...

随机推荐

  1. http://www.jobui.com/mianshiti/it/java/6782/

    1.运算符优先级问题,下面代码的结果是多少?(笔试) package test; public class Test {public static void main(String[] args) { ...

  2. Codeforces Beta Round #4 (Div. 2 Only) C. Registration system hash

    C. Registration system Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/problemset ...

  3. accept函数

    accept()函数 系统调用 accept() 会有点古怪的地方的! 你能够想象发生 这种事情:有人从非常远的地方通过一个你在侦听 (listen()) 的port连接 (connect()) 到你 ...

  4. asp.net 获取url

    string url = Request.Url.ToString(); this.ImageLogo.ImageUrl = "http://" + Request.Url.Aut ...

  5. Don't Starve，好脚本，好欢乐

    最近玩了shank系列的开发公司新出的游戏饥荒(Don't Starve),容量很小,200MB左右,所以可以归类为小游戏..但是游戏性却是相当的高,游戏中各物件的交互出奇的丰富和复杂,我相信该游戏9 ...

  6. codeblocks中添加-std=c99

    早上用codeblocks编译一个c文件,出现这样一个编译错误: +'for'+loop+initial+declarations+are+only+allowed+in+C99+mode 原来cod ...

  7. 基于HTML5的捕鱼达人游戏网页版

    之前给大家分享了html5实现的水果忍者,愤怒的小鸟,中国象棋游戏.今天给大家分享一款捕鱼达人(fishjoy)网页版游戏的源码.可以在线玩也可以下载到本地.它使用html5技术和javascript ...

  8. The Kernel Newbie Corner: Kernel Debugging with proc "Sequence" Files--Part 3

    转载:https://www.linux.com/learn/linux-career-center/44184-the-kernel-newbie-corner-kernel-debugging-w ...

  9. encodeURIComponent() 和 encodeURI()

    encodeURI(URIstring): 该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) . 该方法的目的是对 URI ...

  10. iOS 关于流媒体 的初级认识与使用

    1.流媒体指在Internet/Intranet中使用流式传输技术的连续时基媒体,如:音频.视频或多媒体文件.流式媒体在播放前并不下载整个文件,只将开始部分内容存入内存,流式媒体的数据流随时传送随时播 ...