HTML 

<!--第二章.HTML基本格式
1.HTML的基本格式
    <html>
        <head>
            <title>标题<title>
        </head>
        <body>
            主体内容
        </body>
    </html>
2.HTML的控制标记的格式
    （1）单一性，无属性值
        <br>
    （2）单一性，有属性值
        <hr size="10" width="50%" color="red" noshade>
    （3）对称性，无属性值
        <title>标题</title>
    （4）对称性，又属性值
        <body bgcolor="#0076a3" text="white" leftmargin="50" topmargin="50" rightmargin="50" bottommargin="50"></body>
        <font size="7" color="red" face="黑体">字体设置</font>
    （5）最常用的控制标记（共13组）
            跳行
            段落(align)
            水平线(size,width,size,noshade)
            向中对齐(废弃标签)
            全局背景色与文字设置以及边距(bgcolor,text，leftmargin,topmargin,rightmargin,bottommargin)
            标题文字设置(align)
            特殊字符设置(<=lt;,>=gt;,&=amp;,"=quot;)
            HTML注释
            实体字符控制标记(b,i,s,u,tt,sub,sup)
            语意字符控制标记(address,big,del,ins,small,strong,em)
            字体控制标记front(废弃标记)(size,color,face)
            格式化标记<pre></pre>
            引用文本<blockquote></blockquote>(cite=url)        //用blockquote标签文本会缩进，url表示引用的文字来之那个地方
        
-->
<html>
    <head>
        <title>标题</title>    
    </head>    
    <body bgcolor="#0076a3" text="white" leftmargin="50" topmargin="50" rightmargin="50" bottommargin="50">
        <br>
        <hr size="10" width="50%" color="red" noshade>
        全局字体颜色白色
        <font size="7" color="red" face="黑体">字体设置</font>
        <hr size="10" width="100%" color="#F7b989" noshade>
        <pre>
            ■■■■■■■■■■■■■
            ■■■  ■■■  ■■■
            ■■■■■■■■■■■■■
        </pre>
        <blockquote cite="www.ysfox.com">
            引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本
            引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本
            引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本
            引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本
            引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本
            引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本引用文本
        </blockquote>
        
    </body>
</html>

 

 

<!--
第三章.排列清单列表
    1.无序清单列表
        <ul>
            <li>1</li>        
            <li>2</li>
            <li>3</li>
        </ul>
        注意:ul和li又相同的属性type=dise|circle|square
    2.有序清单列表
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>    
        </ol>
        注意:ol的属性type=1|a|A|i|I
    3.无序和有序列表的结合
        <ul>
            <li>
                <ol>
                    <li>1</li>    
                    <li>2</li>
                    <li>3</li>
                </ol>
            </li>    
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    4.叙述式清单
        <dl>                                            //叙述式清单的开始标签
            <dt>叙述清单的标题</dt>
                <dd>叙述内容</dd>
                <dd>叙述内容</dd>
            <dt>叙述清单的标题</dt>
                <dd>叙述内容</dd>
                <dd>叙述内容</dd>
        </dl>
        //叙述清单用大段大段的文字
    
-->
<html>
    <head>
        <title>排列清单列表</title>    
    </head>    
    <body>
        <ul>
            <li>1</li>        
            <li>2</li>
            <li>3</li>
        </ul>
        <hr size="10" width="100%" color="6cb8dc">
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>    
        </ol>
        <hr size="10" width="100%" color="ffde79">
        <ul>
            <li>
                <ol>
                    <li>1</li>    
                    <li>2</li>
                    <li>3</li>
                </ol>
            </li>    
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
        <hr size="10" width="100%" color="ffde79">
        <dl>
            <dt>1.叙述清单的标题</dt>
                <dd>叙述内容</dd>
                <dd>叙述内容</dd>
            <dt>2.叙述清单的标题</dt>
                <dd>叙述内容</dd>
                <dd>叙述内容</dd>
        </dl>
    </body>
</html>

 

————————————————————————————————————————————————————————————————————————————————

 1 <!--
 2  本节课主要讲解了HTML的其它标记
 3  10.1定时跳转指定网页
 4  <meta http-equiv="refresh" content="time;url=网址一定要写上http:///>（注意：这段代码放在head之间,如果这里的URL放的是网址必须加上http://让）
 5  
 6  10.2简单的SEO（让别人找到你的网站）
 7  简单SEO也是<meta>标签，存放在head之间，不过它有两个属性标签，一个是name，一个是content。
 8  name有六个属性值author(作者),discription(描述),keywords(关键字),generator(用的软件)，revised(HTML版本)，others(其它信息)
 9  content是对以上属性值的描述
10  另外一点为了更好的能被别人收到自己的网站往往在title之间添加多个关键字
11  
12  10.3移动文字<marquee>
13  <marquee>有八个属性值behavior,direction,bgcolor,height,width,scrollamount,hspace,vspace
14  behavior表示移动的行为，scroll代表的从右到左移动(默认)，slide表示从右到左停止，alternate表示从右到左来回移动
15  direction表示移动的方向，left,right,up,down
16  
17  10.4在html中引入javaScript脚本
18  标签是<script type="javascrip" sr="地址"></script>,也是在head之间引入javaScript脚本
19  -->
20  <html>
21      <head>
22          <title>编程人生，java，html，php，javaScript,c,c#,c++,code</title>    
23          <meta http-equiv="refresh" content="10;url=http://www.baidu.com">
24          <meta name="author" content="Ysfox">
25          <meta name="keywords" content="编程人生,java,html,php,javaScript1">
26          <meta name="generator" content="UltraEdit-32">
27          <meta name="revised" content="html4.01">
28          <meta name="others" content="本网站是编程交流网站，欢迎大家注册">
29          <script languge="javascript" src="10.js"></script>
30      </head>
31      <body>
32          <marquee  behavior="scroll" direction="down" scrollamount=100 bgcolor="red" height="500" width="500" hspace="50" vspace="50">太上老君急急如律令！</marquee>
33      </body>
34  </html>
<!--
    本节课主要学习了
    11.1XML的简单介绍：XML就是可扩展标记语言，是一种严格性语言。
    
    11.2XML的基本格式：<?xml 版本 字符编码?>
    1.首位标签必须成对，
    2.单标签必须以/结尾
    3.单属性必须等于它自己，并且必须加上""
    
    11.3xml的定义文档不做解释，以后学到XML在学
    
    11.4HTML4.0的定义文档格式：定义的文档都存在loose.dtd中
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>

<body>
</body>
</html>


    11.5XHTML1.0的文档定义格式：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
</body>
</html>


    HTML和XHTML都有三种类型：过度性transitional（允许使用废弃标签），严格性strict（禁止使用废弃标签），框架性frameset（可以使用废弃标签和框架）
    
    11.6XHTML1.0风格的要求：两个所有，两个劲量
        1.所有单标签都必须用/关闭，单便签有<br/>,<hr/>,<input/>,<img/>,<option/><link/>
        2.所有单属性都必须等于本身,单属性有checked="checked",readonly="readonly"disabled="disabled"
        3.劲量不使用废弃标签,废弃标签有<center></center>,<font><font/>,<s></s>,<u></u>等等
        4.劲量不使用废弃属性，废弃属性有bgcolor,align,color
    
-->
<?xml version="1.0"?>
<book>
    <smallbook>This is a small book</smallbook>
    <price>$100</price>
    <bigbook>This is a big book</bigbook>
    <price>$200</price>
    <bookmark/>
</book>
<!--由于xml是严格性语言，所以不能再前面有注释，否则出错，当xml中有中文时，记住要加上字符编码-->
<?xml version="1.0" encoding="gb2312"?>
<我的一家>
    <爸爸>
        <姓名 属性="属性">张三</姓名>
        <年龄>1000</年龄>
        <男/>
    </爸爸>
    <妈妈>
        <姓名>李四</姓名>
        <年龄>10000</年龄>
        <女/>
    </妈妈>
</我的一家>
  1 <!--
  2     本节课讲解了css的几种排版样式
  3     1.行内排版样式
  4     <标签 style="属性1:属性值1;属性2:属性值2;">内容</标签>
  5     
  6     2.排版专用标记
  7     区块div，内联块span
  8     区块和内联块的区别
  9     如果没有指定大小，区块占据一整行，内联块有多少内容就占据多大空间。
 10     
 11     3.内嵌式排版样式
 12     (1).标记定义型:在head与head之间添加属性值，标记在body与body之间
 13     <head>
 14             <style type="text/css">        //注意格式
 15                     标记名称{
 16                             属性1:属性值1;
 17                             属性2:属性值2;
 18                             ...
 19                     }
 20             </style>
 21     </head>
 22     
 23         <body>
 24             <标记名称>内容</标记名称>
 25         </body>
 26     (2).class定义型:在head与head之间添加属性值，可以同时给多个class添加相同属性值，class定义名称在body与body之间的标记名称里面
 27     <head>
 28         <style type="text/csss">
 29                 .class定义名称{
 30                     属性1:属性值1；
 31                     属性2:属性值2；
 32                     ...
 33                 }
 34             //或者为多个class定义名称添加相同的属性值
 35             .class定义名称1,.class定义名称2...{
 36                     属性1:属性值1；
 37                     属性2:属性值2；
 38                     ...
 39             }
 40         </style>
 41     </head>
 42     
 43     <body>
 44         <标记名称 class="定义名称">内容</标记名称>
 45         <标记名称 class="定义名称1">内容</标记名称>
 46         <标记名称 class="定义名称2">内容</标记名称>
 47     </body>
 48     
 49     (3).id定义型:也是在head与head之间添加属性值，id类型也可以同时给多个id添加相同属性值，在body与body之间添加id定义名称
 50     <head>
 51         <style type="text/css">
 52                 #id定义名称{属性1:属性值1}
 53                 #id定义名称1，#id定义名称2...{属性1:属性1;属性2:属性2...}
 54         </style>
 55     </head>
 56     
 57     <body>
 58         <标记名称 class="定义名称">内容</标记名称>
 59         <标记名称 class="定义名称1">内容</标记名称>
 60         <标记名称 class="定义名称2">内容</标记名称>
 61     </body>
 62     
 63     4.外部排版样式
 64     在head与head之间引入外部的css文件，有两种引入方式，一个是用link单标签引入
 65     (1)
 66     <head>
 67         <link rel="stylesheet" type="text/css" href="URL" />        
 68     </head>
 69     (2)
 70     <head>
 71         <style type="text/css">
 72                     @import"URL";
 73         </style>
 74     </head>
 75 -->
 76 
 77 
 78 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 79 <html xmlns="http://www.w3.org/1999/xhtml">
 80 <head>
 81 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 82 <title>css基础入门</title>
 83 <style type="text/css">
 84     p{
 85         color:red;
 86         text-align:center;        
 87         font-size:12px;
 88     }
 89     .class{
 90             font-size:30px;
 91         }
 92     .class1,.class2{
 93             color:yellow;
 94             }
 95             
 96     #id{
 97             font-size:40px;
 98         }        
 99     #id1,#id2{
100             color:red;
101             }
102     
103 </style>
104 <link rel="stylesheet" type="text/css" href="13.css"/>
105 </head>
106 <body>
107 
108     <span style="color:#fff;background:#ccc;text-align:center">昨日一去不复回，噢耶</span>
109     <span style="color:#555;background:#666;text-align:center">昨日一去不复回，噢耶</span>
110     <span style="color:#111;background:#999;text-align:center">昨日一去不复回，噢耶</span>
111     <!--区块和内联块的区别-->
112     <div style="color:#fff;background:#666;text-align:center">昨日一去不复回，噢耶</div>
113     <div style="color:#555;background:#999;text-align:center">昨日一去不复回，噢耶</div>
114     <div style="color:#111;background:#ccc;text-align:center">昨日一去不复回，噢耶</div>
115     <br/>
116     <div class="class">昨日一去不复回，噢耶</div>
117     <div class="class1">昨日一去不复回，噢耶</div>
118     <div class="class2">昨日一去不复回，噢耶</div>
119     
120     <span id="id">昨日一去不复回，噢耶</span>
121     <span id="id1">昨日一去不复回，噢耶</span>
122     <span id="id2">昨日一去不复回，噢耶</span>
123     
124     <p>青春就是用来怀恋</p>
125     
126     <h6>哈哈哈哈哈哈哈哈哈哈</h6>
127 
128     </div>
129 </body>
130 </html>
1 //13.css
2 h6{
3     text-align:right;
4     font-size:40px;
5     background:#ddd;
6     color:blue;
7 }
  1 <!--
  2     本节课主要讲解了三点：css中的长度单位和颜色，css中文字的属性，css中文本的属性
  3     14.1css中的长度单位和颜色
  4     css中长度的单位有8种，具体哪八种不说，不过最常用的还是像素px
  5     css中的颜色有三种形式：
  6     1.十六进制的颜色代码color:#ff0000;
  7     2.颜色名称color:red;
  8     3.三原色:rgb(255,0,0);
  9     
 10     14.2css中字体的属性
 11     css中字体的属性有5中:
 12     font-style是否倾斜，属性值:normal(正常显示),italic(倾斜)
 13     font-variant是否大小写字符变成同等大写字母，属性值:normal(正常显示)，small-caps(将英文大小字母变大小字母，但保持小写字母的大小)
 14     font-weight是否加粗，属性值:normal(正常显示)，bold(加粗)
 15     font-size字体大小，属性值可以是百分比也可以是像素px
 16     font-family字体的名称，属性值就是字体名称    
 17     
 18     14.3css中的文本属性：有一个color，四个text，三个spacing，还有一个vertical-align
 19     css中的文本属性共有9种:
 20     color文本颜色属性，属性值是颜色的三种类型1，十六进制颜色代码，颜色名称，三原色
 21     
 22     letter-spacing字母之间的距离,属性值:normal(正常距离)，长度px
 23     word-spacing英文单词之间的距离，属性值:normal(正常距离),长度px
 24     white-spacing如何处理字符间的空白，属性值:normal（文本自动处理换行），（pre换行和空白受保护），（nowrap强制在一行）
 25 
 26     text-decoration文本的线,属性值:none(正常显示，没任何线)，undreline（下划线），overline（顶上线），line-through（管穿线）
 27     text-indent文本首行缩进多少行:属性值:长度和百分比
 28     text-transform文本的字符如何显示，属性值:none（正常显示），capitalize（字符串第一个字符大写）,uppercase(所有字符大写)，lowercase（所有字符小写）
 29     text-align文本位置,属性值:left,center,right
 30     
 31     vertical-align:设置字符与字符或者字段与图片的关系：属性值sub，super,前两个是对字符与字符的关系，top,,middle,bottom,text-top,text-bottom,baseline
 32         
 33     
 34     
 35     
 36 -->
 37 
 38 
 39 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 40 <html xmlns="http://www.w3.org/1999/xhtml">
 41 <head>
 42 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 43 <title>css文字属性</title>
 44 <style type="text/css">
 45 span{
 46     font-family:Harlow Solid;
 47     font-style:italic;
 48     font-size:100px;
 49     font-variant:normal;
 50     font-weight:bold;
 51     text-align:center;
 52 }
 53 center{
 54         text-align:center;
 55         background:#aaa;
 56     }
 57 
 58 div{
 59     color:#111;
 60     letter-spacing:10px;
 61     word-spacing:50px;
 62     text-decoration:none;
 63     text-align:center;    
 64     font-weight:bold;
 65     }
 66 a{
 67     text-decoration:none;
 68     text-transform:uppercase;
 69     color:#aaa;
 70     }
 71     p{
 72             text-indent:70px;
 73             line-height:20px;
 74             white-space:pre;
 75         }
 76 .ysfox{
 77         vertical-align:baseline;
 78     }
 79 #vertical{
 80         vertical-align:sub;
 81         vertical-align:super;
 82         
 83         }
 84 </style>
 85 </head>
 86 <body>
 87 
 88 <div>Welcome to us web!</div>
 89 <span><center>Ysfox</center></span>
 90 
 91 <div><a href="http://www.ysfox.com">www.ysfox.com</a></div>
 92     
 93 <p>YsfoxYsfoxsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfo
 94      YsfoxYsfoxsfoxYsfoxYsfoxYsfox<img class="ysfox" border="1" src="ysfox.jpg">YsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfo
 95      sfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYYsf
 96      sfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfo</p>
 97 
 98 
 99 X<x id="vertical">2</x>
100 
101 </body>
102 </html>
 1 <!--
 2     本节课主要讲解了两点，css中的背景属性和css中的列表属性
 3     15.1css中的背景属性有5个:background-color,background-image,background-attachment,background-repeat,background-position
 4     background-color有四个属性值，默认属性值是transparent透明，然后就是颜色代码，或者颜色名称，或者RGB三原色
 5     background-image有两个属性值，默认的属性值是none（没有设置图片），第二个属性值是Url("图片地址")
 6     background-repeat有四个属性值，默认属性值是repeat,另外还有repeat-x，repeat-y和no-repeat
 7     background-position有九个属性值，都是top，center，bottom和right,center,left两两组合的值
 8     bakcground-attachment（图片是否固定），它有两个属性值，默认属性值为scroll，可以随着滚动条移动，另一个属性值是fixed，固定，不会随着滚动条移动而移动
 9     背景属性有简写格式：background:color image repeat position attachment; 注意格式，是空格不是分号也不是逗号
10     
11     15.2css中的列表属性有3个:list-style-type,list-style-position,list-style-image
12     list-style-type有九个属性，none，disc,circle,square,decimal,lower-alpha,upper-alpha,lower-number,upper-number,默认属性是disc
13     list-style-position有两个属性，默认属性是outside(清单项目正常)，inside(清单项目往右移)
14     list-style-image也有两个属性，一个是默认none，另一个是url("图片地址")
15     列表熟悉感的简写格式：list-style:none inside url("home.gif");
16     
17     
18 -->
19 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
20 <html xmlns="http://www.w3.org/1999/xhtml">
21 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
22 <html xmlns="http://www.w3.org/1999/xhtml">
23 <head>
24 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
25 <title>css背景和列表</title>
26 <style type="text/css">
27     body{
28         /*
29             background-color:rgb(10,20,30);
30             background-image:url("1.jpg");
31             background-repeat:repeat-y;
32             background-position:top right;
33             background-attachment:fixed;
34             */
35             background:#fff url("Ysfox.jpg") repeat-y top right fixed;
36         }    
37         p{
38                 color:black;
39                 font-weight:bold;
40             }
41     li{
42             /*
43             list-style-type:none;
44             list-style-position:outside;
45             list-style-image:url("home.gif");
46             line-height:300%;*/
47         /*
48             list-style-type:none;
49             line-height:30px;
50             background:url("email.gif") no-repeat left center;
51             */
52             
53         
54         
55             list-style: inside url("home.gif") none;
56             
57         }
58 </style>
59 
60 </head>
61 <body>
62 <ul>
63     <li>www.wyszxqy.com</li>    
64     <li>www.wyszxqy.com</li>    
65     <li>www.wyszxqy.com</li>    
66     <li>www.wyszxqy.com</li>    
67     <li>www.wyszxqy.com</li>    
68     <li>www.wyszxqy.com</li>    
69     <li>www.wyszxqy.com</li>    
70     <li>www.wyszxqy.com</li>    
71     <li>www.wyszxqy.com</li>    
72     <li>www.wyszxqy.com</li>    
73 </ul>
74 <p>www.Ysfox.com</p>
75 <p>www.Ysfox.com</p>
76 <p>www.Ysfox.com</p>
77 <p>www.Ysfox.com</p>
78 <p>www.Ysfox.com</p>
79 <p>www.Ysfox.com</p>
80 <p>www.Ysfox.com</p>
81 <p>www.Ysfox.com</p>
82 <p>www.Ysfox.com</p>
83 <p>www.Ysfox.com</p>
84 <p>www.Ysfox.com</p>
85 <p>www.Ysfox.com</p>
86 <p>www.Ysfox.com</p>
87 <p>www.Ysfox.com</p>
88 <p>www.Ysfox.com</p>
89 <p>www.Ysfox.com</p>
90 <p>www.Ysfox.com</p>
91 <p>www.Ysfox.com</p>
92 <p>www.Ysfox.com</p>
93 
94 </body>
95 </html>
 1 <!--
 2     本节课主要讲解了css的边框与边界
 3     16.1css边框属性有三个:border-style,border-color,border-width
 4     border-style的属性值有none,dotted,dashed,solid,double五种，默认属性值是none，边框的样式也也可像下面边框颜色一样为变上右下左的边框设置不同的样式
 5     border-color的属性值就是颜色名称，分四种排列方式（单个颜色就是四面都是这个颜色）（两个颜色就是上下为第一个色，左右为第二个四）（三个颜色就是上为第一个颜色，左右为第二个颜色，下为第三个颜色）（四个颜色则是上右下左依次一个颜色）
 6     border-width的属性也可像边框颜色那样为上右下左的边框设置不同的宽度，宽度是px
 7     边框属性的简写格式：
 8     border:样式 颜色 宽度;
 9     
10     16.2css边界的属性有两个:padding和margin
11     padding(内边距)的属性值为像素大小或者百分比,另外可以像边框颜色那样设置上右下左的内边距，另外padding还可以分别和top，right,bottom,left
12     组合去单独设置某一边的内边距
13     margin(外边距)的属性有auto（自动居中），像素大小或者百分比，它也可以像边框颜色那样设置外边距，另外margin还可以分别和top,right,bottom,left
14     组合去单独设置某一边的外边距
15     注意一点:body默认margin为10px
16 -->
17 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
18 <html xmlns="http://www.w3.org/1999/xhtml">
19 <head>
20 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
21 <title>css边框和边界</title>
22     <style type="text/css">
23             img{
24                 /*
25                     border-style:dotted dashed double solid;
26                     border-color:red blue yellow green;
27                     border-width:10px 20px 30px 40px;
28                     */
29                     border:double rgb(145,145,145) 20px;
30                 }
31             body{
32                     margin:0px;
33                 }
34             table{
35                 /*
36                     padding-top:50px;
37                     margin:200px;
38                     */
39                     padding:50px 30px 10px 5px;
40                     margin-top:50px;
41                 }
42                 td{
43                         color:white;
44                         vertical-align:text-top;
45                         text-align:left;
46                     }
47     </style>
48 </head>
49 <body>
50 <table width="200px" height="200px" border="1px" bgcolor="#235674" cellpadding="0" cellspacing="0">
51     <tr><td>YsfoxYsfoxYsfoxYsfox</td></tr>    
52 </table>
53     <br/><br/>
54 <img src="Ysfox.jpg"/>
55 </body>
56 </html>

 

  1 <!--
  2     本章主要讲解区块，主要讲解五点:
  3     17.1css区块的宽高:属性有6点width，height，max-height(自适应最大高度),min-height(自适应最小高度),max-width(自适应最大宽度),min-width(自适应最小宽度)，属性值都是像素大小和百分比以及auto，auto是自动适应高度
  4     17.2css区块的浮动:属性有两个float,clear.
  5     float属性值有none(正常显示)，left，right
  6     clear属性值有none(允许左右浮动)，left(清除左边浮动)，right(清除右边浮动)，both(清除两边浮动)
  7     17.3css中区块的定位:属性有6点position,left,right,top,left,z-index(设置多个区块的排列顺序，属性值是数值，数值越大越拍前)
  8     position的属性值：satic，relative(相对点，相对于区块左上角开始点)，absolute(绝对点，相对于网页左上角开始)，其它几个的属性值是像素，百分比和auto(我也不懂auto是什么意思)
  9     117.4css中区块溢出:属性overflow,overflow-x,overflow-y,属性值为visible(不处理异常也不添加滚动条)，auto(自动处理溢出，超过区块大小自动加滚动条)，hidden(不显示溢出的部分内容)，scroll(总是显示滚动条)
 10 17.5css中区块的滚动条
 11 scrollbar-face-color
 12 scrollbar-arrow-color
 13 scrollbar-track-color        //滚动条的拖动区域
 14 scrollbar-base-color
 15 scrollbar-highlight-color
 16 scrollbar-3Dlight-color
 17 scrollbar-dackshadow-color
 18 scrollbar-shadow-color
 19     
 20     
 21 -->
 22 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 23 <html xmlns="http://www.w3.org/1999/xhtml">
 24 <head>
 25 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 26 <title>css区块，浮动，定位，溢出，滚动条</title>
 27     <style type="text/css">
 28     
 29         #block{
 30                 width:200px;
 31                 background-color:#225577;        
 32                 max-height:200px;            //自适应高度，
 33                 min-height:100px;
 34                 
 35                 height:200px;
 36                 background-color:#337799;
 37                 max-width:300px;
 38                 min-width:100px;
 39             }
 40         #block1{
 41                 width:200px;
 42                 height:200px;
 43                 background-color:red;
 44                 float:left;
 45             }
 46         #block2{
 47                 width:200px;
 48                 height:200px;
 49                 background-color:blue;
 50                 float:left;
 51             }
 52         #block3{
 53                 width:200px;
 54                 height:200px;
 55                 background-color:green;
 56                 clear:left;
 57                     }
 58     
 59         img{
 60                 position:absolute;
 61                 top:200px;
 62                 left:100px;
 63             }
 64         #div1{
 65                 font-size:100px;
 66                 font-family:Ravie;
 67                 color:#999;        
 68                 position:absolute;
 69                 left:400px;
 70                 top:400px;    
 71                 z-index:3;
 72             }    
 73         #div2{
 74                 font-size:100px;
 75                 font-family:Ravie;
 76                 color:#666;
 77                 position:absolute;
 78                 left:402px;
 79                 top:402px;        
 80                 z-index:2;
 81             }    
 82         #div3{
 83                 font-size:100px;
 84                 font-family:Ravie;
 85                 color:#333;    
 86                 position:absolute;
 87                 left:404px;
 88                 top:404px;    
 89                 z-index:1;
 90             }    
 91         #div5{
 92                 background-color:red;
 93                 width:200px;
 94                 height:200px;
 95                 overflow-y:auto;
 96                 scrollbar-face-color:red;
 97                 scrollbar-arrow-color:blue;
 98                 scrollbar-track-color:yellow;
 99                 scrollbar-base-color:black;
100                 scrollbar-shadow-color:green;
101                 scrollbar-highlight-color:blue;
102                 scrollbar-3Dlight-color:white;
103                 scrollbar-darkshadow-color:orange;
104             }
105     </style>    
106 </head>
107 <body>
108     <div id="div5">
109 www.Ysfox.com,www.Ysfox.com<br/>
110 www.Ysfox.com,www.Ysfox.com<br/>
111 www.Ysfox.com,www.Ysfox.com<br/>
112 www.Ysfox.com,www.Ysfox.com<br/>
113 www.Ysfox.com,www.Ysfox.com<br/>
114 www.Ysfox.com,www.Ysfox.com<br/>
115 www.Ysfox.com,www.Ysfox.com<br/>
116 www.Ysfox.com,www.Ysfox.com<br/>
117 www.Ysfox.com,www.Ysfox.com<br/>
118 www.Ysfox.com,www.Ysfox.com<br/>
119 www.Ysfox.com,www.Ysfox.com<br/>
120 www.Ysfox.com,www.Ysfox.com<br/>
121 www.Ysfox.com,www.Ysfox.com<br/>
122 www.Ysfox.com,www.Ysfox.com<br/>
123 www.Ysfox.com,www.Ysfox.com<br/>
124 www.Ysfox.com,www.Ysfox.com<br/>
125 www.Ysfox.com,www.Ysfox.com<br/>
126 www.Ysfox.com,www.Ysfox.com<br/>
127 www.Ysfox.com,www.Ysfox.com<br/>
128 www.Ysfox.com,www.Ysfox.com<br/>
129     </div>
130     
131     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
132     <img src="1.jpg"/>
133     <br/>
134     YsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfox
135     <div id="div1">Ysfox</div>
136     <div id="div2">Ysfox</div>
137     <div id="div3">Ysfox</div>
138 
139 
140     <div id="block1"></div>
141     <div id="block2"></div>
142     <div id="block3"></div>
143     <div id="block">
144         YsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfox<br/>
145         YsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfox<br/>
146         YsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfox<br/>
147         YsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfox<br/>
148         YsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfox<br/>
149         YsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfox<br/>
150         YsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfox<br/>
151         YsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfox<br/>
152         YsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfox<br/>
153         YsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfox<br/>
154         YsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfox<br/>
155         YsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfox<br/>
156         YsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfox<br/>
157         YsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfox<br/>
158         YsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfox<br/>
159         YsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfox<br/>
160         YsfoxYsfoxYsfoxYsfoxYsfoxYsfoxYsfox<br/>
161         </div>
162 
163 </body>
164 </html>
 1 <!--
 2     本节课主要讲解四点内容
 3     18.1css中超链接的伪类属性
 4         css超链接的伪类属性有四个：
 5             a:link,超链接未被点选的状态
 6             a:visited,超链接已被点选过的状态
 7             a:active，鼠标点击在上面，但是没有放开时的状态
 8             a:hover,鼠标放在上面的状态
 9         css中input伪类
10             input:focus，鼠标点击输入框时状态
11     18.2css中光标的使用
12         css鼠标属性只有一个cursor，但是它有很多属性值(hand，pointer)(手形),wait,help,crosshair(十字),text(输入),auto(自动),default(箭头),move(移动),最重要的一个URL("xxx.ani/cur")
13     18.3css中缩放的使用
14         css中缩放的属性只有一个zoom，它有两个属性值，一个normal，一个百分比或浮点数
15     
16 -->
17 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
18 <html xmlns="http://www.w3.org/1999/xhtml">
19 <head>
20 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
21 <title>css超链接,光标,DHTML,缩放</title>
22 <style type="text/css">
23         a:link{
24             color:red;
25             text-decoration:underline;
26             background-color:black;
27             border-style:solid;
28             border-color:red;
29         }    
30         a:hover{
31             color:black;
32             text-decoration:overline;
33             background-color:yellow;
34             border-style:dashed;
35             border-color:black;
36             }
37         a:visited{
38             color:purple;
39             text-decoration:line-through;
40             background-color:green;
41             border-style:double;
42             border-color:purple;
43             }
44         a:active{
45                 color:white;
46                 text-decoration:none;
47                 background-color:blue;
48                 border-style:dotted;
49                 border-color:white;
50             }
51         .cursor1{
52                 /*cursor:wait;*/
53                 /*cursor:crosshair;*/
54                 /*cursor:auto;*/
55                 /*cursor:default;*/
56                 cursor:text;            
57             }
58         .cursor2{
59                 cursor:help;
60             }
61         .cursor3{
62 
63                 /*cursor:url("arrow.ani");不起作用了*/
64                 cursor:wait;
65             }
66 div{
67         width:250px;
68         height:250px;
69         background-color:rgb(0,0,0);
70         padding-top:5px;
71         text-align:center;
72         zoom:2.5;
73     }
74 img{
75         border-style:dashed;
76         border-color:white;
77     }
78 </style>
79 </head>
80 <body>
81 <div>
82     <a class=cursor1 href="http://www.Ysfox.com">www.Ysfox.com</a>
83     <br/>
84     <img src="1.jpg" />    
85 </div>
86 <br/><br/>
87 <a class=cursor2 href="http://www.yc60.com">www.yc60.com</a>
88 <a class=cursor3 href="http://www.google.com">www.google.com</a>
89 </body>
90 </html>
 1 <!--
 2     本节课主要讲解滤镜，很烦的一节课，这节课讲解了很少的一部分
 3     注意：滤镜是IE的专属，而且它只用于快对象，
 4     所以内联快要用滤镜必须要先设置它的宽和高或者设置positive为absolute或者
 5     把display属性设置为block
 6     经测试，以下滤镜代码只在IE6以下有效
 7     HTML中滤镜Filter分为三种：
 8     1.界面滤镜
 9     2.静态滤镜
10             (1)属性Alpha(透明):属性值(透明度)opacity(0-100),(透明样式)style(1,2,3)
11             (2)属性Blur(模糊):属性值(模糊度)strength(数字)，direction(0-360)(模糊方向),add(true/false)(是否印象派)
12             (6)属性Shdow(阴影),属性值color(颜色)，strength(模糊加强)，direction(模糊方向)
13             (4)属性DropShadow(阴影)，属性值(颜色)color(颜色),offx(数值)(x向偏移)，offy(数值)(y向偏移),positive(true/false)(是否建立透明)
14             (5)属性Invert(负片)，无属性值，属性Gray(灰色)，无属性值，属性Xray(X光),无属性值
15             (3)属性Flipv(垂直翻转)，无属性值,属性Fliph(水平翻转)，无属性值
16             如何记忆；透明和模糊相反，阴影有两个，无属性有两个            
17     3.转换滤镜
18     
19     
20     
21 -->
22 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
23 <html xmlns="http://www.w3.org/1999/xhtml">
24 <head>
25 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
26 <title>css滤镜</title>
27 <style type="text/css">
28     div{
29         
30             width:200px;
31             height:100px;
32             /*background-color:red;*/
33             text-align:center;
34             line-height:100px;
35             font-size:20px;
36             /*filter:alpha(style=2,opacity=60)*/
37             filter:dropshadow(color="red",offx=10px,offy=10px,positive=true);
38             filter:shadow(color=orange,direction=70,strength=100);
39         }
40         img{
41             /*filter:blur(strength=130,direction=219,add=true);*/
42             filter:flipv();
43             filter:fliph();
44             filter:gray();
45             filter:xray();
46             filter:invert();
47 
48             }
49 </style>
50 </head>
51 <body>
52     <div>http://www.Ysfox.com</div>
53     <img src="1.jpg" />
54 </body>
55 </html>
  1 <!--
  2         本节课主要讲解了CSS的定义选择器，这节课很多，但是这节课很重要。
  3         20.1id和class的区别，以及分别和标记结合使用，以及id和class结合使用
  4             (1)id类型是唯一使用标记，一般用于对页面中唯一的元素定义规则。
  5             (2)id和标记结合使用，提高精确定位
  6             (3)class类型是多重使用标记，一般用于对页面中重复的元素定义规则
  7             (4)class和标记结合使用，提高定位范围
  8         20.2层叠，所谓层叠就是在为一个html文件引入多个CSS规则时，如果CSS中没有优先级，那么越是最后给的规则就是主规则
  9         20.3分组，所谓分组就是将css属性相同的标签归为一类，将需要单独设置CSS的标签单独抽出来单独设置CSS，这样简化书写，当然这里的标签也可以是标记，id，class
 10         20.4继承，所谓继承就是在HTML嵌套标签语句中，内部的标签继承外部标签的属性
 11         20.5上下文选择器,所谓上下文选择器，就是在嵌入标签语句中，通过层层标签为子标签定义CSS规则，当然这里的标签可以是标记，id，class
 12         20.6多级子类选择器，所谓的子类选择器就是在class后添加多个子类标签。
 13         20.7其它选择器
 14             (1)伪类（超链接伪类和文本框伪类）input:focus{属性:属性值}
 15             (2)通用选择器*{}
 16             (3)高级选择器
 17                     a.子类选择器(>表示上一级)
 18                     b.相邻同胞选择器(两个相邻标签的用一个+连接来定义后一个标签的css)
 19                     c.属性选择器(标签[属性]{属性值}，伪类:标签[属性]:hover{属性:属性值})
 20                 
 21         
 22 -->
 23 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 24 <html xmlns="http://www.w3.org/1999/xhtml">
 25 <head>
 26 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 27 <title>CSS定义选择器</title>
 28 <link rel="stylesheet" type="text/css" href="1.css" />
 29 <link rel="stylesheet" type="text/css" href="2.css" />
 30 <link rel="stylesheet" type="text/css" href="3.css" />
 31 <style type="text/css">
 32 p{
 33         color:red;
 34         font-size:30px;
 35     }
 36 p#id{
 37         color:green;
 38         font-weight:bold;
 39     }
 40 p.class{
 41         color:orange;
 42         font-size:15px;
 43     }
 44 div#id{
 45         background-image:URL("1.jpg");
 46         width:200px;
 47         height:100px;
 48         text-align:center;
 49         line-height:30px;
 50     }
 51 ul#id{
 52         /*
 53         list-style-type:none;
 54         list-style-image:URL("home.gif");
 55         */
 56         list-style:none URL("home.gif");
 57     }
 58 li.class{
 59         color:red;
 60     }
 61 li.class a:link{
 62             color:black;
 63             background:orange;
 64         }
 65 li.class a:visited{
 66         color:yellow;
 67         background:black;
 68         text-decoration:none;
 69     }
 70 li.class a:active{
 71         color:pink;
 72         background:blue;
 73     }
 74 li.class a:hover{
 75         color:red;
 76         background:#213;
 77         border:5px solid #ca3;
 78     }
 79 br+input:focus{                        /*输入框伪类以及相邻同胞选择器*/
 80         color:red;
 81         background:#213;
 82         border:5px solid #ca3;
 83     }
 84 h1,h2,h3,h4{                /*分组*/
 85         color:blue;
 86         font-size:10px;
 87     }
 88 h4{
 89         font-size:15px;
 90         color:white;
 91         background-color:black;
 92         width:50px;
 93         height:50px;
 94         text-align:center;
 95         line-height:50px;
 96     }
 97 body{                                /*继承*/
 98         background-color:#34a;
 99         padding:0;
100         margin:0;
101     }
102 strong{
103         color:red;
104     }
105 strong i{                /*上下文选择器*/
106         color:blue;
107     }
108 div.class{        /*多级子类选择器*/
109     color:red;
110     background:#23a;
111     }
112 div.class1{
113     color:blue;
114     background:#aa3;
115     }
116 div.class2{
117     color:orange;
118     background:#4dd;
119     }
120 ul#nav li{
121         list-style-type:square;
122     }
123 ul#nav>li{                /*高级子类选择器，>表示前辈的li*/
124         list-style-type:disc;
125     }
126 p[property]{
127         color:#19c;
128         font-size:50px;
129     }
130 p[property]:hover{
131         color:#94e;
132         font-size:30px;
133     }
134 </style>
135 </head>
136 <body>
137 
138 <p >www.Ysfox.com</p>
139 <p id="id">www.Ysfox.com</p>
140 <p class="class">www.Ysfox.com</p>
141 <p class="class">www.Ysfox.com</p>
142 <p class="class">www.Ysfox.com</p>
143 <br/>
144 <div id="id">
145 <ul id="id">
146     <li class="class"><a href="http://www.Ysfox.com">www.Ysfox.com</a></li>
147     <li class="class"><a href="http://www.google.com">www.Qubiy.com</a></li>
148     <li class="class"><a href="http://www.baidu.com">www.Baidu.com</a></li>
149 </ul>
150 </div>
151 <br/><br/>
152 <input type="text" />
153 <br/><br/>
154 <img id="id" src="ysfox.jpg" />
155 
156 <h1>Ysfox</h1>
157 <h2>Ysfox</h2>
158 <h3>Ysfox</h3>
159 <h4>Ysfox</h4>
160 <br/><br/>
161 <strong>姓名:<i>张三</i></strong>
162 
163 <div class="class">www.Qubily.com</div>
164 <div class="class class1">www.Qubily.com</div>
165 <div class="class class1 class2">www.Qubily.com</div>
166 
167 
168 
169 <ul id="nav">
170     <li>HOME</li>    
171     <li>SERVER
172         <ul>
173             <li>XP</li>    
174             <li>WIN7</li>
175             <li>LINUX</LI>
176         </ul>
177     </li>
178     <li>CONTACT</li>
179 </ul>
180 
181 
182 
183 <p property="property">属性选择器</p>    
184 </body>
185 </html>
 1 <!--
 2         本节课主要讲解五点，这四点是对前面知识的巩固
 3         21.1.区块DIV
 4         主要巩固上节课的选择器，一共七点，第七点又分3点
 5 
 6         21.2.边距
 7         另外注意一点就区块的外边距margin自动扩展auto，margin-right:auto,是自动扩展右边，
 8         margin-left:auto自动扩展右边，margin:auto自动居中，注意外边距上下没有auto
 9         
10         21.3.边框
11         边框前面学过，主要有三个属性,这里border-style多添加了4个属性
12         border-style:none(无边框) dotted（点线） solid（实线）dashed（虚线）double（双线）
13         groove（凹槽）ridge（凸槽）inset（凹边）outset（凸边）
14         
15         21.4.定位
16         相对定位和绝对定位
17         这里要注意一点，在嵌套中，先相对外区域，在绝对内区域,这样嵌套中的内区域才能随着外区域走
18 
19 -->
20 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
21 <html xmlns="http://www.w3.org/1999/xhtml">
22 <head>
23 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
24 <title>CSS构造模型</title>
25 <link rel="stylesheet" type="text/css" href="1.css" />
26 <link rel="stylesheet" type="text/css" href="2.css" />
27 <link rel="stylesheet" type="text/css" href="3.css" />
28 <style type="text/css">
29 *{
30         margin:0px;
31         padding:0px;
32     }
33 #container{
34             width:auto;
35             background:orange;
36             border:3px solid black;
37             padding:20px;
38         }
39 #container p{
40         color:red;
41     }
42 #container>.box p{
43         color:blue;
44         border:1px solid black;
45         padding:20px;
46         margin:10px;
47     }
48 #id{
49         width:200px;
50         height:200px;
51         background:purple;
52         margin:10px auto;
53         border:10px ridge black;
54     }
55 #location{
56         width:200px;
57         height:200px;
58         background:green;
59         margin:100px;
60         position:relative;
61     }
62 #location p{
63     position:absolute;
64     left:100px;
65     top:100px;
66     }
67 </style>
68 </head>
69 <body>
70     <div id="location">
71         <p>定位</p>    
72         占位
73     </div>
74     <div id="container">
75         <p >www.Ysfox.com</p>    
76         <div class="box">
77             <p>www.Ysfox.com</p>
78         </div>
79         <div class="box">
80             <p>www.Ysfox.com</p>    
81         </div>
82     </div>
83     <div id="id">
84         <p>www.Ysfox.com</p>
85     </div>
86 
87 </body>
88 </html>
  1 <!--
  2 本节课讲解的内容很多，主要围绕着这几点来讲的
  3 22.1CSS中的颜色
  4 
  5     关于CSS的颜色有三种类型，这里不用累述
  6 22.2.display功能
  7     display有三个属性，none(不显示区块)，inline(将区块转为内联块)，block(将内联块转化为区块)
  8     注意：div，p是区块，i，strong是内联块
  9 22.3.渐变背景
 10     
 11 22.4给标题加图标
 12     注意：在调整图片位置时，可以用像素，也可以用百分比，还可以用center，left之类的关键字
 13 22.5圆顶角
 14         这个有问题？？？？？多做几次
 15 22.6CSS阴影
 16         这个有些问题？？？？多做几次
 17 
 18 -->
 19 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 20 <html xmlns="http://www.w3.org/1999/xhtml">
 21 <head>
 22 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 23 <title>CSS颜色、背景与图像</title>
 24 <link rel="stylesheet" type="text/css" href="1.css" />
 25 <link rel="stylesheet" type="text/css" href="2.css" />
 26 <link rel="stylesheet" type="text/css" href="3.css" />
 27 <style type="text/css">
 28 *{
 29     margin:0px;
 30     padding:0px;        
 31         }
 32 
 33 #box{                                    
 34             width:200px;
 35             height:200px;
 36             background:orange;
 37             display:block;
 38         }
 39     
 40 body{
 41         background:#FF0066 url("shadow.jpg") repeat-x;
 42     }
 43 h1{
 44         color:white;
 45         background:url("home.gif") no-repeat left 60%;
 46         text-indent:20px;
 47     }
 48 #container{
 49         width:320px;
 50         height:200px;
 51         background:blue url("bottom.gif") no-repeat left bottom;
 52         color:green;    
 53         margin:10px;
 54         
 55     }
 56 #container h2{
 57         width:auto;
 58         background:red url("top.gif") no-repeat left top;
 59         text-align:center;
 60         color:blue;
 61     }
 62 #container p{
 63         text-align:center;
 64         color:red;
 65         background:orange;
 66         padding-left:20px;
 67     }
 68 
 69 #bg{
 70         width:293px;
 71         height:253px;
 72         background:url("bgshadow.gif") no-repeat right bottom;
 73         margin:10px;
 74         padding:1px;
 75         position:relative;
 76         left:100px;
 77     }
 78 #bg img{
 79         border:none;
 80         position:absolute;
 81         top:-3px;
 82         left:-2px;
 83     }
 84 </style>
 85 </head>
 86 <body>
 87     <div id="bg">
 88         <img src="ysfox.jpg" />
 89     </div>
 90     
 91 <i id="box">
 92     www.Ysfox.com
 93 </i>
 94 <strong>www.Ysfox.com</strong>
 95 <h1>www.Ysfox.com</h1>
 96 <div id="container">
 97         <h2>Ysfox</h2>    
 98     <p> www.ysfox.com
 99             www.ysfox.com
100             www.ysfox.com
101             www.ysfox.com
102             www.ysfox.com
103             www.ysfox.com
104             www.ysfox.com
105             www.ysfox.com
106             www.ysfox.com
107             www.ysfox.com
108             www.ysfox.com
109             www.ysfox.com
110             www.ysfox.com
111             www.y
112 
113 </body>
114 </html>
  1 <!--
  2     本节课主要讲解列表和导航
  3     23.1列表
  4     (1)列表中ul和li都是区块
  5     (2)ul默认的margin和padding值都不为0
  6     (3)可以通过display方法把li的区块转换成内联块，这样可以成为导航
  7     (4)给li添加列表图片
  8     
  9     23.2垂直导航栏
 10     23.3.垂直翻转图片导航
 11     23.4.水平导航
 12 -->
 13 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 14 <html xmlns="http://www.w3.org/1999/xhtml">
 15 <head>
 16 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 17 <title>CSS构造列表与导航</title>
 18 <link rel="stylesheet" type="text/css" href="1.css" />
 19 <link rel="stylesheet" type="text/css" href="2.css" />
 20 <link rel="stylesheet" type="text/css" href="3.css" />
 21 <style type="text/css">
 22 body{
 23         margin:0px;
 24         padding:0px;
 25     }
 26 
 27 ul{
 28         margin:0px;
 29         list-style-type:none;
 30         background:none;
 31     }
 32 ul li{
 33         background:black url("home.gif") no-repeat left center;
 34         line-height:30px;
 35         padding-left:20px;
 36         color:red;
 37         display:inline;
 38         margin-left:20px;
 39     }    
 40     
 41 ul#nav {                                                            /*垂直导航*/
 42         width:200px;
 43         margin:10px;
 44         padding:0px;
 45     }
 46 
 47 ul#nav li{
 48 
 49         display:block;
 50         background: #ccc none;
 51         margin:0px;
 52         width:200px;
 53         text-align:center;
 54         padding:2px;
 55         border-top:1px solid #aaa;
 56         border-left:1px solid #aaa;
 57         border-right:1px solid #333;
 58         border-bottom:1px solid #666;
 59     }
 60 ul#nav li a{
 61         text-decoration:none;
 62         color:black;
 63         font-size:12px;
 64     }
 65 ul#picNav {
 66         width:200px;
 67         height:160px;
 68         margin:10px;
 69         padding:0px;
 70     }
 71 ul#picNav li {
 72 
 73         list-style-type:none;
 74         background:none;
 75         display:block;
 76         margin:0px;
 77         padding:0px;
 78     }
 79 ul#picNav li a{
 80         display:block;
 81         width:200px;
 82         height:40px;
 83         color:white;
 84         background:url("pixy-rovell.jpg") no-repeat left top;
 85         text-align:center;
 86         text-decoration:none;
 87     }
 88 ul#picNav li a:hover{
 89         background:url("pixy-rovell.jpg") no-repeat right top;
 90     }
 91     
 92 ul#vNav{
 93         display:block;
 94         margin:10px;
 95         padding:0px;
 96         width:400px;
 97         height:25px;
 98         background:url("diliver.jpg");
 99 
100     }
101 ul#vNav li{
102         display:block;
103         margin:0 0 0 10px;
104         width:100;
105         height:25px;
106         width:50px;
107         padding:0 0 0 20px;
108         background:url("f.jpg") no-repeat right bottom;
109         float:left;
110     }
111 ul#vNav li a{
112         font-size:12px;
113         color:white;
114         text-decoration:none;
115 
116     }
117 </style>
118 </head>
119 <body>
120 <ul>
121     <li>Ysfox</li>
122     <li>Ysfox</li>
123     <li>Ysfox</li>
124     <li>Ysfox</li>
125     <li>Ysfox</li>
126 </ul>
127 <br/><br/>
128 <ul id="nav">
129     <li><a href="http://www.google.com/">Google</a></li>
130     <li><a href="http://www.baidu.com/">Baidu</a></li>
131     <li><a href="http://www.hao123.com/">Hao123</a></li>
132     <li><a href="http://www.sina.com.cn/">Sina</a></li>
133     <li><a href="http://www.qq.com/">Tencent</a></li>
134 </ul>
135 
136 <br/><br/>
137 <ul id="picNav">
138     <li><a href="http://www.google.com/">Google</a></li>
139     <li><a href="http://www.baidu.com/">Baidu</a></li>
140     <li><a href="http://www.hao123.com/">Hao123</a></li>
141     <li><a href="http://www.sina.com.cn/">Sina</a></li>
142     <li><a href="http://www.qq.com/">Tencent</a></li>
143 </ul>
144 
145 <br/><br/>
146 <ul id="vNav">
147     <li><a href="http://www.google.com/">Google</a></li>
148     <li><a href="http://www.baidu.com/">Baidu</a></li>
149     <li><a href="http://www.hao123.com/">Hao123</a></li>
150     <li><a href="http://www.sina.com.cn/">Sina</a></li>
151     <li><a href="http://www.qq.com/">Tencent</a></li>
152 </ul>
153 
154 
155 </html>

 

posted @ 2013-06-07 01:06  ysfox  阅读(368)  评论(0)    收藏  举报