关于前端页面常用细节这件事

啾啾哼
212 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

导语

细节决定成败，高度还原设计图

字符串截取到小数点后几位的值 不四舍五入

查资料看方法就是这么写的 但是无效 我EMO了

var zdx = 127.1234567890;
var zdX = zdx.substring(0, zdx.indexOf(".") + 7);

突然想到了截取的得是字符串，所以就在前面加上转成字符串

var zdx = 127.1234567890;
zdx = String(zdx);
var zdX = zdx.substring(0, zdx.indexOf(".") + 7);

试了试 成功了 噢耶

背景图片铺满全屏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				background: url("img/denglu/bg.png") no-repeat center center;
				background-size: cover;
				background-attachment: fixed;
				background-color: #CCCCCC;
			}
		</style>
	</head>
	<body>

	</body>
</html>

字间距

letter-spacing: 4px;

字体渐变

background-image:-webkit-linear-gradient(bottom,#0177E4,#00B8FF); -webkit-background-clip:text; -webkit-text-fill-color:transparent;

css鼠标小手样式

cursor: pointer;

边框阴影

box-shadow: 10px 10px 10px #ABB4BD;

input边框样式

input[type="checkbox"] {
        width: 16px;
        height: 16px;
        border: 1px solid #999;
        background-color: #fff;
        line-height: 16px;
        border-radius: 2px;
        color: #fff;
        text-align: center;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        -o-appearance: none;
}

input[type="checkbox"]:checked {
        color: #333;
}

input[type="checkbox"]:after {
        content: "✔";
}

边框圆角

/*角度5px*/
border-radius: 5px;

CSS水平垂直居中

1.知道宽度情况下

<div class="box">
    <div class="content">
    </div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    position: relative;
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
}

2.不知道宽度

<div class="box">
    <div class="content">
    </div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    position: relative;
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);//重点
}

3.使用flex

<div class="box">
    <div class="content">
    </div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    display: flex;//flex布局
    justify-content: center;//水平居中
    align-items: center;//垂直居中
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
}

4.使用table-cell

<div class="box">
    <div class="content">
        <div class="inner">
        </div>
    </div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    display: table;
}
.content {
    background-color: #F00;
    display: table-cell;
    vertical-align: middle;//垂直居中
    text-align: center;//水平居中
}
.inner {
    background-color: #000;
    display: inline-block;
    width: 20%;
    height: 20%;
}

每天进步一点点，加油！奥利给！！

avatar
文章
阅读
粉丝