ingrun

Appearance

Return to top
本页目录

常用CSS

margin 外边距

css
margin-top: 10px
margin-left: 50%

margin: 32px 10px;
/*
margin-top: 32px;
margin-right: 10px;
margin-bottom: 32px;
margin-left: 10px;
*/
1
2
3
4
5
6
7
8
9
10

padding 内边距

css
padding-top: 10px
padding-right: 50%

padding: 32px 10px;
/*
padding-top: 15px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 10px;
*/
1
2
3
4
5
6
7
8
9
10

span 小手

css
cursor: pointer;
1

虚线边框

css
  p{
    border-bottom: 1px dashed  #ccc;
  }
1
2
3

span不换行

css
  span{
    white-space:nowrap;
  }
1
2
3

span居中

css
span{
   vertical-align:middle;
}
1
2
3

圆角边框

css
border-radius: 10px;
1

强制生效

css
margin-bottom: 15px !important;
1

文字溢出隐藏

css
#多行
div {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; //行数
    -webkit-box-orient: vertical;
}

#单行
div {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;   
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

鼠标悬停显示边框

js
$(".div").hover( 
    function () {
        $(this).addClass("hover");
    },
    function () {
        $(this).removeClass("hover");
});
1
2
3
4
5
6
7
css
#css
.hover{
    border: 1px solid;
}
1
2
3
4

ajax

js
$.ajax({
    type: "post",
    url: "/updUser",
    dataType: "json",
    data:{
        id : $("#id").text(),
        username: $("#username").val(),
        phone: $("#phone").val(),
        address: $("#address").val(),
    },
    success: function (data) {
        if (data.code == 1) {
            alert("成功")
        } else {
            alert(data.message)
        }
    },
    error: function () {
        alert("发生错误");
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

隐藏元素

html
<p hidden id="id">3</p>
1

span 文字上划线

css
span{
	text-decoration: line-through;
}
1
2
3

hover 伪类

css
// 鼠标悬浮
button:hover{
	color: red;
}
1
2
3
4

CSS border-style 属性

css
	border-style:dotted solid double dashed; 
    // 上边框是点状
    // 右边框是实线
    // 下边框是双线
    // 左边框是虚线
1
2
3
4
5

渐变色

css
background: linear-gradient(to left, white, blue);
1

边框不占用宽度

css
	box-sizing: border-box;
1

字体小于12px

css
	transform: scale(0.9);
1