工作中遇到的HTML和CSS布局和JavaScript技巧记录分享
- 左右对齐:
display:flex;
justify-content:space-between - 2.固定菜单项:
jquery:
$(window).scroll(function() {
if ($(window).scrollTop() >= 55) {//如果滑动大于55px;吸住左侧菜单栏
$(".nav").css("position", "fixed");
}else{
$(".nav").css("position", "absolute");
}
});
- jquery插件:ripples.js,水波涟漪
- text-transform: uppercase转为大写字母
5.下面介绍一下如何给一个节点添加和删除class名
添加:节点.classList.add("类名");
删除:节点.classList.remove("类名");
6.检查是否含有某个CSS类
myDiv.classList.contains('myCssClass'); //return true or false
注意:类名直接写,不可加“.”;
如若同时添加多个类名,并列写,用逗号分隔。
7.禁止选中文本:
.noselect {
-webkit-touch-callout: none; /* iOS Safari /
-webkit-user-select: none; / Chrome/Safari/Opera /
-khtml-user-select: none; / Konqueror /
-moz-user-select: none; / Firefox /
-ms-user-select: none; / Internet Explorer/Edge / user-select: none; / Non-prefixed version, currently not supported by any browser
*/ }
在 IE < 10 和Opera < 15中我们需要在需要禁止选中的元素上面添加一个属性 unselectable=“on”,
否则可能不会生效哦~不过现代浏览器如果不是非得兼容一些老的浏览器也可以不加。
8.使用 object-fit: cover;来使图片适应容器
9.文本放不下显示省略号…
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
盒子要是块元素才行
.box {
width: 100px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
效果
美国进口Culturelle康萃乐
益生菌30片儿童水果味LGG…
10:点击拨打电话:
<a href="tel:xxxx-88731088" >
11:字体间距
letter-spacing: 0.8px;
12.取消选择,取消鼠标右键事件
oncontextmenu=self.event.returnValue=false onselectstart="return false"
13.让textarea拉动不了
css: resize:none;
14.常见字体单位总结:
——常见字体单位——
1.em
移动端常用的字体尺寸单位,相当于“倍”,比如设置当前的div的字体大小为1.5em,则当前的div的字体大小为:当前div继承的字体大小*1.5。但当div进行嵌套时,em始终按当前div继承的字体大小来缩放。2.rem
r是root的意思,即相对于根节点html的font-size进行缩放,当有嵌套关系时,嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。3.vh
vh就是当前屏幕可见高度的1%,即 height:100vh == height:100%;它的好处是当元素没有内容时候,设置height:100%该元素不会被撑开,但设置height:100vh,该元素会被撑开屏幕高度一致。4.vw
viewpoint width,视窗宽度,1vw = 视窗宽度的1%。vw就是当前屏幕宽度的1%,当设置width:100%,被设置元素的宽度是按照父元素的宽度来设置,但100vw是相对于屏幕可见宽度来设置,所以会出现50vw
比50%大的情况。
15.文本框自动填写历史记录:
autocomplete="on"
<input type="text" name="q" autocomplete="on" value="" placeholder="输入搜索关键词">
16.设置图片的宽度100%高度等于宽度(就算图片不是正方形也行,只是被压缩了点,或者再加个obj-fit:cover)
/*stulus语法*/
.img{
position:relative;
width:100%;
height:0;
padding-top: 100%; /*padding-bottom都可以*/
img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
17.css 修改placeholder字体颜色字体大小
input::-webkit-input-placeholder {
/* 修改字体颜色 */
color: #fff;
/* 修改字号,默认继承input */
font-size: 12px;
/* 设置背景色 */
background: #8ac6d1;
}
18.小米盒子阴影设置
-webkit-box-shadow: 0 15px 30px rgba(0,0,0,.1);
box-shadow: 0 15px 30px rgba(0,0,0,.1);
19.自定义字体图标:
/自定义字体图标/ /1.通过@font-face定义自己的字体/ @font-face {
/2.申明自己的字体名称/
font-family: ‘wjs’;
/3.引入字体文件(约束某一段字符代码什么图案)/
src:
url(…/fonts/MiFie-Web-Font.svg) format(‘svg’),
url(…/fonts/MiFie-Web-Font.eot) format(‘embedded-opentype’),
url(…/fonts/MiFie-Web-Font.ttf) format(‘truetype’),
url(…/fonts/MiFie-Web-Font.woff) format(‘woff’); } /4.怎么使用维护性更好/ .wjs_icon{
font-family: wjs; } .wjs_icon_phone::before{
content: “\e908”; } .wjs_icon_tel::before{
content: “\e909”; }
20.左侧滑动右侧不滑动,或者相反
.left{
overflow-y: scroll;
height: 100%;
}
21.滚动条样式设置(仅支持pc端)
/* 拖拉槽宽度 */
::-webkit-scrollbar {
width: 6px;
height: 13px;
}
/* 拖动条 */
::-webkit-scrollbar-thumb {
background-color: #cfcfd2;
border-radius: 8px;
background-clip: padding-box;
min-height: 28px;
}
/* 背景槽 */
::-webkit-scrollbar-track-piece {
background: #f3f3f3;
}
pc以及移动端隐藏滚动条:思路:设置滚动条颜色为透明色
::-webkit-scrollbar {
background-color: transparent;
}
或者:??
::-webkit-scrollbar {
display: none !important;
width: 0 !important;
}