html做笔记,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: '\ ' +

'

\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' +

'

'+

'

'