簡(jiǎn)單小程序：登錄頁(yè)面（html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁(yè)面</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; //內(nèi)邊框
        }
        /*給'注冊(cè)'賦予樣式*/
        .register{
            width:280px ; //寬
            height: 50px; //高
            background-color: skyblue; //背景顏色
            border-radius: 10px; //邊框弧度

        }
        /*將所有邊框都改變*/
        *{
            border-radius: 5px; 邊框弧度
        }
        /*使用class選擇器，賦予number寬高和邊框*/
        .number{
            width: 185px; //寬
            height: 27px; //高
            border-width: 1px; //邊框?qū)挾?
        }
        /*id選擇器*/
        #two{
            width: 55px; //寬
            border-width: 1px; 邊框?qū)挾?        }
        /*id選擇器*/
        #phone{
            width: 103px; //寬
        }
        /*class 選擇器*/
        .boxs{
            zoom: 75%; //清除浮動(dòng)
            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; //定位 相對(duì)定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

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

    </form>
</div>


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

崢嶸，消防資源網(wǎng)創(chuàng)始人，消防大講堂主講人，從業(yè)消防25年，參與近千項(xiàng)目設(shè)計(jì)施工，解答消防疑問(wèn)數(shù)萬(wàn)條，極為資深的實(shí)踐經(jīng)驗(yàn)，結(jié)合深厚理論基礎(chǔ)，匯集金典，奉獻(xiàn)大家！

石崢嶸：關(guān)于規(guī)范及標(biāo)準(zhǔn)的用詞說(shuō)明，以及規(guī)范標(biāo)準(zhǔn)中黑體與非黑體條文的區(qū)別，分述如下：

一、規(guī)范及標(biāo)準(zhǔn)的用詞說(shuō)明：

目前的消防技術(shù)規(guī)范標(biāo)準(zhǔn)，用詞說(shuō)明基本一致，以下為《建筑設(shè)計(jì)防火規(guī)范》（GB50016）規(guī)范用詞說(shuō)明，可供參考：

1、為便于在執(zhí)行本規(guī)范條文時(shí)區(qū)別對(duì)待，對(duì)要求嚴(yán)格程度不同的用詞說(shuō)明如下：

1）表示很?chē)?yán)格，非這樣做不可的：

正面詞采用“必須”，反面詞采用“嚴(yán)禁”；

2）表示嚴(yán)格，在正常情況下均應(yīng)這樣做的：

正面詞采用“應(yīng)”，反面詞采用“不應(yīng)”或“不得”；

3）表示允許稍有選擇，在條件許可時(shí)首先應(yīng)這樣做的：

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

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

2、條文中指明應(yīng)按其他有關(guān)標(biāo)準(zhǔn)執(zhí)行的寫(xiě)法為“應(yīng)符合……的規(guī)定”或“應(yīng)按……執(zhí)行”。

二、規(guī)范標(biāo)準(zhǔn)中黑體條文與非黑體條文的區(qū)別：

1、規(guī)范中以黑體字標(biāo)志的條文為強(qiáng)制性條文，必須嚴(yán)格執(zhí)行。

2、實(shí)際應(yīng)用中，可參照《中華人民共和國(guó)住房和城鄉(xiāng)建設(shè)部》的相關(guān)回復(fù)執(zhí)行：

提問(wèn)者咨詢(xún)有關(guān)標(biāo)準(zhǔn)的區(qū)別和法律地位，提問(wèn)如下：“例如GB50096被你部批準(zhǔn)為強(qiáng)制性國(guó)家標(biāo)準(zhǔn)，標(biāo)準(zhǔn)中又有黑體與非黑體，請(qǐng)問(wèn)強(qiáng)制性標(biāo)準(zhǔn)中兩者的區(qū)別、兩者是否都具有約束力及違反兩者相應(yīng)的處罰區(qū)別？”

住房和城鄉(xiāng)建設(shè)部回復(fù)如下：

強(qiáng)制性標(biāo)準(zhǔn)中的黑體字為強(qiáng)條，必須嚴(yán)格執(zhí)行，如有違反即處罰；非黑體字應(yīng)當(dāng)執(zhí)行，如有違反且因此出現(xiàn)問(wèn)題或事故，則亦要受到處罰。

提問(wèn)及回復(fù)鏈接：

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

小貼士：

1、根據(jù)《中華人民共和國(guó)標(biāo)準(zhǔn)化法》第二條之規(guī)定：本法所稱(chēng)標(biāo)準(zhǔn)（含標(biāo)準(zhǔn)樣品），是指農(nóng)業(yè)、工業(yè)、服務(wù)業(yè)以及社會(huì)事業(yè)等領(lǐng)域需要統(tǒng)一的技術(shù)要求。標(biāo)準(zhǔn)包括國(guó)家標(biāo)準(zhǔn)、行業(yè)標(biāo)準(zhǔn)、地方標(biāo)準(zhǔn)和團(tuán)體標(biāo)準(zhǔn)、企業(yè)標(biāo)準(zhǔn)。國(guó)家標(biāo)準(zhǔn)分為強(qiáng)制性標(biāo)準(zhǔn)、推薦性標(biāo)準(zhǔn)，行業(yè)標(biāo)準(zhǔn)、地方標(biāo)準(zhǔn)是推薦性標(biāo)準(zhǔn)。強(qiáng)制性標(biāo)準(zhǔn)必須執(zhí)行。國(guó)家鼓勵(lì)采用推薦性標(biāo)準(zhǔn)。

2、我們國(guó)家標(biāo)準(zhǔn)代號(hào)分為GB和GB/T，國(guó)家標(biāo)準(zhǔn)的編號(hào)由國(guó)家標(biāo)準(zhǔn)的代號(hào)、國(guó)家標(biāo)準(zhǔn)發(fā)布的順序號(hào)和國(guó)家標(biāo)準(zhǔn)發(fā)布的年號(hào)（發(fā)布年份）構(gòu)成。GB代號(hào)國(guó)家標(biāo)準(zhǔn)含有強(qiáng)制性條文及推薦性條文，當(dāng)全文強(qiáng)制時(shí)不含有推薦性條文，GB/T代號(hào)國(guó)家標(biāo)準(zhǔn)為全文推薦性。

3、強(qiáng)制性條文是保障人體健康、人身、財(cái)產(chǎn)安全的標(biāo)準(zhǔn)和法律及行政法規(guī)規(guī)定強(qiáng)制執(zhí)行的國(guó)家標(biāo)準(zhǔn)；

4、推薦性國(guó)標(biāo)是指生產(chǎn)、檢驗(yàn)、使用等方面，通過(guò)經(jīng)濟(jì)手段或市場(chǎng)調(diào)節(jié)而自愿采用的國(guó)家標(biāo)準(zhǔn)。但推薦性國(guó)標(biāo)一經(jīng)接受并采用，或各方商定同意納入經(jīng)濟(jì)合同中，就成為各方必須共同遵守的技術(shù)依據(jù)，具有法律上的約束性。

注：本文所涉及的規(guī)范，請(qǐng)點(diǎn)擊左下角“了解更多”進(jìn)入消防資源網(wǎng)查詢(xún)：

↓↓↓

字是網(wǎng)頁(yè)展示的重要內(nèi)容之一，所以對(duì)文字的修飾也是CSS重點(diǎn)關(guān)注的一部分， CSS提供了以下常用的樣式屬性來(lái)修飾文字。

color 屬性

color 用來(lái)設(shè)置文字顏色。

設(shè)置方式支持以下幾種格式

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

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


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

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

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


<div class="box">文字顏色</div>
<div class="box1">簡(jiǎn)寫(xiě)形式</div>

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

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

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

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




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

font-size 屬性

font-size 屬性用來(lái)設(shè)置字體大小，單位通常為px 也可以為em,rem

單位的解釋

px：像素
em: 相對(duì)元素字體的倍數(shù)
rem：相對(duì)html字體的倍數(shù)，例如：html標(biāo)簽設(shè)置為font-size為100px ， div 設(shè)置font-size為1.5 rem 實(shí)際表現(xiàn)為：150px。

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


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

font-weight 屬性

設(shè)置字體的粗細(xì)程度，常用的屬性有 normal 和 bold 兩個(gè)值。

可以用以下值表示，也可以用數(shù)字表示。

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

<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演示：正常粗細(xì)</div>
  <div class="box_bold">font-weight演示，加粗</div>
  <div class="box_lighter">font-weight演示，更細(xì)</div>
  <div class="box_bolder">font-weight演示， 更粗</div>
  <div class="box_number">font-weight演示， 數(shù)字</div>
</body>

font-style 屬性

設(shè)置字體的傾斜程度

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

<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 屬性

設(shè)置文本的修飾線(xiàn)的樣式

示例	意義
none	無(wú)線(xiàn)(a標(biāo)簽去除下劃線(xiàn)會(huì)用到)
underline;	下劃線(xiàn)
line-through;	刪除線(xiàn)
…等等	還有很多，可自行百度

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

font-family 屬性

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

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

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

font-family 可以一次指定多個(gè)字體，后面的字體屬于后備字體，只有前面的字體沒(méi)有找到，才會(huì)使用后面的字體。

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

自定義字體

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

自定義的字體一般是隨著網(wǎng)頁(yè)發(fā)布在服務(wù)器端，操作系統(tǒng)中并沒(méi)有。

推薦一個(gè)比較好用的字體庫(kù)網(wǎng)站：https://www.iconfont.cn/（具體使用方式請(qǐng)自行百度）。

在線(xiàn)咨詢(xún)

上一篇：HTML基礎(chǔ)篇筆記
下一篇：程序猿必備的10款超炫酷HTML5 Canvas插件

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商