HTML & CSS

来源:https://www.cnblogs.com/p1ng/archive/2020/02/15/12313506.html
-Advertisement-
Play Games

這兩天複習了下HTML和CSS的一些基本內容並實現了兩個小的案例，在此整理一下。 主要內容 1. web概念概述 2. HTML 3. CSS web概念概述 JavaWeb： 使用Java語言開發基於互聯網的項目 軟體架構： 1. C/S: Client/Server 客戶端/伺服器端 在用戶本地 ...


這兩天複習了下HTML和CSS的一些基本內容並實現了兩個小的案例，在此整理一下。

主要內容

  1. web概念概述
  2. HTML
  3. CSS

web概念概述

* JavaWeb：
    * 使用Java語言開發基於互聯網的項目

* 軟體架構：
    1. C/S: Client/Server 客戶端/伺服器端
        * 在用戶本地有一個客戶端程式，在遠程有一個伺服器端程式
        * 如：QQ，迅雷...
        * 優點：
            (1). 用戶體驗好
        * 缺點：
            (1). 開發、安裝、部署、維護 麻煩
    2. B/S: Browser/Server 瀏覽器/伺服器端
        * 只需要一個瀏覽器，用戶通過不同的網址(URL)，客戶訪問不同的伺服器端程式
        * 優點：
            (1) 開發、安裝、部署、維護 簡單
        * 缺點：
            (1) 如果應用過大，用戶的體驗可能會受到影響
            (2) 對硬體要求過高

* B/S架構詳解
    * 資源分類：
        1. 靜態資源：
            * 使用靜態網頁開發技術發佈的資源。
            * 特點：
                * 所有用戶訪問，得到的結果是一樣的。
                * 如：文本,圖片,音頻,視頻, HTML,CSS,JavaScript
                * 如果用戶請求的是靜態資源，那麼伺服器會直接將靜態資源發送給瀏覽器。瀏覽器中內置了靜態資源的解析引擎，可以展示靜態資源。
        2. 動態資源：
            * 使用動態網頁及時發佈的資源。
            * 特點：
                * 所有用戶訪問，得到的結果可能不一樣。
                * 如：jsp/servlet,php,asp...
                * 如果用戶請求的是動態資源，那麼伺服器會執行動態資源，轉換為靜態資源，再發送給瀏覽器。


    * 我們要學習動態資源，必須先學習靜態資源！

    * 靜態資源：
        * HTML：用於搭建基礎網頁，展示頁面的內容
        * CSS：用於美化頁面，佈局頁面
        * JavaScript：控制頁面的元素，讓頁面有一些動態的效果

HTML

1. 概念：是最基礎的網頁開發語言
    * Hyper Text Markup Language 超文本標記語言
        * 超文本:
            * 超文本是用超鏈接的方法，將各種不同空間的文字信息組織在一起的網狀文本.
        * 標記語言:
            * 由標簽構成的語言。<標簽名稱> 如 html，xml
            * 標記語言不是編程語言

2. 快速入門：
    * 語法：
        1. html文檔尾碼名 .html 或者 .htm
        2. 標簽分為
            1. 圍堵標簽：有開始標簽和結束標簽。如 <html> </html>
            2. 自閉和標簽：開始標簽和結束標簽在一起。如 <br/>

        3. 標簽可以嵌套：
            需要正確嵌套，不能你中有我，我中有你
            錯誤：<a><b></a></b>
            正確：<a><b></b></a>

        4. 在開始標簽中可以定義屬性。屬性是由鍵值對構成，值需要用引號(單雙都可)引起來
        5. html的標簽不區分大小寫，但是建議使用小寫。

    * 代碼：
        <html>
            <head>
                <title>title</title>
            </head>
            <body>
                <FONT color='red'>Hello World</font><br/>
                <font color='green'>Hello World</font>
            </body>
        </html>

3. 標簽學習：
    (1) 文件標簽：構成html最基本的標簽
        * html:html文檔的根標簽
        * head：頭標簽。用於指定html文檔的一些屬性。引入外部的資源
        * title：標題標簽。
        * body：體標簽
        * <!DOCTYPE html>：html5中定義該文檔是html文檔
    (2) 文本標簽：和文本有關的標簽
        * 註釋：<!-- 註釋內容 -->
        * <h1> to <h6>：標題標簽
            * h1~h6:字體大小逐漸遞減
        * <p>：段落標簽
        * <br>：換行標簽
        * <hr>：展示一條水平線
            * 屬性：
                * color：顏色
                * width：寬度
                * size：高度
                * align：對其方式
                    * center：居中
                    * left：左對齊
                    * right：右對齊
        * <b>：字體加粗
        * <i>：字體斜體
        * <font>:字體標簽
        * <center>:文本居中
            * 屬性：
                * color：顏色
                * size：大小
                * face：字體

        * 屬性定義：
            * color：
                1. 英文單詞：red,green,blue
                2. rgb(值1，值2，值3)：值的範圍：0~255  如: rgb(0,0,255)
                3. #值1值2值3：值的範圍：00~FF之間。如： #FF00FF
            * width：
                1. 數值：width='20' ,數值的單位，預設是 px(像素)
                2. 數值%：占比相對於父元素的比例

        * 案例：HTML百度百科demo
            <!DOCTYPE html>
            <html lang="ch">
            <head>
                <meta charset="UTF-8">
                <title>HTML</title>
            </head>
            <body>
            <h1>HTML</h1>
            <hr color="#ffd700">
            
            <p>
                <b>HTML</b>稱為超文本標記語言，是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網路上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。
            </p>
            
            <p>
                超文本是一種組織信息的方式，它通過超級鏈接方法將文本中的文字、圖表與其他信息媒體相關聯。這些相互關聯的信息媒體可能在同一文本中，也可能是其他文件，或是地理位置相距遙遠的某台電腦上的文件。這種組織信息方式將分佈在不同位置的信息資源用隨機方式進行連接，為人們查找，檢索信息提供方便。
            </p>
            
            <hr color="#ffd700">
            <font color="gray" size="2">
                <center>
                    ©2020 Baidu 使用百度前必讀 | 百科協議 | 隱私政策 | 百度百科合作平臺 | 京ICP證030173號<br>
                    京公網安備11000002000001號
                </center>
            </font>
            
            </body>
            </html>

    (3) 圖片標簽：
        * img：展示圖片
            * 屬性：
                * src：指定圖片的位置
                * alt:規定圖像的替代文本，若未刷新出來則顯示alt中的文本

        * 代碼：
             <!--展示一張圖片 img-->

            <img src="image/jingxuan_2.jpg" align="right" alt="古鎮" width="500" height="500"/>
        
            <!--
                相對路徑
                    * 以.開頭的路徑
                        * ./：代表當前目錄  ./image/1.jpg
                        * ../:代表上一級目錄
             -->
        
            <img src="./image/jiangwai_1.jpg">
            <img src="../image/jiangwai_1.jpg">

    (4) 列表標簽：
        * 有序列表：
            * ol:
                * 屬性：
                    * type:有序列表的樣式如"1"、"A"、"I"
                    * start:有序列表的開始位置
            * li:列表項
        * 無序列表：
            * ul:
                * 屬性：
                    * type: disc square circle
            * li:列表項
            
    (5) 鏈接標簽：
        * a:定義一個超鏈接
            * 屬性：
                * href：指定訪問資源的URL(統一資源定位符)
                * target：指定打開資源的方式
                    * _self:預設值，在當前頁面打開
                    * _blank：在空白頁面打開

        * 代碼：
            <!--超鏈接  a-->

            <a href="http://www.baidu.com">點我</a>
            <br>
        
            <a href="http://www.baidu.com" target="_self">點我</a>
            <br>
            <a href="http://www.baidu.com" target="_blank">點我</a>
        
            <br>
        
            <a href="./5_列表標簽.html">列表標簽</a><br>
            <a href="mailto:[email protected]">聯繫我們</a>
        
            <br>
            <a href="http://www.baidu.com"><img src="image/jiangwai_1.jpg"></a>

    (6) div和span：
        * div:每一個div占滿一整行。塊級標簽
        * span：文本信息在一行展示。行內標簽 內聯標簽

    (7) 語義化標簽：html5中為了提高程式的可讀性，提供了一些標簽。
        1. <header>：頁眉
        2. <footer>：頁腳

    (8) 表格標簽：
        * table：定義表格
            * width：寬度
            * border：邊框
            * cellpadding：定義內容和單元格的距離
            * cellspacing：定義單元格之間的距離。如果指定為0，則單元格的線會合為一條、
            * bgcolor：背景色
            * align：對齊方式
        * tr：定義行
            * bgcolor：背景色
            * align：對齊方式
        * td：定義單元格
            * colspan：合併列
            * rowspan：合併行
        * th：定義表頭單元格
        * <caption>：表格標題
        * <thead>：表示表格的頭部分
        * <tbody>：表示表格的體部分
        * <tfoot>：表示表格的腳部分
        
        * 演示代碼：
                <!DOCTYPE html>
                <html lang="ch">
                <head>
                    <meta charset="UTF-8">
                    <title>表格標簽</title>
                </head>
                <body>
                    <table border="1" width="40%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
                        <caption>學生信息表</caption>
                        <thead>
                            <tr>
                                <th>編號</th>
                                <th>姓名</th>
                                <th>成績</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>張三</td>
                                <td>100</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>李四</td>
                                <td>60</td>
                            </tr>
                        </tbody>
                        <tfoot >
                            <tr bgcolor="red">
                                <td>1</td>
                                <td>王五</td>
                                <td>40</td>
                            </tr>
                        </tfoot>
                    </table>
                </body>
                </html>

特殊字元表：

案例：旅游網站首頁

1. 確定使用table來完成佈局   
2. 如果某一行只有一個單元格，則使用<tr><td></td></tr>
3. 如果某一行有多個單元格，則使用
    <tr>
        <td>
            <table></table>
        </td>
    </tr>

4. 代碼實現

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>旅游網</title>
    </head>
    <body>
    <!--採用table來完成佈局-->
    <!--最外層的table，用於整個頁面的佈局-->
    <table width="100%" align="center">
        <!-- 第1行 -->
        <tr>
            <td>
                <img src="image/top_banner.jpg" width="100%" alt="">
            </td>
        </tr>
    
        <!-- 第2行 -->
        <tr>
            <td>
                <table width="100%" align="center">
                    <tr>
                        <td>
                            <img src="image/logo.jpg" alt="">
                        </td>
                        <td>
                            <img src="image/search.png" alt="">
                        </td>
                        <td>
                            <img src="image/hotel_tel.png" alt="">
                        </td>
                    </tr>
                </table>
    
            </td>
        </tr>
    
        <!-- 第3行 -->
        <tr>
            <td>
                <table width="100%" align="center">
                    <tr bgcolor="#ffd700" align="center" height="45" >
                        <td>
                            <a href="">首頁</a>
                        </td>
    
                        <td>
                            門票
                        </td>
    
                        <td>
                            酒店
                        </td>
    
                        <td>
                            香港車票
                        </td>
    
                        <td>
                            出境游
                        </td>
    
                        <td>
                            國內游
                        </td>
    
                        <td>
                            港澳游
                        </td>
    
                        <td>
                            抱團定製
                        </td>
    
                        <td>
                            全國自由行
                        </td>
    
                        <td>
                            收藏排行榜
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    
        <!-- 第4行 輪播圖 -->
        <tr>
            <td>
                <img src="image/banner_3.jpg" alt="" width="100%">
            </td>
        </tr>
    
        <!-- 第5行 精選推薦-->
        <tr>
            <td>
                <img src="image/icon_5.jpg" alt="">
                精選推薦
                <hr  color="#ffd700" >
            </td>
        </tr>
    
        <!-- 第6行 -->
        <tr>
            <td>
                <table align="center" width="95%">
                    <tr>
                        <td>
    
                            <img src="image/jiangxuan_1.jpg" alt="">
                            <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
                            <font color="red">&yen; 899</font>
                        </td>
    
                        <td>
    
                            <img src="image/jiangxuan_1.jpg" alt="">
                            <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
                            <font color="red">&yen; 899</font>
                        </td>
    
                        <td>
    
                            <img src="image/jiangxuan_1.jpg" alt="">
                            <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
                            <font color="red">&yen; 899</font>
                        </td>
    
                        <td>
    
                            <img src="image/jiangxuan_1.jpg" alt="">
                            <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
                            <font color="red">&yen; 899</font>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    
        <!-- 第7行 國內游 -->
        <tr>
            <td>
                <img src="image/icon_6.jpg" alt="">
                國內游
                <hr  color="#ffd700" >
            </td>
        </tr>
    
        <!-- 第8行 -->
        <tr>
            <td>
                <table align="center" width="95%">
                    <tr>
                        <td rowspan="2">
                            <img src="image/guonei_1.jpg" alt="">
                        </td>
    
                        <td>
    
                            <img src="image/jiangxuan_2.jpg" alt="" height="100%">
                            <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
                            <font color="red">&yen; 699</font>
                        </td>
    
                        <td>
    
                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
                            <font color="red">&yen; 699</font>
                        </td>
    
                        <td>
    
                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
                            <font color="red">&yen; 699</font>
                        </td>
                    </tr>
    
                    <tr>
                        <td>
    
                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
                            <font color="red">&yen; 699</font>
                        </td>
    
                        <td>
    
                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
                            <font color="red">&yen; 699</font>
                        </td>
    
                        <td>
    
                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
                            <font color="red">&yen; 699</font>
                        </td>
    
    
                    </tr>
                </table>
            </td>
        </tr>
    
        <!-- 第9行 境外游 -->
        <tr>
            <td>
                <img src="image/icon_7.jpg" alt="">
                境外游
                <hr  color="#ffd700" >
            </td>
        </tr>
    
        <!-- 第10行 -->
        <tr>
            <td>
                <table align="center" width="95%">
                    <tr>
                        <td rowspan="2">
                            <img src="image/jiangwai_1.jpg" alt="">
                        </td>
    
                        <td>
    
                            <img src="image/jiangxuan_3.jpg" alt="" height="100%">
                            <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
                            <font color="red">&yen; 699</font>
                        </td>
    
                        <td>
    
                            <img src="image/jiangxuan_3.jpg" alt="">
                            <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
                            <font color="red">&yen; 699</font>
                        </td>
    
                        <td>
    
                            <img src="image/jiangxuan_3.jpg" alt="">
                            <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
                            <font color="red">&yen; 699</font>
                        </td>
                    </tr>
    
                    <tr>
                        <td>
    
                            <img src="image/jiangxuan_3.jpg" alt="">
                            <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
                            <font color="red">&yen; 699</font>
                        </td>
    
                        <td>
    
                            <img src="image/jiangxuan_3.jpg" alt="">
                            <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
                            <font color="red">&yen; 699</font>
                        </td>
    
                        <td>
    
                            <img src="image/jiangxuan_3.jpg" alt="">
                            <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
                            <font color="red">&yen; 699</font>
                        </td>
    
    
                    </tr>
                </table>
            </td>
        </tr>
        <!-- 第11行 -->
        <tr>
            <td>
                <img src="image/footer_service.png" alt="" width="100%">
            </td>
        </tr>
    
        <!-- 第12行 -->
        <tr>
            <td align="center" bgcolor="#ffd700" height="40">
                <font color="gray" size="2">
                    平醬旅游有限公司
                    版權所有Copyright 2006-2020&copy;, All Rights Reserved 蘇ICP備88888888
                </font>
            </td>
        </tr>
    </table>
    </body>
    </html>

HTML標簽：表單標簽

* 表單：
    * 概念：用於採集用戶輸入的數據的。用於和伺服器進行交互。
    * form：用於定義表單的。可以定義一個範圍，範圍代表採集用戶數據的範圍
        * 屬性：
            * action：指定提交數據的URL
            * method:指定提交方式
                * 分類：一共7種，2種比較常用
                   * get：
                        1. 請求參數會在地址欄中顯示。會封裝到請求行中(HTTP協議中學過)。
                        2. 請求參數大小是有限制的。
                        3. 不太安全。
                   * post：
                        2. 請求參數不會在地址欄中顯示。會封裝在請求體中(HTTP協議中學過)
                        2. 請求參數的大小沒有限制。
                        3. 較為安全。

        * 表單項中的數據要想被提交：必須指定其name屬性


    * 表單項標簽：
        * input：可以通過type屬性值，改變元素展示的樣式
            * type屬性：
                * text：文本輸入框，預設值
                    * placeholder：指定輸入框的提示信息，當輸入框的內容發生變化，會自動清空提示信息  
                * password：密碼輸入框
                * radio:單選框
                    * 註意：
                        1. 要想讓多個單選框實現單選的效果，則多個單選框的name屬性值必須一樣。
                        2. 一般會給每一個單選框提供value屬性，指定其被選中後提交的值
                        3. checked屬性，可以指定預設值
                * checkbox：覆選框
                    * 註意：
                        1. 一般會給每一個單選框提供value屬性，指定其被選中後提交的值
                        2. checked屬性，可以指定預設值

                * file：文件選擇框
                * hidden：隱藏域，用於提交一些信息。
                * 按鈕：
                    * submit：提交按鈕。可以提交表單
                    * button：普通按鈕
                    * image：圖片提交按鈕
                        * src屬性指定圖片的路徑
                * color：取色器
                * date：日期
                * datetime-local：帶時間的日期，不帶時區
                * email：定義用於email地址的欄位
                * number：定義用於輸入數字的欄位

           * label：指定輸入項的文字描述信息
               * 註意：
                   * label的for屬性一般會和 input 的 id屬性值對應。如果對應了，則點擊label區域會讓input輸入框獲取焦點。
        * select: 下拉列表
            * 子元素：option，指定列表項
                * 加上selected 預設選中
            
        * textarea：文本域
            * cols：指定列數，每一行有多少個字元
            * rows：預設多少行。

CSS：頁面美化和佈局控制

1. 概念： Cascading Style Sheets 層疊樣式表
    * 層疊：多個樣式可以作用在同一個html的元素上，同時生效

2. 好處：
    (1) 功能強大
    (2) 將內容展示和樣式控制分離
        * 降低耦合度。解耦
        * 讓分工協作更容易
        * 提高開發效率


3. CSS的使用：CSS與html結合方式
    (1) 內聯樣式
         * 在標簽內使用style屬性指定css代碼
         * 如：<div style="color:red;">hello css</div>
    (2) 內部樣式
        * 在head標簽內，定義style標簽，style標簽的標簽體內容就是css代碼
        * 如：
            <style>
                div{
                    color:blue;
                }
        
            </style>
            <div>hello css</div>
    (3) 外部樣式
        1. 定義css資源文件。
        2. 在head標簽內，定義link標簽，引入外部的資源文件
        * 如：
            * a.css文件：
                div{
                    color:green;
                }
            
            <link rel="stylesheet" href="css/a.css">
            <div>hello css</div>
            <div>hello css</div>

    * 註意：
        * 1,2,3種方式 css作用範圍越來越大
        * 1方式不常用，常用2,3
        * 第3種格式可以寫為：
            <style>
                @import "css/a.css";
            </style>

4. css語法：
    * 格式：
        選擇器 {
            屬性名1:屬性值1;
            屬性名2:屬性值2;
            ...
        }
    * 選擇器:篩選具有相似特征的元素
    * 註意：
        * 每一對屬性需要使用；隔開，最後一對屬性可以不加；


5. 選擇器：篩選具有相似特征的元素
    * 分類：
        (1) 基礎選擇器
            1. id選擇器：選擇具體的id屬性值的元素.建議在一個html頁面中id值唯一
                * 語法：#id屬性值{}
            2. 元素選擇器：選擇具有相同標簽名稱的元素
                * 語法：標簽名稱{}
                * 註意：id選擇器優先順序高於元素選擇器
            3. 類選擇器：選擇具有相同的class屬性值的元素。
                * 語法：.class屬性值{}
                * 註意：類選擇器選擇器優先順序高於元素選擇器
        (2) 擴展選擇器：
            1. 選擇所有元素：
                * 語法： *{}
            2. 並集選擇器：
                * 選擇器1,選擇器2{}
            3. 子選擇器：篩選選擇器1元素下的選擇器2元素
                * 語法：  選擇器1 選擇器2{}
            4. 父選擇器：篩選選擇器2的父元素選擇器1
                * 語法：  選擇器1 > 選擇器2{}
            5. 屬性選擇器：選擇元素名稱，屬性名=屬性值的元素
                * 語法：  元素名稱[屬性名="屬性值"]{}
            6. 偽類選擇器：選擇一些元素具有的狀態
                * 語法： 元素:狀態{}
                * 如： <a>
                    * 狀態：
                        * link：初始化的狀態
                        * hover：滑鼠懸浮狀態
                        * active：正在訪問狀態
                        * visited：被訪問過的狀態
                        
                        
                        

6. 屬性
    (1) 字體、文本
        * font-size：字體大小
        * color：文本顏色
        * text-align：對其方式
        * line-height：行高 
    (2) 背景
        * background：複合屬性
            * no-repeat 不重覆
            * url("圖片路徑")
    (3) 邊框
        * border：設置邊框，複合屬性
            * style ： solid 實線邊界 dashed 虛線框
    (4) 尺寸
        * width：寬度
        * height：高度
    (5) 盒子模型：控制佈局
        * margin：外邊距
            * margin: auto; 讓div水平居中
        * padding：內邊距
            * 預設情況下內邊距會影響整個盒子的大小
            * box-sizing: border-box;  設置盒子的屬性，讓width和height就是最終盒子的大小
        
        * float：浮動
            * left
            * right

註冊頁面案例

實現效果：

分析：

實現代碼如下：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>註冊頁面</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        body{
            background: url("img/register_bg.png") no-repeat center;
            padding-top: 25px;
        }
    
        .rg_layout{
            width: 900px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background-color: white;
            /*讓div水平居中*/
            margin: auto;
        }
    
        .rg_left{
            /*border: 1px solid red;*/
            float: left;
            margin: 15px;
        }
        .rg_left > p:first-child{
            color:#FFD026;
            font-size: 20px;
        }
    
        .rg_left > p:last-child{
            color:#A6A6A6;
            font-size: 20px;
    
        }
    
    
        .rg_center{
            float: left;
           /* border: 1px solid red;*/
    
        }
    
        .rg_right{
            /*border: 1px solid red;*/
            float: right;
            margin: 15px;
        }
    
        .rg_right > p:first-child{
            font-size: 15px;
    
        }
        .rg_right p a {
            color:pink;
        }
    
        .td_left{
            width: 100px;
            text-align: right;
            height: 45px;
        }
        .td_right{
            padding-left: 50px ;
        }
    
        #username,#password,#email,#name,#tel,#birthday,#checkcode{
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6 ;
            /*設置邊框圓角*/
            border-radius: 5px;
            padding-left: 10px;
        }
        #checkcode{
            width: 110px;
        }
    
        #img_check{
            height: 32px;
            vertical-align: middle;
        }
    
        #btn_sub{
            width: 150px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid #FFD026 ;
        }
    
    </style>
    
    </head>
    <body>
    
    <div class="rg_layout">
        <div class="rg_left">
            <p>新用戶註冊</p>
            <p>USER REGISTER</p>
    
        </div>
    
        <div class="rg_center">
            <div class="rg_form">
                <!--定義表單 form-->
                <form action="#" method="post">
                    <table>
                        <tr>
                            <td class="td_left"><label for="username">用戶名</label></td>
                            <td class="td_right"><input type="text" name="username" id="username" placeholder="請輸入用戶名"></td>
                        </tr>
    
                        <tr>
                            <td class="td_left"><label for="password">密碼</label></td>
                            <td class="td_right"><input type="password" name="password" id="password" placeholder="請輸入密碼"></td>
                        </tr>
    
                        <tr>
                            <td class="td_left"><label for="email">Email</label></td>
                            <td class="td_right"><input type="email" name="email" id="email" placeholder="請輸入郵箱"></td>
                        </tr>
    
                        <tr>
                            <td class="td_left"><label for="name">姓名</label></td>
                            <td class="td_right"><input type="text" name="name" id="name" placeholder="請輸入姓名"></td>
                        </tr>
    
                        <tr>
                            <td class="td_left"><label for="tel">手機號</label></td>
                            <td class="td_right"><input type="text" name="tel" id="tel" placeholder="請輸入手機號"></td>
                        </tr>
    
                        <tr>
                            <td class="td_left"><label>性別</label></td>
                            <td class="td_right">
                                <input type="radio" name="gender" value="male"> 男
                                <input type="radio" name="gender" value="female"> 女
                            </td>
                        </tr>
    
                        <tr>
                            <td class="td_left"><label for="birthday">出生日期</label></td>
                            <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="請輸入出生日期"></td>
                        </tr>
    
                        <tr>
                            <td class="td_left"><label for="checkcode" >驗證碼</label></td>
                            <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="請輸入驗證碼">
                                <img id="img_check" src="img/verify_code.jpg">
                            </td>
                        </tr>

                        <tr>
                            <td colspan="2" align="center"><input type="submit" id="btn_sub" value="註冊"></td>
                        </tr>
                    </table>
    
                </form>

            </div>
    
        </div>
    
        <div class="rg_right">
            <p>已有賬號?<a href="#">立即登錄</a></p>
        </div>
    
    </div>
    </body>
    </html>

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • uniapp簡易直播
    實驗準備 1. 在伺服器部署 作為我們直播推流和拉流的伺服器（如果服務商選擇七牛，也是直接給地址推流）。為了加快部署，我在這一步使用Docker。 2. 記下推流地址（我本地搭建的： ） 3. 新建Uniapp項目 4. 點擊項目下方的 文件，點擊APP常用其他設置 去除V3編譯器 （Hbuilde ...
  • 前端：CSS第四章第一節
    第一部分：樣式規則 塊級元素一行只有一個，比如P標簽 CSS層疊樣式表，意思就是樣式是可以疊加的，比如下麵的代碼 <style> .ok{ color: aqua; } .blue{ color: #5283ff; }/*p名詞叫標簽選擇器*/ p{ color: black; font-size: ...
  • JavaScript 基礎學習（二）js 和 html 的結合方式
    第一種 使用一個標簽 第二種 使用 script 標簽，引入一個外部的 js 文件 需要創建一個js文件寫js代碼 使用第二種方式時候，不需要在script標簽裡面寫js代碼 第三種： 與HTML標簽中屬性結合 註意事項 script標簽用於引入外部文件，就不能再編寫其他script代碼了，即使編寫 ...
  • JS常見的表單驗證，H5自帶的驗證和正則表達式的驗證
    H5驗證 自帶的驗證無法滿足需求： <form action="" method="get"> name:<input type="text" name="name"><br> email:<input type="email" name="email"><br> age:<input type=" ...
  • JavaScript 基礎學習（一）JavaScript 簡介
    定義 JavaScript是基於對象和事件驅動的語言，應用與客戶端。其中： 基於對象：提供好了很多對象，可以直接拿過來使用 事件驅動：html做網站靜態效果，javascript動態效果(網頁能根據客戶操作事件作出響應) 客戶端：專門指的是瀏覽器 特點 解釋型語言：無需編譯，直接運行 交互性：信息的 ...
  • position屬性值4缺一帶你瞭解相對還是絕對抑或是固定定位
    阿基米德說“給我一個支點,我能翹起整個地球”，在HTML頁面中，給你一個坐標，可以把任何一個元素定位目標點，這就是定位！CSS有三種基本的定位機制：相對定位、絕對定位、固定定位，決定定位的position屬性的值有static預設標準流，當然這個就不用多說了；fixed固定定位，releative相... ...
  • getElementsByTagName得到的對象
    今天練習使用DOM創建html元素，想通過getElementsByTagName("body")獲得body對象，然後建立和新創建的元素的關係，如下圖： 其實，getElementsByTagName("body")得到的是一個偽數組，需要按照數組的訪問方式進行方式，但是不能調用數組的方法，若需調 ...
  • JS正則表達式的創建、匹配字元串、轉義、字元類、重覆以及常用字元
    正則表達式都是操作字元串的 作用：對數據進行查找、替換、有效性驗證 創建正則表達式的兩種方式： // 字面量方式 /js/ // 構造函數方式 regular expression new RegExp() 普通字元：字母 數字 漢字 _ 空格 ; , @ （沒有特殊含義的符號） 兩種匹配的方式： ...
一周排行
    -Advertisement-
    Play Games
  • UOS 開啟 VisualStudio 遠程調試 .NET 應用之旅
    前言 在我們開發過程中基本上不可或缺的用到一些敏感機密數據，比如SQL伺服器的連接串或者是OAuth2的Secret等，這些敏感數據在代碼中是不太安全的，我們不應該在源代碼中存儲密碼和其他的敏感數據，一種推薦的方式是通過Asp.Net Core的機密管理器。 機密管理器 在 ASP.NET Core ...
  • C# - 能否讓 SortedSet.RemoveWhere 內傳入的委托非同步執行
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • 順序棧的介面程式
    順序棧的介面程式 目錄順序棧的介面程式頭文件創建順序棧入棧出棧利用棧將10進位轉16進位數驗證 頭文件 #include <stdio.h> #include <stdbool.h> #include <stdlib.h> 創建順序棧 // 指的是順序棧中的元素的數據類型，用戶可以根據需要進行修改 ...
  • mORMot2 獲取數據集1
    前言 整理這個官方翻譯的系列，原因是網上大部分的 tomcat 版本比較舊，此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎，輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • 萬字長文總結與剖析C語言關鍵字 -- <<C語言深度解剖>>
    C總結與剖析:關鍵字篇 -- <<C語言深度解剖>> 目錄C總結與剖析:關鍵字篇 -- <<C語言深度解剖>>程式的本質:二進位文件變數1.變數:記憶體上的某個位置開闢的空間2.變數的初始化3.為什麼要有變數4.局部變數與全局變數5.變數的大小由類型決定6.任何一個變數,記憶體賦值都是從低地址開始往高地 ...
  • 【Flink入門修煉】2-3 Flink Checkpoint 原理機制
    如果讓你來做一個有狀態流式應用的故障恢復，你會如何來做呢？ 單機和多機會遇到什麼不同的問題？ Flink Checkpoint 是做什麼用的？原理是什麼？ ...
  • C++ 多級繼承與多重繼承：代碼組織與靈活性的平衡
    C++ 多級繼承 多級繼承是一種面向對象編程（OOP）特性，允許一個類從多個基類繼承屬性和方法。它使代碼更易於組織和維護，並促進代碼重用。 多級繼承的語法 在 C++ 中，使用 : 符號來指定繼承關係。多級繼承的語法如下： class DerivedClass : public BaseClass1 ...
  • 圖文結合手把手教你創建SpringCloud項目
    前言 什麼是SpringCloud？ Spring Cloud 是一系列框架的有序集合，它利用 Spring Boot 的開發便利性簡化了分散式系統的開發，比如服務註冊、服務發現、網關、路由、鏈路追蹤等。Spring Cloud 並不是重覆造輪子，而是將市面上開發得比較好的模塊集成進去，進行封裝，從 ...
  • 類模板的常見用法
    class_template 類模板和函數模板的定義和使用類似，我們已經進行了介紹。有時，有兩個或多個類，其功能是相同的，僅僅是數據類型不同。類模板用於實現類所需數據的類型參數化 template<class NameType, class AgeType> class Person { publi ...
  • system-v IPC共用記憶體通信
    目錄system v IPC簡介共用記憶體需要用到的函數介面shmget函數--獲取對象IDshmat函數--獲得映射空間shmctl函數--釋放資源共用記憶體實現思路註意 system v IPC簡介 消息隊列、共用記憶體和信號量統稱為system v IPC(進程間通信機制)，V是羅馬數字5，是UNI ...
所有分類