JS入门到精通第13章级联样式表

分类Javascript时间2026-06-26 16:17:50发布信义之树浏览102

导读：一、练习 1. 练习1 （1）源代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>设计文字的样式</title&g...

一、练习

1. 练习1

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>设计文字的样式</title>
</head>

<body>
   <h2>
         <font color="#FF0000" face="宋体">文字1</font> <!--在页面中定义文字样式-->
   </h2>
   <p>
         正文内容1       <!--页面显示普通文字-->
   </p>
    <h2>
         <font color="#FF0000" face="宋体">文字2</font><!--在页面中定义文字样式-->
   </h2>
   <p>
         正文内容2
   </p>
    <h2>
         <font color="#FF0000" face="宋体">文字3</font>
   </h2>
   <p>
         正文内容3
   </p>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_1/

（3）Tips

回到幼儿园。

2. 练习2

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>更改CSS样式样式后的页面效果</title><!--以下为定义的CSS样式-->

<style>
   h2{
        font-family: 黑体;
        color:blue;
      }
</style>


</head>
<body>
   <h2>            <!--定义样式后页面会自动加载样式-->
        文字1
   </h2>
   <p>
         正文内容1
   </p>
    <h2>
        文字2
   </h2>
   <p>
         正文内容2
   </p>
    <h2>
        文字3
   </h2>
   <p>
         正文内容3
   </p>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_2/

（3）Tips

连续。

3. 练习3

（1）源代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<title>选中的行背景变色</title>
</head>

<body>
<table width="234" height="77" border="1">
  <tr id="tr1" onMouseOver="over(this.id)" onMouseOut="out(this.id)">
    <td width="52">&nbsp;</td>
    <td width="65">商品</td>
    <td width="95">价格（元）</td>
  </tr>
  <tr id="tr2" onMouseOver="over(this.id)" onMouseOut="out(this.id)">
    <td>A商场</td>
    <td>S商品</td>
    <td>100</td>
  </tr>
  <tr id="tr3" onMouseOver="over(this.id)" onMouseOut="out(this.id)">
    <td>B商场</td>
    <td>S商品</td>
    <td>80</td>
  </tr>
</table>
<script type="text/javascript">
function over(trname){
    eval(trname).style.backgroundColor="#0000FF";
    eval(trname).style.color="#FFFFFF";
}
function out(trname){
    eval(trname).style.backgroundColor="#FFFFFF";
    eval(trname).style.color="#000000";
}
</script>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_3/

（3）Tips

onMouseOver="over(this.id)"，eval(trname).style.color。

4. 练习4

（1）源代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<title>背景固定居中</title>
</head>

<body>
<table width="318" height="1081" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
<p>
<script type="text/javascript">
document.body.style.backgroundImage="URL(1.jpg)";
document.body.style.backgroundPosition="center";
document.body.style.backgroundRepeat="no-repeat";
document.body.style.backgroundAttachment="fixed";
</script>
</p>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_4/

（3）Tips

document.body.style.backgroundImage。

5. 练习5

（1）源代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<title>单元格边框变色</title>
</head>

<body>
<table id="table1" width="200">
  <tr>
    <td width="60" id="Ttd0">&nbsp;</td>
    <td width="58" id="Ttd1">箱数</td>
    <td width="66" id="Ttd2">单价</td>
  </tr>
  <tr>
    <td id="Ttd3">葡萄</td>
    <td id="Ttd4">50</td>
    <td id="Ttd5">30</td>
  </tr>
  <tr>
    <td id="Ttd6">菠萝</td>
    <td id="Ttd7">60</td>
    <td id="Ttd8">35</td>
  </tr>
</table>
    
<script type="text/javascript">
var tt=true;
table1.cellSpacing="0";
table1.border="2";
function changcolor(){
    for (var i=0;i<9;i++){
        if (tt==true){eval("Ttd"+i).style.borderColor="#00FF00";}
        if (tt==false){eval("Ttd"+i).style.borderColor="#6666FF";}
    }
    tt=!tt;
    setTimeout("changcolor()",1000);
}
changcolor();
</script>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_5/

（3）Tips

eval，talbel1.cellSpacing，tablel1.border="2"。

6. 练习6

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>立体窗口</title>
</head>

<body><img src="1.jpg">
<script type="text/javascript">
//document.body.style.cssText="border:5 groove #CCCCFF";
document.body.style.borderWidth="5px";
document.body.style.borderColor="#CCCCFF";
document.body.style.borderStyle="groove"; //凹槽
</script>

</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_6/

（3）Tips

document.body.style.borderWidth，borderColor，borderStyle。

7. 练习7

（1）源代码

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
<title>百叶窗</title>
</head>

<body>
<center><img src="1.jpg" width="1002" height="656"></center>
    
<script type="text/javascript">
var s="";
for (i=1;i<=16;++i){
    s=s+'<div id="i'+i+'" style="position:absolute; left:0px; top:0px; background-color:#0066FF; border:'+"2px"+' '+"solid"+' '+"#0000FF"+' ">aaa</div>';
}
document.write(s);

var temp=new Array();
 
for (i=1;i<=16;i++){
    temp[i]=document.getElementById("i"+i).style;
    temp[i].width=document.body.clientWidth/16;
    temp[i].height=document.body.clientHeight;
    temp[i].left=(i-1)*parseInt(temp[i].width);
    //alert(temp[i].left);
}
    
var speed=30;    
var Height=document.body.clientHeight;
var Top=0;    
function kind(){
    Height-=speed;
    for (i=1;i<=16;i=i+2){
        temp[i].clip="rect(0 auto+"+Height+" 0)";
    }
    Top+=speed
    for (i=2;i<=16;i=i+2){
        temp[i].clip="rect("+Top+" auto auto auto)";
    }
    if (Height<=0)
        clearInterval(tim);
}
tim=setInterval("kind()",1000)
</script>
    
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_7/

（3）Tips

还是不太明白rect的用法，temp[i].clip 。

8. 练习8

（1）源代码

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
<title>烟花效果</title>
<style type="text/css">
body {background-color: #000000;}
</style>
    
</head>

<body>
<script type="text/javascript">
    //自定义变量及数组，并用数组来保存颜色值，在页面中添加多个层，设置其大小、颜色和初始位置
    var col = new Array('#fff000','#ffa000','#ff00ff','#00ff00','#0000ff','#ff0000','#ffffff');
    var p='<div id="rearDiv" style="position:absolute;top:0px;left:0px">AAA';
    var n=0;
    for (var i=0;i<14;++i){
        n++;
        if (n==col.length) n=0;
        p=p+'<div style="position:relative;width:8px;height:8px;background:'+col[n]+';font-size:13px">.</div>';
    }
    p=p+"BBB</div>";
    document.write(p);
    var Clrs = new Array('#ff0000','#00ff00','#000aff','#ff00ff','#ffa500','#ffff00','#00ff00','#ffffff','#fffff0');
    var sClrs = new Array('#ffa500','#55ff66','#AC9DFC','#fff000','#fffff0');
    var peepX;
    var peepY; //从小孔窥视 
    var step = 5;
    var tallyStep = 0;   //计数
    var backColor = '#ffa000';
    var Mtop = 250;
    var Mleft = 250;
    var rearDiv = document.getElementById("rearDiv");  //后部
    //自定义函数dissilient()，调用自定义函数enlarge()和reduce()，实现绽放的烟花效果
    function dissilient() {
        peepY = window.document.body.clientHeight/3;
        peepX = window.document.body.clientWidth/8;
        enlarge();
        tallyStep+= step;
        reduce();
        T=setTimeout("dissilient()",20);
    }
    //自定义函数enlarge()，利用正弦值来实现烟花的绽放与缩小
    function enlarge(){
        for (var i = 0 ; i < rearDiv.children.length ; i++) {
            var c=Math.round(Math.random()*(Clrs.length-1));
            if (tallyStep < 90)
                rearDiv.children[i].style.background=backColor;
            if (tallyStep > 90)
                rearDiv.children[i].style.background=Clrs[c];
            rearDiv.children[i].style.top = Mtop + peepY*Math.sin((tallyStep+i*5)/3)*Math.sin(550+tallyStep/100);
            rearDiv.children[i].style.left = Mleft + peepY*Math.cos((tallyStep+i*5)/3)*Math.sin(550+tallyStep/100);
        }
    }
    //自定义函数reduce()，用于改变烟花的绽放位置
    function reduce(){
        if (tallyStep == 220) {
            tallyStep = -10;
            var k=Math.round(Math.random()*(sClrs.length-1));
            backColor = sClrs[k];
            Dtop = window.document.body.clientHeight - 250;
            Dleft = peepX * 3.5;
            Mtop = Math.round(Math.random()*Dtop);
            Mleft = Math.round(Math.random()*Dleft);
            rearDiv.style.top = Mtop+document.body.scrollTop;
            rearDiv.style.left = Mleft+document.body.scrollLeft;
            if ((Mtop < 20) || (Mleft < 20)) {
            Mtop += 90;
            Mleft += 90;
            }
        }
    }
    dissilient();
</script>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_8/

（3）Tips

正弦太复杂，不带要研究了。

9. 练习9

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>跟随鼠标移动的图片</title>

</head>

<body onload="makesnake()" background="mr.jpg">
<div id="tdiv" style='position:absolute'>
    <img src='Mymouse.gif' width='32' height='32'>
</div>
    
<script type="text/javascript">
var x,y;
function handlerMM(){
    x =  window.event.x + document.body.clientLeft-16;
    y =     window.event.y + document.body.clientTop-16;
}
function makesnake() {
        var ob = document.getElementById("tdiv");
        ob.style.left=x+"px";
        ob.style.top=y+"px";
        var timer=setTimeout("makesnake()",10);
}
document.onmousemove = handlerMM;
</script>

</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_9/

（3）Tips

小小优化了一下。

10. 练习10

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>改变超链接字体样式</title>
<style>
    body{font-size: 9pt;}
    a:hover {color: #FF0000;}
    a {text-decoration: none;    color: #3C404D;}
    table{
        width: 44%;
        height: 26px;
        margin: 0 auto;
        border-collapse:collapse;
        padding: -2px;
    }
    table td{
        text-align: center;
        background-image: url("Images/bg_Navigate.GIF");
    }
</style>
<script type="text/javascript">
function onmovein(v){
  if (v=="a"){
      a.style.fontWeight = "bold";//粗体
  }    
  if (v=="b"){
      b.style.fontStyle = "italic";//斜体
  }    
  if (v=="c"){
      c.style.textDecoration = "underline";//下划线
  }
  if (v=="d"){
    d.style.textDecoration = "line-through";//删除线

  }
  if (v=="e"){
    e.style.fontWeight = "bold";//粗体
    e.style.fontStyle = "italic";//斜体
  }
}
function onmoveout(){
    a.style.fontWeight = "normal";
    b.style.fontStyle = "normal";
    c.style.textDecoration = "none";
    d.style.textDecoration = "none";
    e.style.fontStyle = "normal";
    e.style.fontWeight = "normal";
}
</script>
</head>
<body>
<p>&nbsp;</p>
<p></p>
<table>
    <tr>
        <td>
            <a href="#" id="a" onmouseover="onmovein('a');" onmouseout="onmoveout();">粗体文字</a> ┊
            <a href="#" id="b" onmouseover="onmovein('b');" onmouseout="onmoveout();">斜体文字</a> ┊
            <a href="#" id="c" onmouseover="onmovein('c');" onmouseout="onmoveout();">下划线文字</a> ┊
            <a href="#" id="d" onmouseover="onmovein('d');" onmouseout="onmoveout();">删除线文字</a> ┊
            <a href="#" id="e" onmouseover="onmovein('e');" onmouseout="onmoveout();">粗斜体文字</a>
        </td>
    </tr>
</table>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_10/

（3）Tips

a.style.fontWeight="normal" 。

11. 练习11

（1）源代码

<!DOCTYPE>
<html>
<head>
  <meta charset="UTF-8">
<title>限制表格的宽度</title>
  <style>
    table{
      border: 2px solid #000000;
      border-collapse:collapse;
    }
    table td{padding: 0;}
  </style>
</head>

<body>
<!--在页面中添加一个表格，并设置表格的id名称-->
<table id="table1">
  <tr>
    <td> 本示例将限制单元格的宽度，当信息超出单元格的宽度时，单元格的高度将增大，而宽度却不向两边扩展。本示例将限制单元格的宽度，当信息超出单元格的宽度时，单元格的高度将增大，而宽度却不向两边扩展。本示例将限制单元格的宽度，当信息超出单元格的宽度时，单元格的高度将增大，而宽度却不向两边扩展。 </td>
  </tr>
</table>
    
<script type="text/javascript">
  //编写用于固定单元格宽度的JavaScript代码
  var w=180;
  var h=5;
  table1.align="center";
  table1.style.width=w;
  table1.style.height=h;
  table1.style.tableLayout="fixed";
</script>
    
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_11/

（3）Tips

tabel1.align="center"，tabel.style.tableLayout="fixed" 。

12. 练习12

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>使用类别选择器</title>
<!--以下为定义的CSS样式-->
<style> 
   .one{           
        font-family:宋体;         
        font-size:24px; 
        color:red;         
      }
      .two{
        font-family:宋体;
        font-size:16px;
        color:red; 
      }
      .three{
        font-family:宋体;
        font-size:12px;
        color:red; 
      }
</style>
</head>
<body>
   <h2>            <!--定义样式后页面会自动加载样式-->
        应用了选择器one
   </h2>
   <p>
         正文内容1      
   </p>
    <h2>
        应用了选择器two
   </h2>
   <p>
         正文内容2
   </p>
    <h2>
        应用了选择器three
   </h2>
   <p>
         正文内容3
   </p>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_12/

（3）Tips

类别选择器。

13. 练习13

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>使用多种类别选择器</title>
<!--以下为定义的CSS样式-->
<style>
  .size{font-size:16px;}
  .color{color:#F00;}
</style>

</head>
<body>
   <h2 class="size color">            <!--应用了两种样式的字体-->
        应用了两种CSS样式
   </h2>  
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_13/

（3）Tips

多种类别选择器。

14. 练习14

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>无标题文档</title>
</head>
    
<style>            
  #first{font-size:18px}
  #second{font-size:24px}
  #three{font-size:36px}    
</style>
    
<body>
    <p id="first">id选择器</p>    <!--在页面定义标记，并自动应用样式-->
    <p id="second">id选择器2</p>
    <p id="three">id选择器3</p>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_14/

（3）Tips

上上个没标注ID 。

15. 练习15

（1）源代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<title>应用CSS样式控制登录页面</title>
    
<style>    
    tabel{border-collapse:collapse;}
    td {                    /*定义表格列中文字样式*/
        font-size: 9pt;    
        color: #000000;
        padding-left:15px;
    }
    .btn_grey {                    /*定义控制按钮的类型选择器*/
    font-family: "宋体";    font-size: 9pt;color: #333333;    
    background-color: #ff0000;cursor: hand;padding:1px;height:19px;
    border-top: 1px solid #FFFFFF;border-right:1px solid #666666;
    border-bottom: 1px solid #666666;border-left: 1px solid #FFFFFF;
    }
    input{                /*标签选择器*/
        font-family: "宋体";
        font-size: 9pt;
        color: #3F9;
        border: 1px solid #00ff00;
        
    }
    body {    /*标签选择器*/
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}    
</style>
</head>
    
<body>
<form id="form1" name="form1" method="post" action="">
    <p>使用CSS样式设置登录页面样式</p>                    <!--定义页头信息-->
    <table width="413" height="129" border="1" style="border-collapse: collapse;">
      <tr>
        <td width="91">用户名：</td>
        <td width="306"><div>
          <label for="textfield2"></label>
          <input type="text" name="textfield" id="textfield2" />    <!--在页面中定义用户名文本框-->
        </div></td>
      </tr>
      <tr>
        <td><div>密码：</div></td>
        <td><div>
          <label for="textfield3"></label>
          <input type="text" name="textfield2" id="textfield3" /><!--在页面中定义密码文本框-->
        </div></td>
      </tr>
      <tr>
        <td><div>&nbsp; </div></td>
        <td><div>
          <input name="button" type="submit"  id="button" value="提交" /><!--在页面中定义提交按钮-->
          <input type="reset" name="button2" id="button2" value="重置" />
        </div></td>
      </tr>
    </table>
</form>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_15/

（3）Tips

tabel{border-collapse:collapse;}写到style里没效为啥；label是干啥的来着？。

16. 练习16

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>应用行内样式控制页面</title>
<style type="text/css">
</style>
</head>

<body>
<table width="200" border="1">            <!--在页面中定义表格-->
    <tr>
      <td><p style="color:#F00; font-size:36px;">行内样式一</p></td>        <!--在页面文字中定义CSS样式-->
     </tr>
    <tr>
      <td><p style="color:#0FF; font-size:24px;">行内样式二</p></td>        
    </tr>
    <tr>
      <td><p style="color:#00F; font-size:18px;">行内样式三</p></td>
    </tr>
    <tr>
      <td><p style="color:#0F0; font-size:14px;">行内样式四</p></td>
    </tr>
</table>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_16/

（3）Tips

行内样式。

17. 练习17

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>使用内嵌式样式表</title>
<style type="text/css">
    h1,h2,h3{                /*在页面中定义比较选择器*/
    font-family:Tahoma, Geneva, sans-serif;        /*定义体质*/
    color:#F69;            /*文字颜色*/        
    }    
</style>
</head>
<body>
    <h1>文字1</h1>
    <h2>文字2</h2>
    <h3>文字3</h3>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_17/

（3）Tips

sans-serif字体类别。

18. 练习18

（1）源代码

index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>通过链接形式引入CSS样式</title>
<link rel="stylesheet" href="css.css">        <!--页面引入CSS样式表-->
</head>
<body>
    <h2>页面文字一</h2>        <!--在页面中添加文字-->
    <p>页面文字二</p>
</body>
</html>

css.css：

h1,h2,h3{                                /*定义CSS样式 */
    color:#6CFF;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
p{
    color:#F0CC;                        /*定义颜色*/
    font-weight:200;
    font-size:24px;                        /*设置字体大小*/
}

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_18/

（3）Tips

rel="stylesheet" 。

17. 练习17

（1）源代码

index.css：

td {                    /*表格样式*/
    font-size: 9pt;    color: #000000;
}
img{                    /*图片样式*/
    border:0;
}
.img1{
    border:1;
}
.blue {                    /*自定义类别样式*/
    font-size: 9pt;    color: #034683;
}
.bgcolor {
    font-size: 9pt;    color: #1980DB;
}
.btn_grey {                /*自定义类别样式*/
    font-family: "宋体";    font-size: 9pt;color: #333333;
    background-color: #eeeeee;cursor: hand;padding:1px;height:19px;
    border-top: 1px solid #FFFFFF;border-right:1px solid #666666;
    border-bottom: 1px solid #666666;border-left: 1px solid #FFFFFF;
}
input{                    /*表单元素引用样式*/
    font-family: "宋体";
    font-size: 9pt;
    color: #333333;
    border: 1px solid #999999;
}

.inputinputinput{        /*自定义类别样式*/
    font-family: "宋体";
    font-size: 9pt;
    border: 0px solid #D1B681;
}
.inputinput{            /*自定义类别样式*/
    font-family: "宋体";
    font-size: 9pt;
    background-color:#FBEDC8;
    border: 1px solid #D1B681;
}


.word_white{            /*自定义类别样式*/
    color:#FFFFFF;
}
.word_deepgrey{
    color:#999999;
}
.word_orange{
    color:#FF6600;
}
.word_green{
    color:#FEECEA;
}
.noborder{
    border:none;
}
.word_gray{
    color:#dddddd;
}
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
textarea {                /*文本域样式*/
    font-family: "宋体";
    font-size: 9pt;
    color: #333333;
    border: 1px solid #999999;
}
.tableBorder {
    border: #D8D8D8 1px solid;
}
.tableBorder_dashed {
    border: #D8D8D8 1px dashed;
}
.tableBorder_l {
    border: #004C86 1px solid;
    border-bottom-style:none;
    border-right-style:none;
    border-top-style:none;
}
.tableBorder_r {
    border: #004C86 1px solid;
    border-bottom-style:none;
    border-left-style:none;
    border-top-style:none;
}
.tableBorder_lb {
    border: #D8D8D8 1px solid;
    border-left-style:none;
    border-top-style:none;
}
.tableBorder_l_dashed {
    border: #D8D8D8 1px dashed;
    border-bottom-style:none;
    border-left-style:none;
    border-top-style:none;
}
.tableBorder_T_dashed {
    border: #D8D8D8 1px dashed;
    border-bottom-style:none;
    border-left-style:none;
    border-right-style:none;
}
.tableBorder_LTR_dashed {
    border: #D8D8D8 1px dashed;
    border-bottom-style:none;
}
.tableBorder_B_dashed {
    border: #D8D8D8 1px dashed;
    border-top-style:none;
    border-left-style:none;
    border-right-style:none;
}
.hidden_a_line{
    noline:expression(this.onfocus=this.blur);
}


hr{
    color:#77642C;
    border-style:dashed;
}




.backTop:link { font-size:12px; color:#FFCD00; text-decoration:none}
.backTop:visited { font-size:12px; color:#FFCD00; text-decoration:none}
.backTop:hover { font-size:12px; color:#FFCD00; text-decoration:underline}
.backTop:active { font-size:12px; color:#FF0000; text-decoration:none}

a:hover {
    font-size: 10pt;    color: #FF0000;
}
a {
    font-size: 10pt;    text-decoration: none;    color: #000000;
    noline:expression(this.onfocus=this.blur);
}
.aaaa:link { font-size:14px; color:#A54400; text-decoration:none}
.aaaa:visited { font-size:14px; color:#A54400; text-decoration:none}
.aaaa:hover { font-size:14px; color:#A54400; text-decoration:underline}
.aaaa:active { font-size:14px; color:#FF0000; text-decoration:none}

.aaaaa:link { font-size:12px; color:#FFFFFF; text-decoration:none}
.aaaaa:visited { font-size:12px; color:#FFFFFF; text-decoration:none}
.aaaaa:hover { font-size:12px; color:#FFFFFF; text-decoration:underline}
.aaaaa:active { font-size:12px; color:#FFFFFF; text-decoration:none}

.in:link { font-size:12px; color:#000000; text-decoration:none}
.in:visited { font-size:12px; color:#000000; text-decoration:none}
.in:hover { font-size:12px; color:#000000; text-decoration:underline}
.in:active { font-size:12px; color:#000000; text-decoration:none}

.head-01:link { font-size:14px; color:#FFFFFF; text-decoration:none}
.head-01:visited { font-size:14px; color:#FFFFFF; text-decoration:none}
.head-01:hover { font-size:14px; color:#FDD63D; text-decoration:none}
.head-01:active { font-size:14px; color:#FDD63D; text-decoration:none}


.head-02:link { font-size:9pt; color:#FE6500; text-decoration:none}
.head-02:visited { font-size:9pt; color:#FE6500; text-decoration:none}
.head-02:hover { font-size:9pt; color:#000000; text-decoration:none}
.head-02:active { font-size:9pt; color:#000000; text-decoration:none}

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_19/index.css

（3）Tips

表格样式，图片样式，自定义类别样式，表单元素引用样式，文本域样式。

20. 练习20

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>页面继承关系</title>
</head>
<body>
    <h1><b>明日科技</b></h1>
    <p>明日科技欢迎您</p>
    <ul>
        <li>明日科技主打产品有：
           <ul>
                   <li>编程词典</li>
                <ul>
                    <li>个人版</li>
                    <li>标准版</li>
                       <li>企业版</li>
                </ul>
           </ul>
           <ul>
                   <li>明日图书</li>
                <ul>
                    <li>基础类</li>
                    <li>范例类</li>
                       <li>模块类</li>
                    <li>项目类</li>
                </ul>
           </ul>
        </li>
    </ul>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_20/

（3）Tips

页面继承关系。

21. 练习21

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>页面继承关系</title>
<style>
    h1{                        /*定义h1标记样式*/        
        text-decoration:underline;    
    }
    b{                        /*定义b标记样式*/
        color:#FC3;    
    }
</style>
</head>
<body>
    <h1><b>明日科技</b></h1>
    <p>明日科技欢迎您</p>
    <ul>
        <li>明日科技主打产品有：
           <ul>
                   <li>编程词典</li>
                <ul>
                    <li>个人版</li>
                    <li>标准版</li>
                       <li>企业版</li>
                </ul>
           </ul>
           <ul>
                   <li>明日图书</li>
                <ul>
                    <li>基础类</li>
                    <li>范例类</li>
                       <li>模块类</li>
                    <li>项目类</li>
                </ul>
           </ul>
        </li>
    </ul>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_21/

（3）Tips

定义标记样式。

二、编程训练

1. 训练1

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    
    <script type="text/javascript">
        var colorArr=["red","green","blue","purple","yellow"];
        var size=16;
        var step=2;
        function toBig(){
            size+=step;
            document.getElementById("p1").style.fontSize=size+"px";
            document.getElementById("p1").style.color=colorArr[Math.floor(Math.random()*colorArr.length)];
        }
    </script>
    
</head>
<body>

<p id="p1">JavaScript从入门到精通</p>
<br>
<button type="button" onclick="toBig()">放大</button>

</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_22/

（3）Tips

能理解。

2. 训练2

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="face.png" id="pic">
<script type="text/javascript">
    var pic=document.getElementById("pic");
    
    pic.onmouseover=function(){
        this.style.borderWidth="3px";
        this.style.borderColor="green";
        this.style.borderStyle="double";
    }
    
    pic.onmouseout=function(){
        this.style.border=0;
    }
    
    
</script>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_23/

（3）Tips

匿名函数，this 。

3. 训练3

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <!--指定页面编码格式-->
    <meta charset="UTF-8">
    <!--指定页头信息-->
    <title>唐诗</title>
    <style>
        h1{
            text-align: center;
            color: #0000FF;
        }
        h4{
            text-align: center;
            color: #00FF00;
        }
    </style>
</head>
<body>
<!--表示文章标题-->
<h1>《赋得古原草送别》</h1>
<h4>离离原上草，一岁一枯荣。</h4>
<h4>野火烧不尽，春风吹又生。</h4>
<h4>远芳侵古道，晴翠接荒城。</h4>
<h4>又送王孙去，萋萋满别情。</h4>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_24/

（3）Tips

又降智。

4. 训练4

（1）源代码

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
<title>横向导航菜单</title>
    <style>
        a{
            font-size:16px;
            color:#000000;
            text-decoration:none;
        }
        .mainmenu{
            height:30px;
            background:forestgreen;
            padding-left:100px;
        }
        .mainmenu a{
            display:inline;
            float:left;
            height:30px;
            line-height:30px;
            color:#FFFFFF;
            margin:0 10px;
            padding:0 10px;
        }
        .mainmenu a:hover,.mainmenu a.cur{
            background:#FFFFFF;
            color:forestgreen;
        }
    </style>
</head>

<body>
<div>
    <div>
        <a href="#">交通出行</a>
        <a href="#">酒店预订</a>
        <a href="#">旅游度假</a>
        <a href="#">定制旅游</a>
        <a href="#">演出票务</a>
    </div>
</div>
</body>

</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_25/

（3）Tips

都这么简单就好了。

5. 训练5

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    
<table style="width: 200px; height: 100px; border-collapse: collapse">
    <tr>
        <td style="border:1px solid blue"></td>
        <td style="border:1px solid blue"></td>
    </tr>
    <tr>
        <td style="border:1px solid blue"></td>
        <td style="border:1px solid blue"></td>
    </tr>
</table>
    
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_26/

（3）Tips

教程怎么教的？

6. 训练6

（1）源代码

index.html：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>个人简历</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>

<body>
<div class="cont">
    <div class="bom">
    <div class=title><h1>个人简历</h1></div>
        <div class="mess">
<!--        基本信息-->
            <div class="txt">
<!--            设置输入提示项的属性为class="list"，输入框提示项属性为class="txt1"-->
                <p class="list">姓名</p><input class="txt1">
                <p class="list">性别</p><input class="txt1">
                <p class="list">政治面貌</p><input class="txt1">
                <p class="list">毕业学校</p><input class="txt1">
                <p class="list">出生日期</p><input class="txt1">
                <p class="list">就职状态</p><input class="txt1">
            </div>
        </div>
<!--        在校实践经历-->
        <div class="schoolexe">
            <p class="tit">学校经历：</p>
            <textarea class="txtarea"></textarea>
        </div>
<!--        校外实习经历-->
        <div class="socalexe">
            <p class="tit">校外经历：</p>
            <textarea class="txtarea"></textarea>
        </div>
    </div>
</div>
</body>
</html>

style.css：

@charset "utf-8";
/* CSS Document */
/*清除所有标签的默认样式*/
* {
    padding: 0;
    margin: 0;
}
/*背景区域的整体大小*/
.cont{
    margin: 0 auto;
    height: 825px;
    width: 700px;
    background: url(../image/bg.png);
}
/*页面内容的大小以及外边距*/
.bom{
    height: 850px;
    width: 650px;
    margin: 25px;
}
/*简历标题的位置，字体和字号*/
.title{
    text-align: center;
    padding-top: 50px;
    font: 700 30px/30px "华文新魏";
}
/*简历内容的位置，字体和字号*/
.mess{
    width: 650px;
    float: left;
    margin-top: 50px;
}
.txt{
    float: left;
    text-align: center;
    height: auto;
    width: 500px;
}
/*输入提示项和输入框的大小以及外边距*/
.txt1, .list{
    height: 20px;    /*输入提示项和输入框的大小*/
    width: 100px;
    margin: 10px 5px;    /*输入提示项和输入框的外边距*/
}
/*输入提示项的左边距*/
.list{
    margin-left: 20px;
}
/*输入框*/
.txt1{
    opacity: 0.5;     /*设置输入框的透明度*/
    border: 1px solid rgba(96,90,90,1.00)  /*输入框的边框设置*/
}

.txt p,.txt input {
    float: left;
    margin: 10px;
}
/*校园经历*/
.schoolexe{
    height: 240px;
    margin: 200px 0 0 26px;
}
/*社会经历*/
.socalexe{
    height: 240px;
    width: 624px;
    margin-left: 23px;
}
/*校园经历和社会经历的标题样式*/
.tit{
    height: 20px;
    line-height: 20px;
}
/*校园经历和社会经历的文本区域*/
.txtarea{
    width: 624px;
    height: 200px;
    border: 1px solid rgba(96,90,90,1.00)
}

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_27/

（3）Tips

运用浮动效果，限制宽度，只能两两一行。学校经历这个div为何会那么靠上？

三、实践与练习

1. 实践1

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title></title>
<style type="text/css">
.menu{
    width:200px;/*设置元素宽度*/
    list-style:none;/*设置列表无样式*/
    position:fixed;/*设置定位属性*/
    top:30px;
    left:20px;
}
.menu li{
    margin-top:10px;/*设置元素上外边距*/
}
.menu li a{
    display:block;/*设置为块级元素*/
    background:orange;/*设置背景颜色*/
    width:120px;/*设置元素宽度*/
    font-size:14px;/*设置文字大小*/
    text-decoration:none;
    color:white;/*设置文字颜色*/
    padding:10px 15px 10px 12px;/*设置内边距*/
    -webkit-border-top-right-radius:30px;/*设置上右圆角边框*/
    -webkit-border-bottom-right-radius:10px;/*设置下右圆角边框*/
    -webkit-transition:padding 0.5s;/*设置过渡效果*/
}
.menu li a:hover{
    background:lightgreen;/*设置背景颜色*/
    color:blue;/*设置文字颜色*/
}
</style>
</head>
<body>

<ul>
    <li><a href="javascript:void(0)" onMouseOver="long()" onMouseOut="short()">HTML/CSS讨论区</a></li>
    <li><a href="javascript:void(0)" onMouseOver="long()" onMouseOut="short()">JavaScript讨论区</a></li>
    <li><a href="javascript:void(0)" onMouseOver="long()" onMouseOut="short()">C语言讨论区</a></li>
    <li><a href="javascript:void(0)" onMouseOver="long()" onMouseOut="short()">Java讨论区</a></li>
    <li><a href="javascript:void(0)" onMouseOver="long()" onMouseOut="short()">Android讨论区</a></li>
    <li><a href="javascript:void(0)" onMouseOver="long()" onMouseOut="short()">Python讨论区</a></li>
</ul>
    
<script type="text/javascript">
function long(){
    event.target.style.paddingLeft="30px";
}
function short(){
    event.target.style.paddingLeft="12px";
}
</script>    
    
    
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_28/

（3）Tips

position:fixed，-webkit-transition:padding 0.5s，event.target.style.paddingLeft。

2. 实践2

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>实现随意摆放的照片墙</title> 
<style type="text/css">
body{
background:url(images/bg.png)}
#img1{
position:absolute;
width:130px;   
height:97px; 
top:20px; 
left:30px;
-webkit-transform:rotate(-30deg);
}
#img2{
position:absolute;
border:solid 1px #ccc;
width:130px;   
height:97px; 
top:120px; 
left:130px;
-webkit-transform:rotate(-10deg);
}
#img3{
position:absolute;
border:solid 1px #ccc;
width:130px;   
height:97px; 
top:220px; 
left:230px;
-webkit-transform:rotate(30deg);
}
</style>
<script type="text/javascript">
function $$(id) {
    return document.getElementById(id);
}    
var initX,initY,offsetX,offsetY;
//自定义页面加载时调用的函数
function pageload() {
    var img1 = $$("img1");
    var img2 = $$("img2");
    var img3 = $$("img3");
    img1.style.left = 30 + "px";
    img1.style.top = 20 + "px";
    img2.style.left = 130 + "px";
    img2.style.top = 120 + "px";
    img3.style.left = 230 + "px";
    img3.style.top = 220 + "px";
    //alert(img1.style.left);
}
function mousedown(event){
    initX = parseInt(event.target.style.left);
    initY = parseInt(event.target.style.top);
    offsetX = event.clientX;
    offsetY = event.clientY;
    //alert(offsetX);
    //鼠标移动时触发的事件
    document.onmousemove = function(e) {
        var x = e.clientX - offsetX+ initX;
        var y = e.clientY - offsetY+ initY;
        
        //alert(e.clientX+","+offsetX+","+x);
        event.target.style.left = x + "px";
        event.target.style.top = y + "px";
        return false;
    };
    //鼠标弹起时触发的事件
    document.onmouseup = function() {
        document.onmousemove = null;
    }
}
    
document.addEventListener('DOMContentLoaded', function() {
    pageload();
});    
    
</script>

</head> 
<body onLoad="pageload();"> 
<img id="img1" onmousedown="mousedown(event)" src="images/Lighthouse.jpg">
<img id="img2" onmousedown="mousedown(event)" src="images/Penguins.jpg">
<img id="img3" onmousedown="mousedown(event)" src="images/Tulips.jpg">
</body> 
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_29/

（3）Tips

onLoad总是不灵光。

document.addEventListener('DOMContentLoaded',function(){pageload()});

mousedown(event)

document.onmouseve=function(e){return false;};

document.onmouseup=function(){document.onmousemove=null;};

可算是弄懂了，全是陷阱。

3. 实践3

（1）源代码

index.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生日贺卡</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--定义ID属性-->
<div id="cont">
<!-- 定义class属性-->
  <p>TO my friend Zhang：</p>
<!--  定义class属性为left，内容为左边文字-->
  <div>
    <p>告别昨日的风霜雪雨，</p>
    <p>点燃生日的红蜡，</p>
    <p>放飞所有的伤情，</p>
  </div>
  <!--  定义class属性为left，内容为右边文字-->
  <div>
    <p>迎接今日的幸福时光；</p>
    <p>留住美好的记忆；</p>
    <p>收起所有的眼泪，</p>
  </div>
  <!--  定义class属性为happy，内容为底部生日快乐-->
  <p>生日快乐！</p>
  <!--  定义class属性为bottom，内容为底部署名-->
  <p>friend Li</p>
</div>
</body>
</html>

style.css

@charset "utf-8";
/* CSS Document */
/*清除所有标签的内外边距*/
* {
    margin: 0;
    padding: 0
}
/*使用ID选择器实现页面的整体大小*/
#cont {
    height: 500px;    /*设置页面的整体大小*/
    width: 800px;
    margin: 0 auto;   /*页面的位置*/
    background: no-repeat url(../img/bg.jpg);/*页面的背景图片*/
}
/*类选择器顶部署名*/
.top {
    padding: 75px 150px;   /*内边距*/
    font-weight: 800;
    font-size: 25px;      /*字体*/
}
/*类选择器，选中贺卡的主体内容*/
.left, .right, .happy {
    font: 25px/25px bold;   /*字号 加粗*/
    font-family: "华文新魏";   /*字体*/
    line-height: 30px;    /*行高*/
}
/*使用类选择器实现左边文字的浮动与边距*/
.left {
    float: left;    /*设置浮动*/
    margin: 20px 50px;   /*设置外边距*/
} 
/*使用类选择器实现右边文字的样式*/
.right {
    float: right;
    margin: 20px 50px;    /*设置外边距*/
    text-align: right;     /*设置对齐方式*/
}
/*使用类选择器实现底部生日快乐的文字样式*/
.happy {
    text-align: center;
    margin-top: 230px;
    font-size: 35px;
}
/*类选择器选择底部署名*/
.bottom {
    text-align: right;
    font-weight: 800;
    font-size: 25px;
    margin-right: 50px;
}

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/13_30/

（3）Tips

比较明确。

JS入门到精通第12章 Window对象 JS入门到精通第14章表单对象

JS入门到精通 第13章 级联样式表

相关内容

JS入门到精通第13章级联样式表