1. 背景图片用css是修改不了图片的尺寸的，只能修改图片中截取显示的大小
用img可以修改显示图片的尺寸
2. 如果元素显示不出来，可以试试加上 display:block; 变成块级标签
3. 修改 bootstrap 的 button 颜色，直接加上 background-color: #color; 就行了
4. 放置背景图片
.little-img{
background: url("../bundle/images/index/menu list.png");
width:25px;
height:25px;
display: block;
background-repeat: no-repeat;
margin-left: 35px;
}
而在html中，需要一个 <span class="little-img"></span> ，其他的元素标签也是可以的
5. 如果要做一个在手机端访问的页面，为了适配各种大小尺寸的显示屏，
最好把width，height，margin，padding 等改为%，用百分比代替像素，，还有rem属性
6. 图片覆盖用 z-index 属性，属性相对越大，图片显示在上层。要用position来绝对定位。。
<div style="text-align: center">
<div id="myCarousel" class="carousel slide">
<div style="z-index:1;">
<img src="user.png" width="375">
</div>
<div style="z-index: 2;position: absolute;left: 43%;top: 54%"> //用百分号来定位
<img src="head.png" width="100" height="100">
<p style="color: black;line-height: 50px">apple</p>
</div>
</div>
</div>
7. 要使得一些元素在同一行显示，加上 .row，记得，是在每一个元素上都添加上
8.绝对定位时的居中问题
注意：必须加上 left: 0; right: 0; 才行
.head_nickname{
font-size: 35rpx;
position: absolute;
bottom: 20%;
left: 0;
right: 0;
margin: auto;
}
9. css 设置鼠标为手形
.class input:hover{
cursor: pointer;
}
10.消除浮动影响：
在哪个元素上加上clear，则该元素就不受影响，它会出现在所有浮动元素的下方。
p {
clear: left; // right,both
}
11.layui 模态框
在layui中将基本的样式修改而来的，layui其中的很多样式都是动态渲染出来的，需要再次渲染，否则不会出现效果，还需要绑定事件
其中的取消按钮事件我是将叉叉的关闭符号的class绑定过去了
确定按钮自己绑定处理事件，处理完毕模拟点击关闭按钮，就OK了
layui模态框.png
$(".change-role").on('click', function () {
var that = this;
layui.use('layer', function(){
var layer = layui.layer;
layer.open({
type: 1,
area: ['600px', '360px'],
shadeClose: true, //点击遮罩关闭
content: '\<\div style="padding:20px;overflow: hidden"> ' +
'<form class="layui-form" id="change-password-form">\n' +
' <div class="layui-form-item">\n' +
' <label class="layui-form-label">用户姓名 :</label>\n' +
' <div class="layui-input-block">\n' +
' <div type="text" autocomplete="off" style="padding-top:8px;line-height:20px;padding: 9px 15px;" id="login-name">不能访问</div>\n' +
' </div>\n' +
' </div>\n' +
' <div class="layui-form-item">\n' +
' <label class="layui-form-label">登录账号 :</label>\n' +
' <div class="layui-input-block">\n' +
' <div type="text" autocomplete="off" style="padding-top:8px;line-height:20px;padding: 9px 15px;" id="login-email">不能访问</div>\n' +
' </div>\n' +
' </div>\n' +
' <div class="layui-form-item">\n' +
' <label class="layui-form-label">角色权限 :</label>\n' +
' <div class="layui-input-block" id="permission-radio">\n' +
' <input type="hidden" id="login-id" name="id" autocomplete="off" class="layui-input">\n' +
' </div>\n' +
' </div>\n' +
' \n' +
' <div class="layui-form-item" style="margin-top:80px;margin-left:270px;">\n' +
' <div class="layui-input-block">\n' +
' <div class="layui-btn layui-btn-primary layui-layer-close1 layui-layer-close" id="change-permission-cancel">取消</div>\n' +
' <div style="margin-left:90px;" class="layui-btn layui-btn-normal change-submit" >确定</div>\n' +
' </div>\n' +
' </div>\n' +
' </form>'+
'</div>'
});
var id = $(that).attr("name");
$.ajax({
url : "{:U('change')}",
data: {"id":id},
type : "POST",
success: function (result) {
if(result.message == "success"){
$("#login-name").text(result.data[0].nickname);
$("#login-email").text(result.data[0].email);
$("#login-id").val(id);
$(".layui-layer-title").text("修改角色");
$(result.all_role).each(function (one) {
var str2 = '<input type="radio" name="select_role" value="'+ result.all_role[one].id + '" title="' + result.all_role[one].name + '"';
if(result.data[0].role_id == result.all_role[one].id){
str2 += 'checked="checked">'
}else{
str2 += '>'
}
$("#permission-radio").html($("#permission-radio").html()+str2);
});
// layui的单选框是动态加载的， 需要下面一步的的渲染，要不然没有效果
layui.use('form', function(){
var form = layui.form;
form.render();
});
}else {
layer.msg("连接失败，" + result.data)
}
},
error: function (result) {
console.log(result);
}
});
// 为确定按钮绑定事件，这个函数只能定义在这个函数内部，定义在外部就算是动态绑定也不行，
$(".change-submit").click(function () {
console.log("click");
$.ajax({
type: "POST",
url: "{:U('update_permission')}",
data: $('#change-password-form').serialize(),
success: function (result) {
if(result.message == "success"){
layui.use('element', function(){
layer.msg("修改成功");
setTimeout(function(){$('#change-permission-cancel').click();window.location.reload()},800);
})
}else{
layui.use('element', function(){
layer.msg(result.data);
})
}
},
error : function() {
layui.use('element', function(){
layer.msg("不能访问！");
})
}
});
})
});
}
12.浏览器将服务器发送过来的字符串生成一个DOM对象，js修改的内容就是DOM对象
1.浏览器获得网页后需将其解析成对象
2.以后想读写网页内容只需读写对象即可
3.这套对象具有树状结构，称之为DOM树
4.树结构中的每级对象称之为节点
5.节点具有不同的分类
6.学习节点的API
13.构造器创建对象
注意构造函数首字母要大写
无论用哪种方式创建出来的对象都一样，都是Object
用第三种自定义方式创建对象较好，相对来说较为直观
三种构造函数例子，引入的layui只是样式，没接触过的可以直接忽略
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./layui/css/layui.css">
<script src="./layui/layui.js"></script>
<script>
1.采用直接量的方式创建对象
function f1() {
var student = {
"name" : "libai",
"age" : 23,
"work" : function () {
layui.use(['layer', 'form'],function () {
layer.msg("goods");
});
}
};
student['work']();
}
2.采用内置构造器创建对象
function f2() {
var teacher = new Object();
teacher.name = "王";
teacher.age = 22;
teacher.work = function () {
layui.use(['layer', 'form'],function () {
layer.msg("hello");
})
};
teacher.work();
}
3.自定义构造器创建对象
function Coder(name,age,work) {
this.name = name;
this.age = age;
this.work = work;
}
function f3() {
var coder = new Coder("libai","28",function () {
layui.use(['layer', 'form'],function () {
layer.msg("hello world");
})
});
coder.work();
}
</script>
</head>
<body>
<div class="layui-container" style="margin: 30px;text-align: center;">
<input value="button1" type="button" class="layui-btn layui-btn-normal" onclick="f1()">
<input value="button2" type="button" class="layui-btn layui-btn-normal" onclick="f2()">
<input value="button3" type="button" class="layui-btn layui-btn-normal" onclick="f3()">
</div>
</body>
</html>
上面三种不同的创建方式，都是一样的结果，如图
1.png
14.事件对象
当事件被触发时，有一些信息可以被确定下来,
如：左键或右键，点击的坐标，键盘按键等
浏览器为了方便开发者，将这些信息封装到了一个对象里，这个对象就是event，事件对象
直接定义事件
在调用函数时直接传入event，在写这个函数加参数来接收它
<input type="button" value="button" onclick="f1(this)"> --this就是事件对象
后绑定事件
触发事件时浏览器会自动给函数传入event，在写这个函数时加参数来接收它
<input type="button" value="button" id="button">
<script>
window.onload = function () {
var button = document.getElementById("button");
button.onclick = function (that) {
console.log(that); --- 也就是这个that了，
alert("you click me");
}
}
</script>
15.事件处理机制
冒泡机制
-- 事件时由内而外传播的
-- 这种规律称之为冒泡机制
冒泡机制的作用
-- 可以简化事件的定义
-- 可以在父元素上定义一个事件，接收众多子元素的事件
-- 需要知道事件源
事件源
-- 事件发生的具体位置
-- 事件发生的源头
-- 通过事件对象可以获取事件源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="text-align: center;" onclick="alert('div')">
<img onclick="alert('img')" src="./static/picture/1.jpg" width="600" style="margin-top: 20px">
<p onclick="alert('p')">picture</p>
<span onclick="alert('span')">event spread</span>
</div>
</body>
</html>
通过这个例子可以很直观的看到事件由内而外传播出去
16.disabled 数据无效，不能提交到服务器
readonly：只读，但数据有效依然可以提交给服务器
disabled：不可用，数据无效，不能提交给服务器。
