html+css++Bootstrap+layUI

--------------------------------------------------------HTML基础----------------------------------------------------
一、元素的定义 HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码
二、
      1、列表 

运营商列表

    
中国联通
    
中国移动
    
中国电信

      2、表格

    

        
ID
姓名
年龄
    
    

        
10
孙悟空
19
        
11
猪八戒
20
        
12
沙和尚
21
    

      3、表单

欢迎使用平台

    
用户名:
    



    
密码:
    





    

 

4、块状元素和行内元素

           （1）块状元素  Block    元素独占一行     div  h1-h6 hr p table ul li

                                                  div比较常用       
           （2）行内元素  InLine    多个元素占一行  a button  img input span

                                                  span比较常用

--------------------------------------------------------CSS基础----------------------------------------------------    
    一、CSS2
    二、CSS2.1
    三、CSS3
     1、选择器   和函数一样方便复用
          (1)  标签选择器  会给所有标签都加上 太绝对了也不常用
          (2)  类选择器  class 类选择器最常用 可以和函数一样复用

      一个元素使用多个class

    
    
  




    
1
    
2

          (3)  id选择器  id不能重复，只能针对一个标签 一般用的最少

    
    
    


标签选择器
类选择器
id选择器

2、常用样式

(1)高度 height
(2)宽度width
(3)颜色color

3、边框和边距

   (1)  边框border         属于div内部
（2）内边距 padding  字体等元素与边框的距离 属于div内部
（3）外边距 margin    与其他div的外部距离 属于div外部

    
    
  


  

    中国电信
  

    中国联通

  

3、字体样式  属性 一般font前缀  
         (1) 大小 font-size        顶线和底线之间的距离

         (2)类型 font-family 
         (3) 颜色 color
         (4) 粗细 font-weight
         (5) 倾斜 font-style

    
    
    


中国联通

     4、文本样式  属性 一般text前缀  
         (1) 水平对齐 text-align
         (2) 垂直对齐 vertical-align
         (3) 字间距  letter-spacing
         (4) 词间距  word-spacing
         (5) 段落行间距 line-height   基线之间的距离

         (6) 首行缩进 text-indent
         (7) 阴影 text-shadow
         (8) 溢出 text-overflow
         (9) 换行 word-break
     5、背景颜色与图像 属性 一般background前缀
         (1) background-image 定义背景图像
         (2) background-color 定义背景颜色 (常用)
         (3) background-origin 指定背景的显示区
         (4) background-clip 指定背景的裁剪区域
         (5) background-repeat 设置背景图像是否及如何铺排
         (6) background-size 定义背景图片的大小
         (7) background-position 设置背景图像位置
         (8) background-attachment 定义背景图像的显示方式         
--------------------------------------------------------CSS3网页排版常用属性-----------------------------------------

    
三、CSS浮动布局  
       1、属性 float   据说float属性已经被w3c规范废弃了，不建议使用
四、定位布局
      1、属性  position
五、多列布局
      1、属性  
六、弹性盒布局 
      1、 属性  display  定义一个盒子在其他盒子的分布方式  优点 自适应流量其窗口 自适应字体大小
      2、 属性值 
             box   inline-box   2009版本
             flexbox  inline-flexbox  2011版本
             flex   inline-flex  2012版本
七、静态布局      适合一种设备固定尺寸
八、自适应布局  适合一种设备多种不同尺寸
九、响应式布局  适应多种设备多种尺寸
十、自适应布局+响应式布局 bootstarp搞定

--------------------------------------------------------bootstrap---------------------------------------------------

一、bootstrap由html css JavaScript 组成的响应式前端框架

1、布局容器和栅格系统

（1） container  

container 类和container-fluid类的区别体现在是否有随视口宽度改变的margin存在。
container类所谓的自适应也是通过margin的改变来完成

  
左边
  
右边

 

（2）container-fluid

             container-fluid类的百分百宽度是指在固有的15px的padding前提下宽度总是当前视口的宽度。

  
左边
  
右边

  

 

  (3) 栅格系统   先定义一个容器，然后每行12列，可以选择每行占几列

          

（4）列偏移

    
    
  




    
1
    
2

2、bootstrap基本样式   

     引用bootstrap

     bootstrap 对基本样式进行了覆盖（对于懒人来说可以不用写样式了，好看的样式直接调用，         同时也提高了开发效率）bootstrap优化后的效果要比原生的好看很多。

    (1)  标题效果h1~h6 

    (2) 段落效果  p

    (3)强调效果

    (4)对齐效果  左对齐 右对齐 中间对齐 两端对齐

    (5)列表  去点列表 内联列表 定义列表

    (6)代码   单行代码 多行代码 快捷键

    (7)表格

    (8)表单  前后台数据交互 文本框text(四个角更加圆润)、文本域、下拉框、单选框、复选框、按钮等

 （9）缩略图

（10）面板

4、CSS组件 bootstrap3由Less写的、bootstrap4由Sass写

 （1）导航

 （2）分页导航

 （3）下拉菜单（不加js默认只有样式不能动作）

5、JavaScript插件 JavaScript插件基于jQuery

调用写在css样式调用之后

  （1）下拉菜单（加上js才有下拉动作）

  （2）模态框 （加上js才有弹出动作，相当一个功能很多的弹出对话框）

--------------------------------------------------------LayUI----------------------------------------------------------------

1、栅格系统 分成12列和bootstrap非常像