前台CSS样式使用小结

最近做Vue前台相关的项目, 使用了一些前台CSS的知识, 作为笔记mark一下吧

1. 关于定位

**水平居中:** 文字(text-align: center;); 元素: (margin: 0px; auto)
**垂直居中:** 文字(line-height: 20px; height:20px;), 元素: (vertical-align: middle/sub;)于父元素定位: 父元素 (position: relative;) 子元素(position: absolute; left/top..)img居中显示: (height/width: 1px;position: relative;top: 50%;left: 50%;margin-top: -25px; /* 高度的一半 */margin-left: -25px; /* 宽度的一半 */)

2. 颜色

png/元素透明: (background-color: transparent;)
visibility：hidden; 则相当于完全从文档流中删除了该元素，但尺寸仍然保留。vue(v-show)/angularjs(n-show)
opacity：0; 则仅仅不可见，但仍可被浏览器发现，也就能触发各种事件
display: none; 元素被移除, 不被渲染; //在vue(v-if)/angularjs(n-if)

3. 伪元素:

背景

:before{content: "";position: absolute;top: 0px;right: 0px;width: 20px;height: 20px;background: url(/img/pic.png) no-repeat;
}

3. 优先级

强制优先: left: auto !important; /*!important*/

4. CSS 事件

屏蔽鼠标事件: pointer-events: none;
拖拽事件: draggable:false;
hover事件: li:hover{cursor: pointer;}

5. 选择器

li:last-child; &:first-child; /*less 写法: &: 当前的元素*/
li:nth-child(n+6) {display: none;} /*隐藏第5以后的元素*/
li:nth-child(3n) {display: none;} /*隐藏3的倍数的元素*/

6. 其他

鼠标样式: cursor: pointer/default;

scroll样式:

/*scroll body*/
scrollBody{overflow-y: scroll;overflow-x: visible;
}
/*定义滚动条轨道 轨道背景*/
#class::-webkit-scrollbar-track
{width: 10px;background-color: #CCC;-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
}
/*定义滚动条高宽及背景 滚动条整体部分*/
#class::-webkit-scrollbar
{width: 10px;background-color: rgba(0, 0, 0, 0.34);
}
/*定义滚动条 下移动的滑块*/
#class::-webkit-scrollbar-thumb
{background-color: #DBDBDB;border-radius: 10px;
}

列出来整体例子
Html

<div id="wrapper"><div class="scrollbar" id="style-default"><div class="force-overflow"></div></div><div class="scrollbar" id="style-1"><div class="force-overflow"></div>
</div><div class="scrollbar" id="style-2"><div class="force-overflow"></div></div><div class="scrollbar" id="style-3"><div class="force-overflow"></div></div><div class="scrollbar" id="style-4"><div class="force-overflow"></div></div><div class="scrollbar" id="style-5"><div class="force-overflow"></div></div><div class="scrollbar" id="style-6"><div class="force-overflow"></div></div><div class="scrollbar" id="style-7"><div class="force-overflow"></div></div><div class="scrollbar" id="style-8"><div class="force-overflow"></div></div><div class="scrollbar" id="style-9"><div class="force-overflow"></div></div><div class="scrollbar" id="style-10"><div class="force-overflow"></div></div><div class="scrollbar" id="style-11"><div class="force-overflow"></div></div><div class="scrollbar" id="style-13"><div class="force-overflow"></div></div><div class="scrollbar" id="style-14"><div class="force-overflow"></div></div><div class="scrollbar" id="style-15"><div class="force-overflow"></div></div>
</div>

CSS


header
{font-family: 'Lobster', cursive;text-align: center;font-size: 25px;
}#info
{font-size: 18px;color: #555;text-align: center;margin-bottom: 25px;
}a{color: #074E8C;
}.scrollbar
{margin-left: 30px;float: left;height: 300px;width: 65px;background: #F5F5F5;overflow-y: scroll;margin-bottom: 25px;
}.force-overflow
{min-height: 450px;
}#wrapper
{text-align: center;width: 500px;margin: auto;
}/**  STYLE 1*/#style-1::-webkit-scrollbar-track
{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);border-radius: 10px;background-color: #F5F5F5;
}#style-1::-webkit-scrollbar
{width: 12px;background-color: #F5F5F5;
}#style-1::-webkit-scrollbar-thumb
{border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: #555;
}/**  STYLE 2*/#style-2::-webkit-scrollbar-track
{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);border-radius: 10px;background-color: #F5F5F5;
}#style-2::-webkit-scrollbar
{width: 12px;background-color: #F5F5F5;
}#style-2::-webkit-scrollbar-thumb
{border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: #D62929;
}/**  STYLE 3*/#style-3::-webkit-scrollbar-track
{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;
}#style-3::-webkit-scrollbar
{width: 6px;background-color: #F5F5F5;
}#style-3::-webkit-scrollbar-thumb
{background-color: #000000;
}/**  STYLE 4*/#style-4::-webkit-scrollbar-track
{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;
}#style-4::-webkit-scrollbar
{width: 10px;background-color: #F5F5F5;
}#style-4::-webkit-scrollbar-thumb
{background-color: #000000;border: 2px solid #555555;
}/**  STYLE 5*/#style-5::-webkit-scrollbar-track
{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;
}#style-5::-webkit-scrollbar
{width: 10px;background-color: #F5F5F5;
}#style-5::-webkit-scrollbar-thumb
{background-color: #0ae;background-image: -webkit-gradient(linear, 0 0, 0 100%,color-stop(.5, rgba(255, 255, 255, .2)),color-stop(.5, transparent), to(transparent));
}/**  STYLE 6*/#style-6::-webkit-scrollbar-track
{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;
}#style-6::-webkit-scrollbar
{width: 10px;background-color: #F5F5F5;
}#style-6::-webkit-scrollbar-thumb
{background-color: #F90; background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .2) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%,transparent 75%,transparent)
}/**  STYLE 7*/#style-7::-webkit-scrollbar-track
{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;border-radius: 10px;
}#style-7::-webkit-scrollbar
{width: 10px;background-color: #F5F5F5;
}#style-7::-webkit-scrollbar-thumb
{border-radius: 10px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.44, rgb(122,153,217)),color-stop(0.72, rgb(73,125,189)),color-stop(0.86, rgb(28,58,148)));
}/**  STYLE 8*/#style-8::-webkit-scrollbar-track
{border: 1px solid black;background-color: #F5F5F5;
}#style-8::-webkit-scrollbar
{width: 10px;background-color: #F5F5F5;
}#style-8::-webkit-scrollbar-thumb
{background-color: #000000;
}/**  STYLE 9*/#style-9::-webkit-scrollbar-track
{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;
}#style-9::-webkit-scrollbar
{width: 10px;background-color: #F5F5F5;
}#style-9::-webkit-scrollbar-thumb
{background-color: #F90; background-image: -webkit-linear-gradient(90deg,rgba(255, 255, 255, .2) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%,transparent 75%,transparent)
}/**  STYLE 10*/#style-10::-webkit-scrollbar-track
{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;border-radius: 10px;
}#style-10::-webkit-scrollbar
{width: 10px;background-color: #F5F5F5;
}#style-10::-webkit-scrollbar-thumb
{background-color: #AAA;border-radius: 10px;background-image: -webkit-linear-gradient(90deg,rgba(0, 0, 0, .2) 25%,transparent 25%,transparent 50%,rgba(0, 0, 0, .2) 50%,rgba(0, 0, 0, .2) 75%,transparent 75%,transparent)
}/**  STYLE 11*/#style-11::-webkit-scrollbar-track
{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;border-radius: 10px;
}#style-11::-webkit-scrollbar
{width: 10px;background-color: #F5F5F5;
}#style-11::-webkit-scrollbar-thumb
{background-color: #3366FF;border-radius: 10px;background-image: -webkit-linear-gradient(0deg,rgba(255, 255, 255, 0.5) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, 0.5) 50%,rgba(255, 255, 255, 0.5) 75%,transparent 75%,transparent)
}/**  STYLE 12*/#style-12::-webkit-scrollbar-track
{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);border-radius: 10px;background-color: #444444;
}#style-12::-webkit-scrollbar
{width: 12px;background-color: #F5F5F5;
}#style-12::-webkit-scrollbar-thumb
{border-radius: 10px;background-color: #D62929;background-image: -webkit-linear-gradient(90deg,transparent,rgba(0, 0, 0, 0.4) 50%,transparent,transparent)
}/**  STYLE 13*/#style-13::-webkit-scrollbar-track
{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);border-radius: 10px;background-color: #CCCCCC;
}#style-13::-webkit-scrollbar
{width: 12px;background-color: #F5F5F5;
}#style-13::-webkit-scrollbar-thumb
{border-radius: 10px;background-color: #D62929;background-image: -webkit-linear-gradient(90deg,transparent,rgba(0, 0, 0, 0.4) 50%,transparent,transparent)
}/**  STYLE 14*/#style-14::-webkit-scrollbar-track
{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);background-color: #CCCCCC;
}#style-14::-webkit-scrollbar
{width: 10px;background-color: #F5F5F5;
}#style-14::-webkit-scrollbar-thumb
{background-color: #FFF;background-image: -webkit-linear-gradient(90deg,rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 1) 25%,transparent 100%,rgba(0, 0, 0, 1) 75%,transparent)
}/**  STYLE 15*/#style-15::-webkit-scrollbar-track
{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);background-color: #F5F5F5;border-radius: 10px;
}#style-15::-webkit-scrollbar
{width: 10px;background-color: #F5F5F5;
}#style-15::-webkit-scrollbar-thumb
{border-radius: 10px;background-color: #FFF;background-image: -webkit-gradient(linear,40% 0%,75% 84%,from(#4D9C41),to(#19911D),color-stop(.6,#54DE5D))
}/**  STYLE 16*/#style-16::-webkit-scrollbar-track
{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);background-color: #F5F5F5;border-radius: 10px;
}#style-16::-webkit-scrollbar
{width: 10px;background-color: #F5F5F5;
}#style-16::-webkit-scrollbar-thumb
{border-radius: 10px;background-color: #FFF;background-image: -webkit-linear-gradient(top,#e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);
}

JS 此处仅供预览

$(document).ready(function () {if (!$.browser.webkit) {$('.wrapper').html('<p>Sorry! Non webkit users. :(</p>');}});

预览图:

不得不提出来所谓的UCD设计者的想法, 想要的效果是这样的, 哪位有思路请告知在下, 不胜感激

咖啡色是真正可滚动的, 而且scroll 需要和上边距有20px间距, 中间滑块和滑道有4px 的间距

超过尺寸...显示:

/**方案1**/
.hiddingBox {display: -webkit-box; width: 55px;  /*最大长度*/-webkit-line-clamp: 3; /* 总共显示几行*/-webkit-box-orient: vertical; overflow: hidden;
}
/*方案2*/
text-overflow:ellipsis;

hidding{width: 55px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}

7. li 模仿表格

嵌套思路:
<div><ul><li></li></ul></div>
实现思路: 限制div尺寸, 设置ul, li (float:left;), 第一个li尺寸的大小比例决定其位置(左上colspan/rowspan)

<div class="table-div"><ul class="table-ul"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</div>

CSS

.table-div, .table-ul{padding: 0px;width: 606px; /*计算上border 6px*/
}li{float: left;border: 1px solid #BEBEBE;list-style: none;width: 200px
}li:first-child{height: 402px;width: 200px
}li:nth-child(n+2){height: 200px;
}

8. 表格固定表头(单独把thead/tbody 用

分离)

实现思路:
<div><table><thead></thead></table></div>
<div><table><tbody><tr></tr></tbod></table></div>

.table-div{width: 635px;
}
tbale{width: 100%px;
}
.table-body{width: 635px;
}/* 表格容器样式，用flex布局可保证table内容能铺满剩余空间 */
.sti-tbl-container {height : 100%;overflow : hidden;display : flex;flex-direction: column;
}
/* 设置表格的布局方式，用于宽度对齐 */
.sti-tbl-body>table, .sti-tbl-header>table {table-layout: fixed;
}
/* 设置表格内容容器，用于铺满整个剩余空间 */
.sti-tbl-container .sti-tbl-body {flex-grow : 1;overflow-y : scroll;
}

<!-- 表格容器，可用于设置整个的边框及高度 -->
<div class="table-div"><!-- 表头容器，必须留出17px的滚动条位置 --><div class="table-hader" style="padding-right:17px;"><table class="table table-bordered" style="margin-bottom: 0px;border-bottom-style: none;"><tr><th style="width : 10%;">#</th><th  style="width : 20%;">First Name</th><th  style="width : 30%;">Last Name</th><th  style="width : 50%;">Username</th></tr></table></div><!-- 表格内容容器--><div class="table-body"><table class="table table-bordered"><tbody><tr><th scope="row" style="width : 10%;">1</th><td style="width : 20%;">AAA</td><td style="width : 30%;">BBB</td><td style="width : 50%;">CCC</td></tr><tr><th scope="row" style="width : 10%;">2</th><td style="width : 20%;">DDDDD</td><td style="width : 30%;">DDDDD</td><td style="width : 50%;">DDDDD</td></tr></tbody></table></div>
</div>

9. input样式

屏蔽阴影: border:...; /*开启boder 会屏蔽阴影*/upload相关: 隐藏默认样式 (opacity: 0)用图片覆盖;onchange上传/localStorage图片回显,然后清空value$(".upSpan > input").val(''); 不会出现重复复选择同一个图片, 不会上传的现象, 特别是, 在公用上传按钮, 来会切换的情况下;

    <li class='logo_show' id="logo1"><span class="upSpan"><input type='file' @change="upload()" class="upicon" id="scanImg"></span></li>

只读:readonly="readonly"

例子:

.upfilebox {position: relative;
}
.upfilebox input {width: 100px;height: 45px;position: relative;z-index: 9;opacity: 0;
}
.upfilebox label {position: absolute;background: #008eff;border-radius: 8px;display: inline-block;color: #fff;width: 100px;height: 45px;line-height: 45px;text-align: center;top: 0px;left: 0px;
}

<div class="upfilebox"><input type="file" /><label>上传图片</label>
</div>

10. vue相关在线url

[vue-beauty](https://fe-driver.github.io/vue-beauty/%20http://lodashjs.com/docs/): vueUI
[VUE 在线](https://cn.vuejs.org/v2/guide/class-and-style.html)
[在线前端coder](https://codepen.io/pen/)(online editor)
[滚动条UI插件(scrollbar)](http://2.swiper.com.cn/demo/scrollbar/index.html)
[排序插件(sort)](http://rubaxa.github.io/Sortable/)
例子: http://www.cnblogs.com/xiangsj/p/6628003.html

前台CSS样式使用小结相关推荐

JQ修改css样式小结
1.修改标签属性 $(选择器).attr('style','属性:属性值'):// 如:$('.attr').attr('style','color:red'); 注:不过,此方法有一个不足之处.即: ...
html input type=quot;filequot;,科技常识：关于type=quot;filequot;的input框样式修改小结...
今天小编跟大家讲解下有关关于type="file"的input框样式修改小结 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关关于type="file" ...
html中基本选择器的优先级,CSS_CSS中的各种选择器与样式优先级小结，优先级：由高到低(从上到下)- phpStudy...
CSS中的各种选择器与样式优先级小结优先级:由高到低(从上到下) !important 内联(1,0,0,0) id: (0,1,0,0) 类:(0,0,1,0) 伪类/属性元素:(0,0,0,1 ...
CSS样式属性单词之Left
通常left单独在CSS中设置无效,需要在使用position属性下使用才能生效起作用.left左靠多少距离(距离左边多少)的作用. left 一.left认识与语法 left翻译:左边,左在CSS ...
ueditor 编辑器增加css样式_ueditor编辑器实现语法高亮
ueditor编辑器实现语法高亮本站前期采用的是dreamlu开源博客搭建,网站后台编辑器采用的是百度ueditor富文本编辑器.在我的迭代改进时,在编辑器上还采用了这一编辑器,不过一直以来发现后台 ...
CSS 样式书写规范,css样式书写规范
在工作当中css样式是非常重要的,但是咋样书写css样式更重要. 一.css书写规范 1.定位属性:position display float left top right bottom ...
css样式向下补白,DIVCSSpadding内补白(内边距)leftrighttopbottom_html/css_WEB-ITnose
DIV CSS padding内补白(内边距)left right top bottom语法应用案例教程 Padding是比较常用CSS样式,可以利用padding内边距设置上.下.左.右对象内容与四 ...
前端JavaScript DOM BOM 自学复盘 D1（DOM-获取DOM元素、修改HTML标签/表单/css样式属性、定时器-间歇函数）
内容概要 1. Web API 基本认知 1.1. 作用和分类 1.2. 什么是DOM 1.3. DOM作用 1.4 DOM树 1.4.1. DOM树是什么? 1.4.2. DOM 树的作用 1.5 ...
css特效文件,CSS样式特效演示文件修改版.ppt
CSS样式特效演示文件修改版第五章 CSS样式特效回顾详述getElementById( )的主要功能详述getElementsByName( )的主要功能简述制作浮动广告图片的实现思路简 ...

前台CSS样式使用小结

最近做Vue前台相关的项目, 使用了一些前台CSS的知识, 作为笔记mark一下吧

1. 关于定位

2. 颜色

3. 伪元素:

3. 优先级

4. CSS 事件

5. 选择器

6. 其他

7. li 模仿表格

8. 表格固定表头(单独把thead/tbody 用

分离)

9. input样式

10. vue相关在线url

前台CSS样式使用小结相关推荐

最新文章

热门文章

前台CSS样式使用小结

最近做Vue前台相关的项目, 使用了一些前台CSS的知识, 作为笔记mark一下吧

1. 关于定位

2. 颜色

3. 伪元素:

3. 优先级

4. CSS 事件

5. 选择器

6. 其他

7. li 模仿表格

﻿8. 表格固定表头(单独把thead/tbody 用

分离)

9. input样式

10. vue相关在线url

前台CSS样式使用小结相关推荐

最新文章

热门文章

8. 表格固定表头(单独把thead/tbody 用