网页前端开发（基础进阶1--盒子模型）

颜色表示方法3种：

1.关键字：

color：green； gray red yellow

2.rgb表示法：红，绿，蓝三原色。rgb（r，g，b），r表示红色，g表示绿色，b表示蓝色。

color: rgb(87, 107, 149);

3.rgba表示法：是rgb表示法的进阶，rgb（r，g，b，a），r表示红色，g表示绿色，b表示蓝色，a表示透明度。（0表示完全透明，1表示完全不透明）

color: rgba(87, 107, 149,0.5);

4.十六进制表示法：rgb（r，g，b）的r范围在0--256之内。可以使用十六进制表示，范围00--ff。

color: ”#ff0000“;

文字处理         

表示一个段落

        

                文本加粗
                ***网消息

                ***网消息

                文本加下划线

                ***网消息

                ***网消息

                文本倾斜

                ***网消息

                ***网消息

                文本加删除线

                ***网消息

                ***网消息

        

文本加粗可使用或者标签。

文本加下划线可使用或者标签。

文本倾斜可使用或者标签。

文本加删除线可使用或者标签。

空格可使用  ；

< 可使用 <；

> 可使用 gt；

设置行高

对于段落，设置2倍行高。

首行缩进

对于段落，首行缩进。

或直接使用 表示空格

          ***网消息        //缩进两个空格

盒子模型

        盒子：页面内所有元素（标签）都可以看作一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角，可以更方便的进行页面布局。

        盒子模型的组成：内容区域（content），内边距区域(padding)，边框区域(border)，外边距区域(margin)。

常用的2种标签：

1.div标签

一行只显示一个div标签（独占一行）

宽度默认为父元素的宽度，高度默认撑开

可以设置宽高（width，height）

2.span标签

一行可以显示多个span标签

宽度和高度默认由内容撑开

不可以设置宽高（width，height）

盒子模型通常使用div标签包裹整个内容，统一调节其宽高以及各种边距。

示例代码

  
  
  
  



  

     
tlias 智能学习辅助系统
      退出登录
  

  

    姓名：
    

    性别：
    
      
      男
      女
    

    职位：
    
      
      班主任
      讲师
      学工主管
      教研主管
      咨询师
    

    查询
    清空
  

  

    
    

      
      

        
姓名
        
性别
        
头像
        
职位
        
入职日期
        
最后操作时间
        
操作
      
    
      
    

      

        
张三
        
男
        

        
班主任
        
2020-01-01
        
2025-01-01
        

          修改
          删除
        
      

      

        
李四
        
女
        

        
讲师
        
2020-01-01
        
2025-01-01
        

          修改
          删除
        
      

      

        
王五
        
男
        

        
班主任
        
2020-01-01
        
2025-01-01
        

          修改
          删除
        
      
    
  
  
   

        
cyy有限公司
        
版权，时间2025.5.9
      

运行结果：