1. 盒子阴影:box-shadow: 10px 10px 10px #0a0a0a;
2.线性渐变:background: linear-gradient(to right,#59A330,#59A330, #109337,#59A330);
3.
font-family: '微软雅黑';
font-family: 'Microsoft YaHei';
font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
块元素隐藏占位visibility:hidden; ==》visibility:visible;
块元素隐藏不占位display:none; ==》display:block;
4.单行文本溢出
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
多行文本溢出
WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器。(webkit是私有属性)
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* 设置省略号在容器第四行文本后 */
-webkit-box-orient: vertical;
5. 复选框与文字对齐
<label>
<input type="checkbox">
Checkbox Label
</label>
label {
display: inline-flex; /* 将 label 元素设为内联弹性容器 */
align-items: center; /* 垂直居中对齐 */
}
/* 以下样式用于增加间距,可根据需要调整 */
label input {
margin-right: 5px; /* 在复选框右侧增加间距 */
}
使用 Flexbox 布局:
<div class="checkbox-container">
<input type="checkbox">
<span>Checkbox Label</span>
</div>
.checkbox-container {
display: flex;
align-items: center; /* 垂直居中对齐 */
}
使用表格布局:
<table>
<tr>
<td><input type="checkbox"></td>
<td>Checkbox Label</td>
</tr>
</table>
table {
border-collapse: collapse; /* 合并单元格边框 */
}
td {
vertical-align: middle; /* 垂直居中对齐 */
}
自定义复选框颜色宽高:
<label class="checkbox-label">
<input type="checkbox" class="custom-checkbox">
Checkbox Label
</label>
/* 自定义复选框样式 */
.custom-checkbox {
width: 20px; /* 修改复选框的宽度 */
height: 20px; /* 修改复选框的高度 */
}
/* 自定义复选框选中状态的样式 */
.custom-checkbox:checked {
background-color: #1abc9c; /* 修改选中状态的背景颜色 */
border-color: #1abc9c; /* 修改选中状态的边框颜色 */
}
/* 自定义复选框的边框样式 */
.custom-checkbox {
border: 2px solid #ccc; /* 设置复选框的边框 */
border-radius: 4px; /* 添加圆角效果 */
}
/* 鼠标悬停时的样式 */
.custom-checkbox:hover {
background-color: #f2f2f2; /* 设置悬停时的背景颜色 */
}
使用css自定义复选框:
<label class="custom-checkbox">
<input type="checkbox">
<span class="checkmark"></span>
Checkbox Label
</label>
/* 复选框容器 */
.custom-checkbox {
display: inline-block;
position: relative;
padding-left: 30px; /* 为了留出空间放置自定义的选择框 */
margin-bottom: 10px; /* 可以根据需要调整垂直间距 */
cursor: pointer;
font-size: 16px; /* 可根据需要调整字体大小 */
}
/* 自定义的选择框 */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px; /* 自定义选择框的高度 */
width: 20px; /* 自定义选择框的宽度 */
background-color: #eee; /* 未选中状态的背景颜色 */
border-radius: 4px; /* 添加圆角效果 */
}
/* 选中状态下的选择框 */
.custom-checkbox input:checked ~ .checkmark {
background-color: #1abc9c; /* 选中状态的背景颜色 */
}
/* 自定义的勾号 */
.checkmark:after {
content: '\2713'; /* Unicode 编码,表示勾号 */
color: white; /* 勾号的颜色 */
position: absolute;
display: none;
text-align: center;
line-height: 20px; /* 勾号的垂直居中 */
font-size: 14px; /* 勾号的大小 */
}
/* 选中状态下显示勾号 */
.custom-checkbox input:checked ~ .checkmark:after {
display: block;
}
5. 水平垂直居中
F1、父:{display:flex;}; 子:{margin:auto;};
F2、(已知子元素宽高)margin:auto + 绝对定位
父:{ position:relative;} 子:{ position:absolute;top:0;left:0; 宽:XXpx;高: XXpx;margin:auto;}
F3、已知子元素宽高
父:{ 宽:XXpx; 高:XXpx; position:relative;}
子:{ 宽:XXpx; 高:XXpx;
position: absolute;
top: 50%;
left: 50%;
margin-top: -(宽/2)px;
margin-left: -(高/2)px;
}
F4、用transform
父:{ position: relative; }
子:{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
F5、用display
父:{ display: flex; justify-content: center; align-items: center; }
F6、知道父元素宽高
父:{ height: XXpx; width: XXpx; color: white; text-align: center; display: table-cell; vertical-align: middle; }
子:{ display: inline-block; width: XXpx; background: #4bad91; }
6、css绘制三角
<无边框>
div { width:0; height:0; border-width: 0 40px 40px; border-style: solid; border-color: transparent transparent rgba(0,0,0,0.3); }
<带边框>
div { position: relative; width:0; height:0; border-width: 40px 0 40px 40px ; border-style: solid; border-color: transparent black ; } div::after { content: ""; position: absolute; top:-36px; left:-38px; border-width: 36px 0 36px 36px ; border-style: solid; border-color: transparent red ; }
7、解决不同浏览器所显示出来的字体不同
eg1:获取字体文件 (通常是.woff 或者.woff2格式的文件)
eg2、将字体文件上传到服务器上的适当目录
eg3、在css中定义@font-face规则
@font-face { font-family: "CustomFont"; src: url("path/to/font-file.woff2") format("woff2"), url("path/to/font-file.woff") format("woff"); /* 可选:定义字体的 其他属性,如 font-weight 和 font-style */ }
eg4、应用自定义字体
body { font-family: "CustomFont", Arial, sans-serif; }
在这个示例中,"CustomFont" 是您定义的字体名称。如果浏览器支持自定义字体,它将使用该字体,否则将回退到 Arial 和 sans-serif 字体族。请注意,使用 @font-face
规则时,要确保您拥有合法的字体许可,以遵守版权和授权规定。
8、icon图标的使用
加入购物车 ===》 添加至项目 ===》 下载项目中图标至本地,解压,放入到static文件夹中(带demo字样的是详细配置说明文件,不用引入)
===》 <style> 里引入下载好的样式 ===》 eg: <i class="iconfont"></i>
9. vue项目搭建 / quasar 1.0 => node.js>=10,npm>=5是必须的
node -v npm -v
npm install vue-cli -g (vue-lcli2)
npm install -g @vue/cli (vue-cli3)
yarn global add @quasar/cli # 或者 $ npm install -g @quasar/cli
yarn create quasar 或 npm init quasar
好看的外阴影 (右边框和下边框)
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
登录按钮动画效果
<button class="Log_BTN" id="login-button">登录</button>
.Log_BTN{
width: 265px;
height: 50px;
line-height: 50px;
color: #FFFFFF;
font-size: 20px;
margin: 40px auto;
display: flex;
justify-content: center; /* 水平居中 */
border: 0;
border-radius: 60px;
background-color: #3482ff;
cursor: pointer;
transition: transform 0.2s ease; /* 添加这行以设置动画效果 */
}
.Log_BTN:hover{
background-color: #F89E52;
}
.Log_BTN.shrink {
transform: scale(0.95); /* 缩小到原尺寸的0.95倍 */
}
<script>
const loginButton = document.getElementById("login-button");
loginButton.addEventListener("click", () => {
loginButton.classList.add("shrink"); // 添加缩小样式
setTimeout(() => {
loginButton.classList.remove("shrink"); // 移除缩小样式,还原按钮
}, 200); // 200毫秒后移除样式,可根据需要调整时间
});
loginButton.addEventListener("mousedown", () => {
isMouseDown = true;
loginButton.classList.add("shrink"); // 添加缩小样式
});
loginButton.addEventListener("mouseup", () => {
isMouseDown = false;
loginButton.classList.remove("shrink"); // 移除缩小样式,还原按钮
});
loginButton.addEventListener("mouseleave", () => {
if (isMouseDown) {
isMouseDown = false;
loginButton.classList.remove("shrink"); // 移除缩小样式,还原按钮
}
});
</script>