HTML/CSS内联样式示例：动态评估与前端控制-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45451576/article/details/126364369

内联样式表

内联样式表就是使用HTML属性style，在style属性内添加CSS样式。内联样式是仅

影响一个元素的CSS声明，也就是被style属性包括着的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>杯弓蛇影</title>
</head>
<body>
    <h1 style="text-align:center;color:blue"> 杯弓蛇影 </h1>
    <p style="padding:20px;background:yellow">
        有一天，乐广请他的朋友在家里大厅中喝酒。那个朋友在喝酒的时候，突然看见自己的酒杯里，
        有一条小蛇的影子在晃动，他心里很厌恶，可还是把酒喝了下去。喝了之后，心里到底不自在，
        放心不下。回到家中就生起病来。隔了几天，乐广听到那个朋友生病的消息，了解了他得病的
        原因。乐广心里想：酒杯里绝对不会有蛇的！于是，他就跑到那天喝酒的地方去察看。原来，
        在大厅墙上，挂有一把漆了彩色的弓。那把弓的影子，恰巧映落在那朋友放过酒杯的地方，乐
        广就跑到那个朋友那里去，把这事解释给他听。这人明白了原因以后，病就立刻好了。
        后来人们就用杯弓蛇影比喻疑神疑鬼，自相惊扰。
    </p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>if 条件语句</title>
</head>
<body>
<script>
    var score = 78
    if (score>=90)
    {
        document.write("<b>成绩优秀</b>");
    }
    else if (score>=80 && score<90)
    {
        document.write("<b>成绩良好</b>");
    }
    else if (score>=60 && score<80)
    {
        document.write("<b>成绩及格</b>");
    }
    else
    {
        document.write("<b>成绩不及格</b>");
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>switch语句</title>
</head>
<body>
<script>
    var d=new Date().getDay();
    switch (d)
    {
      case 0:
        x="今天是星期日";
        break;
      case 1:
        x="今天是星期一";
        break;
      case 2:
        x="今天是星期二";
        break;
      case 3:
        x="今天是星期三";
        break;
      case 4:
        x="今天是星期四";
        break;
      case 5:
        x="今天是星期五";
        break;
      case 6:
        x="今天是星期六";
        break;
    }
    document.write(x);
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for...in语句</title>
</head>
<body>
<script>
    // 学生成绩信息
    var person={name:"andy",age:18,score:{chinese:100,english:90}};
    var txt = ''
    for (x in person)  // x 为属性名
    {
        if (x == 'score') {  // 分数内容是对象，需要再次遍历
            for (y in person['score']){
                txt = y+':'+ person['score'][y] + '<br>';
                document.write(txt);
            }
        }else{    // 其他信息直接输出
            txt = x+':'+ person[x] + '<br>';
            document.write(txt);
        }
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数参数</title>
</head>
<body>
<div id="demo"></div>
<script>
function myFunction(a,b){
    return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>
</script>
</body>
</html>

运行结果为12