JavaWeb基礎知識：Html，Css和Javascript專案實戰

阿新 • • 發佈：2019-02-16

Html，Css和Javascript專案實戰

專案1：使用Html5的Canvas物件繪製一個圓形鐘盤，顯示實時時間

效果圖如下

程式碼如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <canvas id="canvas" width="500" height="500"></canvas>
        <script>
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");

            function drawClock(){
                context.clearRect(0,0,500,500);

            var now = new Date();
            var sec = now.getSeconds();
            var min = now.getMinutes();
            var hours = now.getHours();
            //小時必須獲取浮點型別 (小時+分鐘/60)
            hours = hours+min/60;
            var hours = hours>12?hours-12:hours;

            context.lineWidth = 10;
            context.strokeStyle = "blue";
            context.beginPath();
            context.arc(250,250,200,0,360,false);
            context.closePath();
            context.stroke();

            for(var i=0;i<12;i++){
                context.save();
                context.lineWidth = 7;
                context.strokeStyle = "#000";
                context.translate(250,250);
                context.rotate(i*30*Math.PI/180);
                context.beginPath();
                context.moveTo(0,-170);
                context.lineTo(0,-190);
                context.closePath();
                context.stroke();
                context.restore();
            }

            for(var i=0;i<60;i++){
                context.save();
                context.beginPath();
                context.lineWidth = 5;
                context.strokeStyle = "#000";
                context.translate(250,250);
                context.rotate(i*6*Math.PI/180);
                context.moveTo(0,-180);
                context.lineTo(0,-190);
                context.closePath();

                context.stroke();
                context.restore();
            }

            context.save();
            context.lineWidth = 7;
            context.strokeStyle = "#000";
            context.beginPath();
            context.translate(250,250);
            context.rotate(hours*30*Math.PI/180);
            context.moveTo(0,-140);
            context.lineTo(0,10);
            context.closePath();
            context.stroke();
            context.restore();

            context.save();
            context.lineWidth = 5;
            context.strokeStyle = "#000";
            context.beginPath();
            context.translate(250,250);
            context.rotate(min*6*Math.PI/180);
            context.moveTo(0,-140);
            context.lineTo(0,10);
            context.closePath();
            context.stroke();
            context.restore();

            context.save();
            context.lineWidth = 5;
            context.strokeStyle = "#ff0000";
            context.beginPath();
            context.translate(250,250);
            context.rotate(sec*6*Math.PI/180);
            context.moveTo(0,-160);
            context.lineTo(0,15);
            context.closePath();
            context.stroke();
            context.restore();
            }

            setInterval(drawClock,1000);
        </script>
    </body>
</html>

專案2：模擬手機上的7881網頁，使用Html，Css和Javascript聯合開發

1. 主頁

效果圖如下

index.html主頁主要程式碼如下

<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        function init() {
            document.getElementById("seach").value = "輸入搜尋的內容";
        }

        function _focus() {
            document.getElementById("seach").value = "";
        }

        function _blur() {
            var name = document.getElementById("seach").value;
            if (name == "") {
                document.getElementById("seach").value = "輸入搜尋的內容";
            } else {
                document.getElementById("seach").style.color = "black";
            }
        }
        function clickme(){
            alert("假裝你已經搜到了種子！");
        }
    </script>
    <style>
        #top {
            background-color: #E4F2FC;
        }
        .div_user {
            position: relative;
            float: right;
            margin-top: 20px;
            margin-right: 20px;
        }
        #left {
            width: 33.3%;
            position: relative;
            float: left;
        }
        #center {
            width: 33.3%;
            position: relative;
            float: left;
        }
        #right {
            width: 33.3%;
            position: relative;
            float: left;
        }
        #bottom {
            position: relative;
            float: left;
            width: 100%;
        }
    </style>
</head>

<body style="margin:0;background:#E4E4E4" onload="init()">
    <div id="top">
        <img src="../img/7881/logo.png" />
        <div class="div_user">
            <a href="login.html" style="text-decoration: none;">登入</a>&nbsp;
            <a href="regist.html" style="text-decoration: none;">註冊</a>
        </div>
    </div>
    <div id="headad">
        <img src="../img/7881/s01.jpg" style="width: 100%;" onclick="location.href='login.html'" />
    </div>
    <div id="left">
        <img src="../img/7881/i01.png" width="100%" height="50%" onclick="location.href='buy.html'" />
        <img src="../img/7881/i02.png" width="100%" height="50%" onclick="location.href='change.html'" />
    </div>
    <div id="center">
        <img src="../img/7881/i05.png" width="100%" height="100%" onclick="location.href='list.html'" />
    </div>
    <div id="right">
        <img src="../img/7881/i03.png" width="100%" height="50%" onclick="location.href='list.html'" />
        <img src="../img/7881/i04.png" width="100%" height="50%" onclick="location.href='login.html'" />
    </div>
    <div id="bottom">
        <p align="center">
            <input type="text" id="seach" onfocus="_focus()" onblur="_blur()" style="color: darkgrey;" />
            <input type="button" value="搜尋" onclick="clickme()" />
            <br> (c) Copyright 2016 Administrator. All Rights Reserved.
        </p>
    </div>
</body>

2. 登入介面

效果圖如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function clickme() {
                var name = document.getElementById("name").value;
                var pass = document.getElementById("pass").value;
                var reg = /^[\w]{6,12}$/;
                if(name =="使用者名稱：" || pass == "密碼：" || !pass.match(reg)){
                    alert("使用者名稱或密碼錯誤");
                }else{
                    location.href = "index.html";
                }
            }

            function init() {
                document.getElementById("name").value = "使用者名稱：";
                document.getElementById("pass").value = "密碼：";
            }

            function name_focus() {
                document.getElementById("name").value = "";
            }

            function pass_focus() {
                document.getElementById("pass").value = "";
                document.getElementById("pass").type = "password";
            }

            function name_blur() {
                var name = document.getElementById("name").value;
                if (name == "") {
                    document.getElementById("name").value = "使用者名稱：";
                } else {
                    document.getElementById("name").style.color = "black";
                }
            }

            function pass_blur() {
                var pass = document.getElementById("pass").value;
                if (pass == "") {
                    document.getElementById("pass").value = "密碼：";
                    document.getElementById("pass").type = "text";
                } else {
                    document.getElementById("pass").style.color = "black";
                }
            }
        </script>
        <style>
            .div_head {
                width: 100%;
                height: 50px;
                background: #0073C3;
                padding-top: 15px;
            }
            #img_back {
                width: 25px;
                height: 25px;
                margin-top: 5px;
                margin-left: 12px;
                position: relative;
                float: left;
            }
            #img_home {
                position: relative;
                float: right;
                width: 32px;
                height: 30px;
                margin-top: 5px;
                margin-right: 14px;
            }
            span {
                font-size: 25px;
                color: white;
                font-family: "微軟雅黑";
                margin-top: 20px;
            }
            input {
                width: 80%;
                height: 20px;
                margin: 8px;
                padding: 10px;
                color: #B2B2B2;
                font-size: large;
            }
            #btn {
                width: 85%;
                background: #F9873C;
                height: 50px;
                color: white;
                margin-top: 25px;
                font-size: large;
            }
            #a_login {
                position: relative;
                float: left;
                margin-left: 60px;
                margin-top: 30px;
            }
            #a_regist {
                position: relative;
                float: right;
                margin-right: 60px;
                margin-top: 30px;
            }
        </style>
    </head>

    <body style="margin:0;background:#E4E4E4" id="body" onload="init()">
        <div class="div_head">
            <p align="center" style="margin-top: 0px;">
                <a href="index.html">
                    <img src="../img/7881/back.png" id="img_back" />
                </a>
                <span>會員登入</span>
                <a href="index.html">
                    <img src="../img/7881/home.png" id="img_home" />
                </a>
            </p>
        </div>
        <center style="margin-top: 20px; height: 200px;">
            <input type="text" id="name" onfocus="name_focus()" onblur="name_blur()" />

            <input type="text" id="pass" onfocus="pass_focus()" onblur="pass_blur()" />

                <input type="button" value="登入" id="btn" onclick="clickme()" />
        </center>
        <div style="height: 80px;" align="center">
            <p>
                <a href="regist.html" id="a_login" style="text-decoration: none;">使用者註冊</a>
                <a href="#" id="a_regist" style="text-decoration: none;">忘記密碼</a>
            </p>
        </div>

        <div style="height: 50px;" align="center">
            <p>
                <a href="index.html" style="text-decoration: none;">登入</a> &nbsp;&nbsp;|&nbsp;&nbsp;
                <a href="regist.html" style="text-decoration: none;">註冊</a> &nbsp;&nbsp;|&nbsp;&nbsp;
                <a href="#body" style="text-decoration: none;">返回頂部</a>
            </p>
        </div>

        <div align="center">
            (c) 2014 m.7881.com
        </div>

    </body>

</html>

3. 註冊介面

效果圖如下

regist.html註冊頁主要程式碼如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    <script>
        function register() {
            var pass = document.getElementById("pass");
            var conpass = document.getElementById("conpass");
            var reg = /^[\w]{6,12}$/;
            var passValue = pass.value;
            var conpassValue = conpass.value;
            if (passValue == "密碼：(6-12位英文或數字)" || conpassValue == "確認密碼：") {
                alert("密碼不完整");
                return;
            }
            if (passValue != conpassValue) {
                alert("兩次密碼不一致！");
            } else {
                if (!passValue.match(reg)) {
                    alert("密碼格式不對");
                } else {
                    location.href = "index.html";
                }
            }
        }

        function init() {
            document.getElementById("phone").value = "請輸入你的手機號碼：";
            document.getElementById("pass").value = "密碼：(6-12位英文或數字)";
            document.getElementById("conpass").value = "確認密碼：";
            document.getElementById("phone_very").value = "請輸入手機驗證碼";
        }

        function phone_focus() {
            document.getElementById("phone").value = "";
        }

        function pass_focus() {
            document.getElementById("pass").value = "";
            document.getElementById("pass").type = "password";
        }

        function conpass_focus() {
            document.getElementById("conpass").value = "";
            document.getElementById("conpass").type = "password";
        }

        function very_focus() {
            document.getElementById("phone_very").value = "";
        }

        function phone_blur() {
            var phone = document.getElementById("phone").value;
            if (phone == "") {
                document.getElementById("phone").value = "請輸入你的手機號碼：";
            } else {
                document.getElementById("phone").style.color = "black";
            }
        }

        function pass_blur() {
            var pass = document.getElementById("pass").value;
            if (pass == "") {
                document.getElementById("pass").value = "密碼：(6-12位英文或數字)";
                document.getElementById("pass").type = "text";
            } else {
                document.getElementById("pass").style.color = "black";
            }
        }

        function conpass_blur() {
            var conpass = document.getElementById("conpass").value;
            if (conpass == "") {
                document.getElementById("conpass").value = "確認密碼：";
                document.getElementById("conpass").type = "text";
            } else {
                document.getElementById("conpass").style.color = "black";
            }
        }

        function very_blur() {
            var very = document.getElementById("phone_very").value;
            if (very == "") {
                document.getElementById("phone_very").value = "請輸入手機驗證碼";
            } else {
                document.getElementById("phone_very").style.color = "black";
            }
        }
    </script>
    <style>
        @import url("../css/head.css");
        #phone,
        #pass,
        #conpass {
            width: 90%;
            margin: 8px;
            padding: 10px;
            color: #B2B2B2;
            font-size: large;
        }
        #btn {
            width: 95%;
            background: #F9873C;
            height: 50px;
            color: white;
            margin-top: 25px;
            font-size: large;
        }
        #phone_very {
            width: 50%;
            position: relative;
            float: left;
            margin: 8px;
            padding: 10px;
            color: #B2B2B2;
            font-size: large;
        }
        #btn_very {
            width: 30%;
            position: relative;
            float: right;
            height: 42px;
            margin: 8px;
            padding: 5px;
            color: #E1E5D6;
            background: #898989;
            font-size: large;
        }
        .div_very {
            width: 98%;
            height: 60px;
        }
    </style>
</head>

<body style="margin:0;background:#E4E4E4" onload="init()">

    <div class="div_head">
        <p align="center" style="margin-top: 0px;">
            <a href="index.html">
                <img src="../img/7881/back.png" id="img_back" />
            </a>
            <span>會員註冊</span>
            <a href="index.html">
                <img src="../img/7881/home.png" id="img_home" />
            </a>
        </p>
    </div>

    <center style="margin-top: 20px; height: 350px;">
        <input type="phone" id="phone" value="請輸入你的手機號碼：" onfocus="phone_focus()" onblur="phone_blur()" />

        <input type="text" id="pass" value="密碼：(6-12位英文或數字)" onfocus="pass_focus()" onblur="pass_blur()" />

        <input type="text" id="conpass" value="確認密碼：" onfocus="conpass_focus()" onblur="conpass_blur()" />

        <div class="div_very">
            <input type="text" id="phone_very" value="請輸入手機驗證碼" onfocus="very_focus()" onblur="very_blur()" />
            <input type="button" id="btn_very" value="傳送驗證碼" />
        </div>

        <input type="button" value="註冊" id="btn" onclick="register()" />
    </center>

    <div style="height: 50px;" align="center">
        <p>
            <a href="login.html" style="text-decoration: none;">登入</a> &nbsp;&nbsp;|&nbsp;&nbsp;
            <a href="regist.html" style="text-decoration: none;">註冊</a> &nbsp;&nbsp;|&nbsp;&nbsp;
            <a href="#body" style="text-decoration: none;">返回頂部</a>
        </p>
    </div>

    <div align="center">
        (c) 2014 m.7881.com
    </div>

</body>

4. 物品詳情頁

效果圖如下

list.html物品詳情頁主要程式碼如下

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        @import url("../css/head.css");
    .continar {
        background: white;
        height: 410px;
        width: 94%;
        margin-top: 15px;
    }
    #btn {
        width: 94%;
        background: #F9873C;
        height: 50px;
        color: white;
        margin-top: 15px;
        font-size: large;
    }
    font {
        position: relative;
        float: left;
    }
    #backlist {
        position: relative;
        float: right;
    }
</style>

<div class="div_head">
    <p align="center" style="margin-top: 0px;">
        <a href="index.html">
            <img src="../img/7881/back.png" id="img_back" />
        </a>
        <span>忘仙</span>
        <a href="index.html">
            <img src="../img/7881/home.png" id="img_home" />
        </a>
    </p>
</div>

<center>
    <div class="continar">
        <p style="width: 80%; ">
            <font color="white" style="background: #F770CF;padding: 5px;font-family: '微軟雅黑';margin-top: 20px;margin-bottom: 10px;">寄</font>&nbsp;&nbsp;
            <b><font color="#1873CC" size="4" style="padding: 5px;margin-top: 20px;font-family: '微軟雅黑';margin-bottom: 10px;">7300銀兩=100元  &nbsp;即買即發</font></b>
        </p>
        <br/>
        <hr width="80%" />
        <p style="width: 80%; ">
            <b><font color="#424240" style="padding: 2px;font-family: '微軟雅黑';"> 遊戲名稱：忘仙</font></b>
        </p>
        <br/>
        <p style="width: 80%; ">
            <b><font color="#424240" style="padding: 2px;font-family: '微軟雅黑';"> 遊戲區服：三區/萬劍逍遙</font></b>
        </p>
        <br/>
        <p style="width: 80%; ">
            <b><font color="#424240" style="padding: 2px;font-family: '微軟雅黑';"> 遊戲型別：遊戲幣</font></b>
        </p>
        <br/>
        <p style="width: 80%; ">
            <b><font color="#424240" style="padding: 2px;font-family: '微軟雅黑';"> 單件數量：7300銀兩</font></b>
        </p>
        <br/>
        <p style="width: 80%; ">
            <b><font color="#424240" style="padding: 2px;font-family: '微軟雅黑';"> 商品單價：0.0135698515744元/銀兩</font></b>
        </p>
        <br/>
        <p style="width: 80%; ">
            <b><font color="#424240" style="padding: 2px;font-family: '微軟雅黑';margin-bottom: 15px;"> 商品庫存：1件</font></b>
        </p>
        <br/>
        <br/>
        <hr width="80%" />
        <p style="width: 80%; ">
            <b><font color="#FF6600" size="6" style="font-family: '微軟雅黑';">￥100</font>&nbsp;&nbsp;</b>
            <font id="backlist" color="#1873CC" size="5" style="font-family: '微軟雅黑';margin: 4px;"><a href="list.html" style="text-decoration: none;">返回列表頁</a></font>
        </p>
        <br/>
    </div>

    <a href="index.html" style="text-decoration: none;">
        <input type="button" value="立即購買" id="btn" />
    </a>
</center>

<div style="height: 50px;" align="center">
    <p>
        <a href="login.html" style="text-decoration: none;">登入</a> &nbsp;&nbsp;|&nbsp;&nbsp;
        <a href="regist.html" style="text-decoration: none;">註冊</a> &nbsp;&nbsp;|&nbsp;&nbsp;
        <a href="#body" style="text-decoration: none;">返回頂部</a>
    </p>
</div>

5. 手遊交易介面

效果圖如下

change.html手遊交易介面主要程式碼如下

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        @import url("../css/head.css");
        .tab {
            background: white;
            width: 90%;
            border: solid thin #E4E4E4;
            font-size: 20px;
            color: #6F7383;
        }
        .more {
            width: 100%;
            height: 40px;
        }
        #moreGm {
            position: relative;
            float: right;
            margin-right: 20px;
        }
        #left_content {
            position: absolute;
            margin-left: 22px;
        }
        #right_content {
            position: absolute;
            margin-left: 22px;
        }
    </style>
    <script>
        function showLeft() {
            // 顯示左邊
            document.getElementById("left_content").style.visibility = "visible";
            document.getElementById("right_content").style.visibility = "hidden";
        }

        function showRight() {
            // 顯示右邊
            document.getElementById("right_content").style.visibility = "visible";
            document.getElementById("left_content").style.visibility = "hidden";
        }
    </script>
</head>

<body style="margin:0;background:#E4E4E4">

    <div class="div_head">
        <p align="center" style="margin-top: 0px;">
            <a href="index.html">
                <img src="../img/7881/back.png" id="img_back" />
            </a>
            <span>手遊交易</span>
            <a href="index.html">
                <img src="../img/7881/home.png" id="img_home" />
            </a>
        </p>
    </div>

    <center>
        <table style="width: 100%; height: 30px; margin-top:30px ;font-size: 20px;color: #6F7383;">
            <tr>
                <th><a href="#" onclick="showLeft()" style="text-decoration: none;">熱門遊戲</a></th>
                <th><a href="#" onclick="showRight()" style="text-decoration: none;">最近瀏覽</a></th>
            </tr>
        </table>
        <hr width="90%" style="margin-top: 15px;margin-bottom: 15px;"></hr>

        <div style="height: 200px;" align="center">
            <table class="tab" id="left_content" border="1px" cellpadding="0px" cellspacing="0px">
                <tr style="height: 50px;">

                    <td style="width: 50%"><font style="margin-left: 20px;">忘仙</font></td>
                    <td style="width: 50%"><font style="margin-left: 20px;">神魔</font></td>

                </tr>
                <tr style="height: 50px;">
                    <td style="width: 50%"><font style="margin-left: 20px;">仙變</font></td>
                    <td style="width: 50%"><font style="margin-left: 20px;">時空獵人</font></td>
                </tr>
                <tr style="height: 50px;">
                    <td style="width: 50%"><font style="margin-left: 20px;">神與魔</font></td>
                    <td style="width: 50%"><font style="margin-left: 20px;">九州OL</font></td>
                </tr>
                <tr style="height: 50px;">
                    <td style="width: 50%"><font style="margin-left: 20px;">世界OL</font></td>
                    <td style="width: 50%"><font style="margin-left: 20px;">諸神OL</font></td>
                </tr>
            </table>

            <table id="right_content" class="tab" border="1px" cellpadding="0px" cellspacing="0px" style="visibility: hidden;">
                <tr style="height: 50px;">

                    <td style="width: 50%"><font style="margin-left: 20px;">1</font></td>
                    <td style="width: 50%"><font style="margin-left: 20px;">2</font></td>

                </tr>
                <tr style="height: 50px;">
                    <td style="width: 50%"><font style="margin-left: 20px;">3</font></td>
                    <td style="width: 50%"><font style="margin-left: 20px;">4</font></td>
                </tr>
                <tr style="height: 50px;">
                    <td style="width: 50%"><font style="margin-left: 20px;">5</font></td>
                    <td style="width: 50%"><font style="margin-left: 20px;">6</font></td>
                </tr>
                <tr style="height: 50px;">
                    <td style="width: 50%"><font style="margin-left: 20px;">7</font></td>
                    <td style="width: 50%"><font style="margin-left: 20px;">8</font></td>
                </tr>

            </table>
        </div>
    </center>

    <div class="more">
        <b>
        <p id="moreGm"><a href="#" style="text-decoration: none;"><font color="#1280C8">更多手機遊戲>></font></a></p>
        </b>
    </div>

    <div style="height: 50px;" align="center">
        <p>
            <a href="login.html" style="text-decoration: none;">登入</a> &nbsp;&nbsp;|&nbsp;&nbsp;
            <a href="regist.html" style="text-decoration: none;">註冊</a> &nbsp;&nbsp;|&nbsp;&nbsp;
            <a href="#body" style="text-decoration: none;">返回頂部</a>
        </p>
    </div>
    <div align="center">
        (c) 2014 m.7881.com
    </div>

</body>

6. 購物清單頁

效果圖如下

buy.html購買清單頁主要程式碼如下

<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        function clickme() {
            var result = confirm("確認購買嗎？");
            if (result) {
                alert("購買成功");
            } else {}
        }
    </script>
    <style>
        @import url("../css/head.css");
        .first {
            background: white;
            height: 140px;
            width: 94%;
            margin-top: 15px;
        }
        .second {
            background: white;
            height: 140px;
            width: 94%;
            margin-top: 5px;
        }
        .three {
            background: white;
            height: 140px;
            width: 94%;
            margin-top: 5px;
        }
        .decs {
            position: relative;
            float: left;
            width: 220px;
            height: 120px;
        }
        .buy {
            position: relative;
            float: right;
        }
        font {
            position: relative;
            float: left;
        }
        input {
            width: 60px;
            height: 30px;
            background: #0073C3;
            color: white;
            font-size: 18px;
            margin-right: 28px;
            margin-top: 60px;
        }
    </style>
</head>

<body style="margin:0;background:#E4E4E4">

    <div class="div_head">
        <p align="center" style="margin-top: 0px;">
            <a href="index.html">
                <img src="../img/7881/back.png" id="img_back" />
            </a>
            <span>忘仙</span>
            <a href="index.html">
                <img src="../img/7881/home.png" id="img_home" />
            </a>
        </p>
    </div>

    <center>
        <div class="first">
            <div class="decs">
                <p>
                    <font color="white" style="background: #F770CF;padding: 5px;font-family: '微軟雅黑';margin-left: 20px;">寄</font>&nbsp;&nbsp;
                    <b><font color="#1873CC" size="4" style="padding: 5px;margin-left: 2px;font-family: '微軟雅黑';">7300銀兩=100元</font></b>
                    <font></font>
                </p>
                <p>
                    <b><font color="#FF6600" size="5" style="font-family: '微軟雅黑';margin-top: 8px;margin-left: 20px;">￥100</font>&nbsp;&nbsp;</b>
                </p>

                <p>
                    <b><font color="#424240" style="padding: 2px;font-family: '微軟雅黑';margin-top: 10px;margin-left: 20px;"> 三區/萬劍逍遙/遊戲幣</font></b>
                </p>
            </div>

            <div class="buy">
                <input type="button" value="購買" onclick="clickme()" />
            </div>

        </div>
        <div class="second">
            <div class="decs" style="width: 240px;height: 120px;">
                <p>
                    <font color="white" style="background: #F770CF;padding: 5px;font-family: '微軟雅黑';margin-left: 20px;">寄</font>&nbsp;&nbsp;
                    <b><font color="#1873CC" size="4" style="padding: 5px;margin-left: 2px;font-family: '微軟雅黑';">7300銀兩=100元</font></b>
                    <font></font>
                </p>
                <p>
                    <b><font color="#FF6600" size="5" style="font-family: '微軟雅黑';margin-top: 8px;margin-left: 20px;">￥100</font>&nbsp;&nbsp;</b>
                </p>

                <p>
                    <b><font color="#424240" style="padding: 2px;font-family: '微軟雅黑';margin-top: 10px;margin-left: 20px;"> 三區/萬劍逍遙/遊戲幣</font></b>
                </p>
            </div>

            <div class="buy">
                <input type="button" value="購買" onclick="clickme()" />
            </div>
        </div>
        <div class="three">
            <div class="decs">
                <p>
                    <font color="white " style="background: #F770CF;padding: 5px;font-family: '微軟雅黑';margin-left: 20px; ">寄</font>&nbsp;&nbsp;
                    <b><font color="#1873CC " size="4 " style="padding: 5px;margin-left: 2px;font-family: '微軟雅黑'; ">7300銀兩=100元</font></b>
                    <font></font>
                </p>
                <p>
                    <b><font color="#FF6600 " size="5 " style="font-family: '微軟雅黑';margin-top: 8px;margin-left: 20px; ">￥100</font>&nbsp;&nbsp;</b>
                </p>

                <p>
                    <b><font color="#424240 " style="padding: 2px;font-family: '微軟雅黑';margin-top: 10px;margin-left: 20px; "> 三區/萬劍逍遙/遊戲幣</font></b>
                </p>
            </div>

            <div class="buy">
                <input type="button" value="購買" onclick="clickme()" />
            </div>
        </div>
    </center>

    <div style="height: 50px; " align="center">
        <p>
            <a href="login.html " style="text-decoration: none; ">登入</a> &nbsp;&nbsp;|&nbsp;&nbsp;
            <a href="regist.html " style="text-decoration: none; ">註冊</a> &nbsp;&nbsp;|&nbsp;&nbsp;
            <a href="#body " style="text-decoration: none; ">返回頂部</a>
        </p>
        <p>
            <img style="width: 150px;height: 60px; " src="../img/7881/bottom.png " />
        </p>
    </div>

</body>

JavaWeb基礎知識：Html，Css和Javascript專案實戰

Html，Css和Javascript專案實戰專案1：使用Html5的Canvas物件繪製一個圓形鐘盤，顯示實時時間效果圖如下程式碼如下 <!DOCTYPE html> <html> <head>

每天一個JS 小demo之韓雪冬輪播圖。主要知識點：html，css布局，對於數組和對象的理解和運用

身高全局 borde ava ebo 空間 use mouseout desc 1 @charset "utf-8"; 2 /* CSS Document */ 3 4 * { padding: 0; margin: 0; } 5 li { list-st

Java基礎知識：類，多型，Object，陣列和字串

類類的定義格式： [類的修飾符] class 類的名稱 [extends 父類名稱][implements 介面名稱列表] { 變數的定義以及變數的初始化；方法的定義以及方法體； } 類的修飾符：public，abstract ，final等。 private

前端零基礎入門（三）：HTML，CSS，Javascript三者之間的關係

每個人接觸前端的角度可能都不一樣有些人是以前從事web相關行業的，比如後端，比如設計。從事這些行業的人因為工作需要，多多少少都會對前端有一定的瞭解，不一定是這個詞，但一定是這個職位小白的話，可能更多的聽到的是h5，css3之類的名詞，其實無論從哪個角度接

MySQL基礎知識：建立MySQL資料庫和表

虛構一個微型線上書店的資料庫和資料，作為後續MySQL指令碼的執行源，方便後續MySQL和SQL的練習。在虛構這個庫的過程中，主要涉及的是如何使用命令列管理 ```MySQL```資料庫物件：資料庫、表、索引、外來鍵等；另一個更為重要的是如何Mock對應表的資料。 **虛構書店資料庫的dump指令碼**

前端三要素：HTML、CSS、JavaScript以及三者的關係

Web前端開發技術包括三個要素：html（結構）、css（樣式）、javascript（行為動作）。現在前端三要素也演化成HTML5、CSS3、jQuery（js中常用的庫）。 HTML5：HTML可以簡單理解為在前端技術中勾勒出一個結構。而HTML5是超文字標記言語(HTML)的第五

有哪些關於前端開發技術（HTML、CSS 和 JavaScript 等）的值得推薦的書籍？

第一本，入門《Head first HTML&CSS》最好的入門書。看兩遍就對HTML & CSS 有個大概印象了。此時把w3cschool作為備查手冊收藏起來第二本《CSS權威指南（第三版）》最權威的CSS書籍，除了閱讀W3C的文件外的不二選擇（就是翻譯有點操蛋，遇到感到難理解的地方…顯示

前端基礎知識之html和css全解

# 前端回顧 [TOC] 前端就是展示給使用者並且與使用者進行互動的操作介面。前端包括包括三部分： 1. html:網頁的骨架，沒有任何樣式，比較醜 2. css:相當於一些裝飾品，給骨架新增樣式。 3. js：控制網頁的動態效果。前端也有很多框架，只需要按照固定的語法進行呼叫即可。 ## 基

【轉】 javaweb 基礎知識和 Tomcat 是什麽

att logic 資源 spa 文件系統 png intra 很快應用開發 JavaWeb學習總結(一)——JavaWeb開發入門一、基本概念 1.1、WEB開發的相關知識　　WEB，在英語中web即表示網頁的意思，它用於表示Internet主機上供外界訪問的資

數據庫基礎知識：數據庫中的約束和三大範式

設計一個生效訂單詳細介紹求長山東英文名稱相關一.數據庫中的範式：　　範式，英文名稱是 Normal Form，它是英國人 E.F.Codd（關系數據庫的老祖宗）在上個世紀70年代提出關系數據庫模型後總結出來的，範式是關系數據庫理論的基礎，也是我們在設計

html、css和js原生寫一個模態彈出框，順便解決父元素半透明子元素不透明效果

script javascrip z-index htm index 彈出 rgb 特性 radi 模態框： html部分：  <button id="box" onclick="pop_box()">彈出框</

css總結18：HTML 表單和輸入

進行 ons 單選允許 word pan 通過定義 file 1 HTML 表單和輸入 1.1 HTML 表單介紹表單是一個包含表單元素的區域。表單元素是允許用戶在表單中輸入內容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復選

js基礎知識：閉包，事件處理，原型

bsp ret asc 原函數 ati tac ons 標識符構造閉包：其實就是js代碼在執行的時候會創建變量對象的一個作用域鏈，標識符解析的時候會沿著作用域鏈一級一級的網上搜索，最後到達全局變量停止。所以某個函數可以訪問外層的局部變量和全局變量，但是訪問不了裏層的變量

『基礎DP專題：LIS，LCS和揹包九講(不包括泛化物品)及實現』

<前言> <更新提示> <第一次更新>重點揹包 <正文> 序列dp問題 LIS問題(最長上升子序列) 求長度為n的序列A中最長上升子序列的長度。分析狀態：f[i]代表以a[i]結尾的最長上升子

Python全棧必學知識：如何使用dict和set操作方法，正確的案例詳解！

Python內建了字典：dict的支援，dict全稱dictionary，在其他語言中也稱為map，使用鍵-值（key-value）儲存，具有極快的查詢速度。舉個例子，假設要根據同學的名字查詢對應的成績，如果用list實現，需要兩個list： names = ['Michael', 'Bob

python學習之網站的編寫（HTML，CSS，JS）（十四）----------CSS的display行內標籤和塊級標籤的轉換，控制標籤是否顯示

行內標籤：有多大就佔多大，無法設定高度，寬度和邊距。塊級標籤：佔一行，可以設定高度，寬度和邊距。塊級標籤轉為行內標籤：display:inline 行內標籤轉為塊級標籤：display:block 還有一個特殊的轉換，既包含塊級標籤的屬性，又具有行內標籤的屬性，自己有多少佔多少，

python學習之網站的編寫（HTML，CSS，JS）（十三）----------CSS字型和對齊方式的設定

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>逆水行舟不進則退</title> </head> <b

php四種基礎演算法：冒泡，選擇，插入和快速排序法程式碼練習

function maopao($arr,$len) { for($i=1;$i<$len;$i++) { for($j=0;$j<$len-$i;$j++) { if($arr[$j]>$arr[$j+1])

html，css，js實現音樂播放，含音訊特效和歌詞

前端播放器樣例有需要的小夥伴直接用就行：https://download.csdn.net/download/qq_34042417/10669205 實現思路： 1.載入完頁面後請求等到歌曲，歌詞檔案，要實現歌詞跟歌曲滾動則要求歌詞是lrc格式。 2.對歌詞處理，處理

演算法優化（1）：基礎知識-凸集，單峰函式，擬凸函式與凸函式，函式凹凸性定義

本文筆記介紹我最近學習的演算法優化的基礎知識，有：最優化問題的一般形式約束問題的分類及形式優化問題的分類單峰函式（Unimodal function）的定義擬凸函式（Quasiconvex function）的定義

JavaWeb基礎知識：Html，Css和Javascript專案實戰

Html，Css和Javascript專案實戰

專案1：使用Html5的Canvas物件繪製一個圓形鐘盤，顯示實時時間

專案2：模擬手機上的7881網頁，使用Html，Css和Javascript聯合開發

1. 主頁

2. 登入介面

3. 註冊介面

4. 物品詳情頁

5. 手遊交易介面

6. 購物清單頁

相關推薦