Java学习日志18.7.30-优快云博客

本文记录了Java初学者的一次HTML与CSS实战经历，包括网页布局与样式设置，并通过JavaScript实现了字体大小动态调整的功能。

Java学习日志18.7.30
- 学习内容及代码
  - 课后学习过程

Java学习日志18.7.30

学习内容及代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .cc{
            margin: 0 auto;
            width: 800px;
            height: 800px;
            background-color: red;
        }
        .cc p{
            text-align: center;
            color: blue;
        }
    </style>
</head>
<body>
    <div class="cc">
        <p>
            <span id="content">;aoe823dj48q9;tw,;epcs</span>
        </p>
    </div>
    <hr>
    <select id="fs" onchange="changeSize()"></select>
    <script type="text/javascript">
        var initFsSelect = function(){
            var fshtml ="";
            for (var i = 1; i <=100; i++) {
                fshtml += "<option value='"+i+"px'>"+i+"px</option>";
            }
            document.getElementById("fs").innerHTML = fshtml;
        }
        var changeSize = function() {
        var fs = document.getElementById("fs").value;

        document.getElementById("content").style.fontSize = fs;
        }
        initFsSelect();
    </script>
</body>
</html>