CSS

标签上加样式：<input type= "text" name="name" style="width:100px;heigth:20px";color:red">, element.sytle 是空的
--------------------------标签选择器,对所有标签都生效
<br>
h1的标签:<h1 style="color:green">h1的标签</h1>
h1的标签2：<h1>h1的标签2</h1>
<br>
h2的标签：<h2 id="h2" class="h2Class">h2的标签</h2>
-------------------------派生选择器
<br>
strong标签：<strong>strong标签</strong>
//li 代表列表  div 代表区域块
<div>
strong标签2：<strong>strong标签2</strong>
</div>


<div>
<ui>
strong标签3：<strong>strong标签3</strong>
</ui>
</div>
//标签选择器，所有h1的标签都用这个属性,对标签生效.高级语法，对h1 和h2 都生效
------------------------派生class选择器
<br>
<div class = "divClass">
  <span class= "spanClass">我是派生class选择器 </span>
</div>




------------------------id选择器，只对这个id生效
<br>
<span id="span">我是id选择器</span>


------------------------类选择器
<br>
<span class="myClass">我是类选择器</span>


<div class="myClass">好好学习</div>


-----------------------继承
<br>
<h3>
我是继承的样式




</h3>


-----------------------边框、文本位置
</br>
//tr  代表一行，，th代表标题 ,单元格td
<table  >


<tr><th>标题1</th><th>标题2</th></tr>
<tr><td>元格1</td><td>单元格2</td></tr>




</table>
-----------------------top、left、right、bottom
<br>
<div class ="position">左面百分之50，上面百分之20</div>
<br>
------------------------float
<div style="float:left">float1</div>            //div代表区域，会自动给换行,要把这两个div 放到一行展示，                             //需要用到float
<div style="float:left display:none">float2</div>            //需要用到float,这样他们就在一行上了，作用是把多个div合到一行，用float
<br>


------------------------外边距
<div>float3</div>
<div style="margin-left:100px; margin-top:30px;">边距</div>    //含义是 下面的div跟上面的div保持10px的距离
              //这个是相对于上面的一个标签，位置，top、left、right、bottom是相对整个页面的位置
<div style="margin:30px 0px 0px 100px;上右下左"></div>       //可以写一个 同时放四个属性顺序是 上右下左,跟上面的效果是一样的


//div 可以理解为一个小框


-----------------------内边距
<p sytle="width:300px;background-color: red; padding-top:10px;padding-left:200px;padding-bottom：20px；padding-right:10px;">这是一个指定的p标签</p>  //标签内部的边距








<style type="text/css">
// 标签选择器
h1{
color:#3c763d
}
//标签选择器高级语法，多个标签共同使用一个属性
h1，h2{
color:green;
font-size:20px;
}


input{
  background-color:#31b0d5;
}
strong {
   color:red;
   
}
//strong标签现在 div里，所以先写div，然后空格 写strong标签，这个颜色就针对strong 标签2生效了, 标签3也会生效，如果加ui，就只有标签3 会生效。 css是有执行顺序的，多个属性的话，会有一个优先级，如果在标签上加一个 颜色，就会变
//派生选择器，通过标签的层级进行选择
div ui strong{
color:#3c763d
}
div strong{
color:#3c763d
}
//两个选择器中间有个空格
.divClass .spanClass{
color :   ;


}



//id选择器，只对这id生效
#span{
   width:30px;
   height:10px;
   font-size:20px;
   padding-top:20px;
   background-color:#9c6b3c;
 
}
//class选择器,会对所有class 选择myClass 生效
.myClass{
  color: ;
  


}




h3 {
color:#3c763d;
font-size:30px;
border:1
}


h3{
background-color:#fass;
color:red;


}


//边框,用标签属性


table{
width:300px;
left:45%;
position:absolute;  //这是标签在页面的位置，要把这个位置设置成绝对了才可以。


}


//派生中间是空格
table td{
text-align:center;    //文本居中 在元素内部的位置


}
//对这三个标签都生效，派生中间是空格
table,th,td{
border:2px solid grep;
width:200px;
}


.position{
 top:50%;
 positon:absolute;   //代表绝对位置，页面从上到下 百分之50
 //left:45%;
 right:50%;         //从右边
}


</style>


form-group  点进去 是bootstrap的  右边距 左边距
form-horizontal 


7、继承
两个一样的标签,如果有多个标签样式指定到同一个元素的时候，
不同个属性会进行合并显示到指定的元素上,如果一样，就用下面的属性，由上及下执行的，




常用的属性
text-align:center;  水平对齐  
color:red; 颜色
background-color:red;背景色


margin:   边距
padding(内边距)：20px;       //两个div之间的距离 
margin(外边距)：             //两个div之间的距离
                 
border（边框）: 例子如上
display： 显示隐藏  dispaly:none , display:inline
float 浮动


position(位置):relative(相对)absolute（绝对）
position：absolute;  绝对位置
top、left、right、bottom 例子如上






1、标签选择器
2、标签选择器的高级语法
3、派生选择器
4、id选择器
5、类选择器
6、继承


标签的组成部分
layout的图，中间的位置，是指定元素填充的地方，在外面padding是内边距，border是自身自己，margin是外边距


把css文件放到static目录下， mycss，需要把引进来,写在ftl文件的最上面
<link rel="stylesheet" type ="text/css" href="/mycss/mycss.css"/>








一、css的顺序是 
1、元素上的style优先级是最高的
2、文件头上的style 
3、外部的文件style


在freemarker里写一个样式
<style type="text/css">
h1{
color:#a94442;
}
#h2{
color:red;
}


#h2{
color:#8a6d3b


}
.h2Class{
color:#3c763d;


}




</style> 
 文件里面优先级更高，高于外部的引用文件




二、样式表的元素选择器选择越精确，则其中的样式优先级越高。
元素上的style>id选择器指定的样式>类选择器指定的样式>标签选择器


三、对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高.例如 两个h2标签，下面的最后执行。




四、引用多个class的时候，越靠后优先级越高
跟id 是一样的 意思


看样式生不生效，看f12 右侧，什么样的选择器都会看到。




优先级并不是完全由上至下的


h2标签外部文件引入了样式，  id定位有一个样式  类选择器有一个样式 
应该是红色 id的指定的样式。


for是绑定id的值   ，




class 
开头的标签
class="form-group"

压缩文件 减少请求的字节大小

bootstrap 的表格 需要引入

<script type="text/javascript" src="${base}/lib/jquery/jquery-3.1.1.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="${base}/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="${base}/lib/bootstrap-table/js/bootstrap-table.js"></script>
<script src="${base}/lib/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>

下面需要引jquery 的js，
做表格需要几步，
1、引入css文件和javascript文件
2、创建一个table标签 设置一个id
3、对table标签进行js绑定，初始化
4、通过id给table增加属性


客户端分页，一次把所有数据拿到前端，前端js控制分页
服务端分页，分页去拿，多次请求，少量数据，java控制，数据库控制，一般用数据库控制

初始化一个表格的

 $('#dataTable').bootstrapTable({
                url: '/department/getDepartment',         //请求后台的URL（*）
                method: 'get',                      //请求方式（*）
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: false,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber:1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                strictSearch: false,                 //不知道干嘛的
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                height: 550,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                showToggle:false,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
               //要显示的列
                //name ,ParentName、level、desc 是和后端返回的数据一一对应的
                columns: [
                    {
                        //复选框
                        checkbox: true
                    },
                    {
                        field: 'name',
                        title: '部门名称'
                    }, {
                        field: 'ParentName',
                        title: '上级部门'
                    }, {
                        field: 'level',
                        title: '部门级别'
                    }, {
                        field: 'desc',
                        title: '描述'
                    }, ]
            });