html 笔记

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中，需要一个  ，其他的元素标签也是可以的

5. 如果要做一个在手机端访问的页面，为了适配各种大小尺寸的显示屏，

最好把width，height，margin，padding 等改为%，用百分比代替像素，，还有rem属性

6. 图片覆盖用 z-index 属性，属性相对越大，图片显示在上层。要用position来绝对定位。。

    

        

            

                
            
            
  //用百分号来定位
                
                
apple
            
        
    

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">    ' +
                    '
\n' +
                    '        
\n' +
                    '            用户姓名 :\n' +
                    '            
\n' +
                    '                
不能访问
\n' +
                    '            
\n' +
                    '        
\n' +
                    '        
\n' +
                    '            登录账号 :\n' +
                    '            
\n' +
                    '                
不能访问
\n' +
                    '            
\n' +
                    '        
\n' +
                    '        
\n' +
                    '            角色权限 :\n' +
                    '            
\n' +
                    '                \n' +
                    '            
\n' +
                    '        
\n' +
                    '        \n' +
                    '        
\n' +
                    '            
\n' +
                    '                
取消
\n' +
                    '                
确定
\n' +
                    '            
\n' +
                    '        
\n' +
                    '    
'+
                    '

' }); 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 = '

12.浏览器将服务器发送过来的字符串生成一个DOM对象，js修改的内容就是DOM对象

1.浏览器获得网页后需将其解析成对象
2.以后想读写网页内容只需读写对象即可
3.这套对象具有树状结构，称之为DOM树
4.树结构中的每级对象称之为节点
5.节点具有不同的分类
6.学习节点的API

13.构造器创建对象

注意构造函数首字母要大写
无论用哪种方式创建出来的对象都一样，都是Object
用第三种自定义方式创建对象较好，相对来说较为直观

三种构造函数例子，引入的layui只是样式，没接触过的可以直接忽略

上面三种不同的创建方式，都是一样的结果，如图

1.png

14.事件对象

当事件被触发时，有一些信息可以被确定下来,
如：左键或右键，点击的坐标，键盘按键等
浏览器为了方便开发者，将这些信息封装到了一个对象里，这个对象就是event，事件对象

直接定义事件
在调用函数时直接传入event，在写这个函数加参数来接收它
  --this就是事件对象

后绑定事件
触发事件时浏览器会自动给函数传入event，在写这个函数时加参数来接收它

15.事件处理机制

冒泡机制
-- 事件时由内而外传播的
-- 这种规律称之为冒泡机制

冒泡机制的作用
-- 可以简化事件的定义
-- 可以在父元素上定义一个事件，接收众多子元素的事件
-- 需要知道事件源

事件源
-- 事件发生的具体位置
-- 事件发生的源头
-- 通过事件对象可以获取事件源

    
    


    

        
        
picture
        event spread
    



通过这个例子可以很直观的看到事件由内而外传播出去

16.disabled 数据无效，不能提交到服务器

readonly：只读，但数据有效依然可以提交给服务器
disabled：不可用，数据无效，不能提交给服务器。