簡單小程序：登錄頁面（html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁面</title>
    /*總體的樣式*/
    <style>
    	/*盒子樣式*/
        #box{
            width: 350px; //寬
            height: 450px; //高
            border: 1px solid black; //邊框
            border-radius: 10px; //邊框弧度
            font-family: 黑體; //字體
            letter-spacing:8px; //段間距
            word-spacing: 10px; //字間距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //內邊框
        }
        /*給'注冊'賦予樣式*/
        .register{
            width:280px ; //寬
            height: 50px; //高
            background-color: skyblue; //背景顏色
            border-radius: 10px; //邊框弧度

        }
        /*將所有邊框都改變*/
        *{
            border-radius: 5px; 邊框弧度
        }
        /*使用class選擇器，賦予number寬高和邊框*/
        .number{
            width: 185px; //寬
            height: 27px; //高
            border-width: 1px; //邊框寬度

        }
        /*id選擇器*/
        #two{
            width: 55px; //寬
            border-width: 1px; 邊框寬度
        }
        /*id選擇器*/
        #phone{
            width: 103px; //寬
        }
        /*class 選擇器*/
        .boxs{
            zoom: 75%; //清除浮動
            color: darkgray; //顏色
        }
        /*class選擇器*/
        .box_a{
            width: 50px; //寬
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景圖片
            background-repeat: no-repeat; // 是否平鋪
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相對定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>請注冊</h1>
<p style="color: darkgray">已有帳號?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
    <label for="name">用戶名</label>
    <input type="text" placeholder="請輸入用戶名" id="name" class="number"> <br>
    <label for="phone">手機號</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="請輸入手機號" id="phone" class="number"> <br>
    <label for="mima">密?碼</label>
    <input type="password" placeholder="請輸入密碼" id="mima" class="number"> <br>
    <label for="mima">驗證碼</label>
    <input type="password" placeholder="請輸入驗證碼" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">閱讀并接受協議<br>
    </div>
    <input type="submit" value="注冊" class="register" >

    </form>
</div>


</body>
</html>
在這里插入圖片描述

崢嶸，消防資源網創始人，消防大講堂主講人，從業消防25年，參與近千項目設計施工，解答消防疑問數萬條，極為資深的實踐經驗，結合深厚理論基礎，匯集金典，奉獻大家！

石崢嶸：關于規范及標準的用詞說明，以及規范標準中黑體與非黑體條文的區別，分述如下：

一、規范及標準的用詞說明：

目前的消防技術規范標準，用詞說明基本一致，以下為《建筑設計防火規范》（GB50016）規范用詞說明，可供參考：

1、為便于在執行本規范條文時區別對待，對要求嚴格程度不同的用詞說明如下：

1）表示很嚴格，非這樣做不可的：

正面詞采用“必須”，反面詞采用“嚴禁”；

2）表示嚴格，在正常情況下均應這樣做的：

正面詞采用“應”，反面詞采用“不應”或“不得”；

3）表示允許稍有選擇，在條件許可時首先應這樣做的：

正面詞采用“宜”，反面詞采用“不宜”；

4）表示有選擇，在一定條件下可以這樣做的，采用“可”。

2、條文中指明應按其他有關標準執行的寫法為“應符合……的規定”或“應按……執行”。

二、規范標準中黑體條文與非黑體條文的區別：

1、規范中以黑體字標志的條文為強制性條文，必須嚴格執行。

2、實際應用中，可參照《中華人民共和國住房和城鄉建設部》的相關回復執行：

提問者咨詢有關標準的區別和法律地位，提問如下：“例如GB50096被你部批準為強制性國家標準，標準中又有黑體與非黑體，請問強制性標準中兩者的區別、兩者是否都具有約束力及違反兩者相應的處罰區別？”

住房和城鄉建設部回復如下：

強制性標準中的黑體字為強條，必須嚴格執行，如有違反即處罰；非黑體字應當執行，如有違反且因此出現問題或事故，則亦要受到處罰。

提問及回復鏈接：

http://www.mohurd.gov.cn/gzly/zwzxhf/201603/t20160310_226872.html

小貼士：

1、根據《中華人民共和國標準化法》第二條之規定：本法所稱標準（含標準樣品），是指農業、工業、服務業以及社會事業等領域需要統一的技術要求。標準包括國家標準、行業標準、地方標準和團體標準、企業標準。國家標準分為強制性標準、推薦性標準，行業標準、地方標準是推薦性標準。強制性標準必須執行。國家鼓勵采用推薦性標準。

2、我們國家標準代號分為GB和GB/T，國家標準的編號由國家標準的代號、國家標準發布的順序號和國家標準發布的年號（發布年份）構成。GB代號國家標準含有強制性條文及推薦性條文，當全文強制時不含有推薦性條文，GB/T代號國家標準為全文推薦性。

3、強制性條文是保障人體健康、人身、財產安全的標準和法律及行政法規規定強制執行的國家標準；

4、推薦性國標是指生產、檢驗、使用等方面，通過經濟手段或市場調節而自愿采用的國家標準。但推薦性國標一經接受并采用，或各方商定同意納入經濟合同中，就成為各方必須共同遵守的技術依據，具有法律上的約束性。

注：本文所涉及的規范，請點擊左下角“了解更多”進入消防資源網查詢：

↓↓↓

字是網頁展示的重要內容之一，所以對文字的修飾也是CSS重點關注的一部分， CSS提供了以下常用的樣式屬性來修飾文字。

color 屬性

color 用來設置文字顏色。

設置方式支持以下幾種格式

英語顏色單詞形式，如: red（紅）、black（黑）、orange（橙色）等。

<style>
  .box {
    color: red;
  }
</style>


<div class="box">文字顏色</div>

十六進制表示法，設計軟件中通用的表示方法。
例如：ff00000; ff 即為十進制255；每種顏色分為 0~255的數字。
如果表示顏色值重復例如：#ffaabb 可以簡寫為#fab.。
黑色為 #000 ，白色為 #fff。
以#ff0000為例，兩兩分組，分別表示三原色：紅、綠、藍。

<style>
  .box {
    color: #ff0000;
  }
  .box1 {
    color: #f00;
  }
</style>


<div class="box">文字顏色</div>
<div class="box1">簡寫形式</div>

RGB 表示法
例如: color: rgb(255,0,0); rgb 內部的三個值，依次代表三原色紅、綠、藍。
其中 rgb(0,0,0) 代表黑色， rgb(255,255,255) 表示白色。

<style>
  .box {
    color: rgb(255, 0, 0);
  }
</style>
<div class="box">文字顏色</div>

RGBA 表示法，在RGB的表示方法的基礎上增加了透明度（最后一個參數代表透明度）。0-表示透明 1-表示實心。透明度是介于[0,1]之間的值。
RGBA 從 IE9開始兼容。

<style>
.box {
  color: rgba(255, 0, 0, 0.5);
}
</style>




<div class="box">文字顏色</div>

font-size 屬性

font-size 屬性用來設置字體大小，單位通常為px 也可以為em,rem

單位的解釋

px：像素
em: 相對元素字體的倍數
rem：相對html字體的倍數，例如：html標簽設置為font-size為100px ， div 設置font-size為1.5 rem 實際表現為：150px。

<style>
  .box {
    font-size: 30px;
  }
</style>


<div class="box">文字大小</div>

font-weight 屬性

設置字體的粗細程度，常用的屬性有 normal 和 bold 兩個值。

可以用以下值表示，也可以用數字表示。

值	意義
normal	正常粗細，和400值相等
bold	加粗，與700數值相等
lighter	比正常粗細還細，不常用
bolder	比加粗還粗，不常用
100 200 300 400 500 600 700 800 900	使用數字定義字體粗細
inherit	從父元素繼承字體粗細

<style>
.box_normal {
  font-weight: normal;
}
.box_bold {
  font-weight: bold;
}


.box_lighter {
  font-weight: lighter;
}


.box_bolder {
  font-weight: bolder;
}


.box_number {
  font-weight: 600;
}
</style>


<body>
  <div class="box_normal">font-weight演示：正常粗細</div>
  <div class="box_bold">font-weight演示，加粗</div>
  <div class="box_lighter">font-weight演示，更細</div>
  <div class="box_bolder">font-weight演示， 更粗</div>
  <div class="box_number">font-weight演示， 數字</div>
</body>

font-style 屬性

設置字體的傾斜程度

值	意義
normal	正常字體，不帶傾斜效果
italic	傾斜字體（常用，使用傾斜字體）
oblique	傾斜字體（用常規字體模擬傾斜，不常用）

<style>
  .box1 {
    font-style: normal;
  }
  .box2 {
    font-style: italic;
  }
  .box3 {
    font-style: oblique;
  }
</style>
<body>
  <div class="box1">正常字體</div>
  <div class="box2">傾斜字體</div>
  <div class="box3">傾斜字體2</div>
</body>

text-decoration 屬性

設置文本的修飾線的樣式

示例	意義
none	無線(a標簽去除下劃線會用到)
underline;	下劃線
line-through;	刪除線
…等等	還有很多，可自行百度

<style>
  .decoration-none {
    text-decoration: none;
  }
  .decoration-underline {
    text-decoration: underline;
  }
  .decoration-line-through {
    text-decoration: line-through;
  }
</style>
<body>
  <div class="decoration-none">無線修飾</div>
  <div class="decoration-underline">下劃線</div>
  <div class="decoration-line-through">刪除線</div>
</body>

font-family 屬性

指定使用的字體族，操作系統一般自帶很多字體；

例如：window操作系統中的 ‘微軟雅黑’ ，黑體等。

字體文件的格式有很多，比如 eot,woff2,woff,ttf,svg等。

font-family 可以一次指定多個字體，后面的字體屬于后備字體，只有前面的字體沒有找到，才會使用后面的字體。

<style>
  div {
      font-family: serif, "Time New Roman", "微軟雅黑"
  }
</style>
<body>
  <div>字體</div>
</body>

自定義字體

某些時候，我們的字體比較個性化，或者我們的字體是一個圖標字體（一種用符號表示圖片的方式）。那么此時，需要我們使用 @font-face 自定義字體

自定義的字體一般是隨著網頁發布在服務器端，操作系統中并沒有。

推薦一個比較好用的字體庫網站：https://www.iconfont.cn/（具體使用方式請自行百度）。

在線咨詢

上一篇：JavaScript遍歷：掌握for，forEach、for in、for of和map等方法
下一篇：淺談移動設備交互體驗之慣性滾動

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商