磁盘分区计算器 - GB/MB转换工具 - 常规

<html>
<head>
    <title>磁盘分区计算器 - GB/MB转换工具</title>
    <style>
        .container {
            padding-top: 20px;
        }
        .image-container {
            float: left;
            width: 33.33%;
            padding-right: 20px;
        }
        .image-container img {
            width: 100%;
        }
        .image-container p {
            margin-top: 10px;
            text-align: center;
        }
        .calculation-container {
            float: left;
            width: 66.67%;
        }
        .calculation-container label {
            font-size: 18px;
        }
        .calculation-container input {
            width: 200px;
            height: 30px;
            font-size: 16px;
            margin-bottom: 10px;
        }
        .calculation-container button {
            background-color: #337ab7;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 18px;
            cursor: pointer;
        }
        .result-container {
            margin-top: 20px;
            font-size: 18px;
        }
    </style>
    <link href='http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css' rel='stylesheet'>
    <!--font-awesome 核心CSS文件-->
    <link href='//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'>
    <!-- 在bootstrap.min.js 之前引入 jquery -->
    <script src='http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js'></script>
    <!-- Bootstrap 核心js文件 -->
    <script src='http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js'></script>
    <script>
        function convert() {
            var gb = parseFloat(document.getElementById('gb').value);
            var mb = gb * 1024;
            document.getElementById('result').innerHTML = gb + ' GB = ' + mb + ' MB';
        }
    </script>
</head>
<body>
<jsp:include page='header.jsp' flush='true'/>
<div class='container'>
    <div class='image-container'>
        <img src='image.jpg' alt='磁盘分区'>
        <p>磁盘分区示意图</p>
    </div>
    <div class='calculation-container'>
        <h1>磁盘分区计算器</h1>
        <label for='gb'>输入磁盘大小（GB）：</label>
        <input type='text' id='gb' name='gb' placeholder='请输入磁盘大小'>
        <button onclick='convert()'>转换</button>
        <div class='result-container' id='result'></div>
    </div>
</div>
<jsp:include page='footer.jsp' flush='true'/>
</body>
</html>