简单小程序：登录页面（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/（具体使用方式请自行百度）。

在线咨询

上一篇：HTML基础篇笔记
下一篇：程序猿必备的10款超炫酷HTML5 Canvas插件

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商