CSS笔记
1.元素水平和垂直居中
水平居中
.example{/* 父元素的宽度是确定的 */
margin: 0 auto;
}
.example{/* 文本水平居中 */
text-align: center;
}
垂直居中(元素父级添加flex)
.example{
display: flex;
-webkit-box-align: center;
align-items: center;
}
2.文本自动换行
.example{
white-space: normal;
word-break: break-all;
word-wrap: break-word;
text-overflow: ellipsis;
}
3.隐藏浏览器滚动条
.example::-webkit-scrollbar{
display:none
/* or */
width:0;
}
4.水平旋转元素
.example{
-moz-transform:scaleX(-1);
-webkit-transform:scaleX(-1);
-o-transform:scaleX(-1);
transform:scaleX(-1);
}
5.媒体自适应css
@media screen and (min-width: 1000px) and (max-width: 1300px){
.example{
}
}
6.用css实现强制不换行,超出部分显示省略号
white-space: nowrap; /*强制一行内显示*/
overflow: hidden; /*溢出隐藏*/
text-overflow: ellipsis; /*超出的部分显示省略号*/
注:这三行代码必须同时存在,才能实现效果
JS笔记
1.Cookie操作
function setCookies(obj, limitTime) {
let data = new Date(new Date().getTime() + limitTime * 24 * 60 * 60 * 1000).toGMTString()
for (let i in obj) {
document.cookie = i + '=' + obj[i] + ';expires=' + data
}
}
setCookies({
browsertc: 1,
}, 1);
2.读取Cookie
function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
getCookie('browsertc');
1、文章版权归作者所有,未经允许请勿转载。
2、本站所有文章,如无特殊说明或标注,均为本站原创发布。任何在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们邮箱:526009505@qq.com进行处理。
3、咨询请联系QQ:526009505
2、本站所有文章,如无特殊说明或标注,均为本站原创发布。任何在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们邮箱:526009505@qq.com进行处理。
3、咨询请联系QQ:526009505
你可能也喜欢
- ♥ 定制网站建设公司哪家好?08/07
- ♥ CSS代码的优化小技巧,提高加载速度04/19
- ♥ 网站页面的常见代码标签04/23
- ♥ landing page优化10/14
- ♥ 高质量的网站到底是怎么样的?08/22
- ♥ 空格代码的书写方式,如何撰写空格的代码?08/06