CSS
文章平均质量分 70
珍妮的小罐君
越努力,越幸运!
展开
-
js之相册预览效果
最近公司没有太多的项目,自己本身也是小白一枚,这几天就自己用js实现了一些小的功能,一方面想提高自己的js功底,一方面也希望给更多的小白们可以参考一下,一些大神们如果觉得有哪些不足的可以指点迷津哦,在此多谢喽。。。。功能描述:通过点击页面中的某张图片,会以弹框形式来查看当前大图,且大图之间可以来回切换,下方也会有对应的小图可反复点击查看大图和图片描述性的内容;功能实现:原创 2017-02-17 11:10:05 · 1736 阅读 · 0 评论 -
如何设置滚动条样式?
/*****设置滚动条样式*****/::-webkit-scrollbar { width: 12px;}/* 滚动槽 */::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px;}/* 滚动条滑块 */::-webkit-scr原创 2017-05-31 10:42:45 · 655 阅读 · 0 评论 -
图片预览效果
最近公司要求做一个控台的项目,其中一个页面需要做到类似图片预览的效果,比如,点击移到某张缩略图,上方可以看到相应的大图片,刚开始想着这个不太好实现,但最终还是做出了效果: Title div.up{ width:350px; height:300px; background:原创 2017-07-03 15:39:31 · 302 阅读 · 0 评论 -
中间文字,两边横线(纯css实现的哦)
最近在做项目的时候,遇到了一个中间文字,两边横线的布局,如下图:第一种:代码如下: Title body{background: #f0f0f0} .con{position:relative;height:1.875rem;line-height: 1.875rem;margin:2.47rem auto;te原创 2017-08-18 17:09:35 · 28596 阅读 · 0 评论 -
input:-webkit-autofill
chrome表单input获取焦点时,input会有一个记录之前填写过的文本的下拉列表式的东东,当你选择其中一个时,input文本框的背景会变成黄色的(如下图),这是由于chrome会默认给input加上input:-webkit-autofill私有属性,然后对其赋予以下样式:input:-webkit-autofill, textarea:-webkit-autofill, s原创 2017-09-14 15:48:15 · 11313 阅读 · 3 评论 -
使用formData对象提交表单并上传图片
FormData 对象,可以把form中所有表单元素的name与value组成一个queryString,提交到后台。如果把表单的编码类型设置为: enctype 属性" style="font-size:14px; margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-s原创 2017-09-01 16:44:45 · 6789 阅读 · 0 评论 -
CSS实现表格表头(thead)固定,内容(tbody)滚动
前言 最近在写一个项目,然后要实现表头固定,tbody内容滚动的效果,该项目中没有使用任何插件,并且表格列数蛮多的,刚开始实现起来遇到各种问题,感觉蛮复杂的,后来找到了一种利用transform的方法实现,效果还不错,请看代码~~~~~~————代码————<!DOCTYPE html><html><head> <meta charset="...原创 2018-03-20 10:50:10 · 27011 阅读 · 18 评论 -
hash和hashchange事件
window.location.href和window.locaiton.hash(1)window.location.href 得到的是完整的URL 比如:window.location.href = ' www.baidu.com'(2)window.location.hash 得到的是锚链接 比如:window.location.hash= ' #all'(3...原创 2018-04-17 17:31:02 · 6176 阅读 · 1 评论 -
:host 和::ng-deep
:host 表示选择当前的组件。::ng-deep 可以忽略中间className的嵌套层级关系。直接找到你要修改的className。使用::host { background: #F5F5F5; overflow: hidden; padding: 24px; display: block;}.card-container ::ng...原创 2019-03-05 17:51:38 · 12387 阅读 · 1 评论 -
Fontello:图标字体的使用
官方网址:http://fontello.com/原文链接:https://github.com/fontello/fontello通常,网页设计开发中,一般都采用图片的形式来做图标,比如,手机图标,定位图标,密码图标等等,使用图片作为图标的话往往有许多不便,如改变大小,颜色等等,都需要打开软件重新作图;而Fontello就像字体一样,可以改变大小,颜色,下面就是关于Fonte翻译 2017-03-17 11:53:35 · 6371 阅读 · 0 评论 -
谈谈Flex布局
作为前端开发人员来讲,页面布局是最重要的一步,而布局的传统解决方案,大多基于盒模型,依赖 display属性 + position属性 + float属性等等。对于某些特殊布局就非常不方便,比如,垂直居中就不是那么容易的实现;W3C在2009年提出了一种新的布局方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,大多数主流浏览器已经完全支持它,看下图:原创 2017-02-10 17:44:07 · 913 阅读 · 0 评论 -
后台伸缩二级菜单
实现后台伸缩二级菜单 li{ list-style:none; } li span{ padding-left: 20px; cursor: pointer; } .open{ background: url("img/minu原创 2017-02-20 14:38:39 · 1095 阅读 · 0 评论 -
树形列表
树形列表的展开与收缩 div{float:left; height: 100px; line-height: 100px; } #d1,#d3{ background-color: #ccff00; } #d2{ cursor: pointer; background-color: #ffcc00; }原创 2017-02-21 10:21:37 · 460 阅读 · 0 评论 -
Js实现弹框
功能描述:模态框(Modal Dialogue Box)也可叫做模态对话框,或者对话框,当一个模态框被打开时,用户可以与该对话框进行交互,点击关闭按钮可关闭该模态框!功能实现:1. 页面上有一个按钮,用于打开模态框,模态框默认隐藏;2. 用户点击按钮,可打开模态框;用户点击模态框中的关闭或者点击页面其他地方可关闭该模态框原创 2017-02-16 10:22:10 · 3505 阅读 · 0 评论 -
js实现模糊匹配
功能描述:在搜索框中输入某一个字段,可以查询到相关的内容功能实现:1. 先声明变量用于保存输入框以及表格里面的内容2. 循环遍历遍历表格每一行,查找匹配项3. 判断如果输入框里面的内容跟表格中某个td的内容相似,则表格中的某行就显示,否则隐藏代码实现: <html><head> <style>...原创 2017-02-15 15:20:40 · 8921 阅读 · 1 评论 -
伪类和伪元素
伪元素:first-letter向文本的第一个字母添加特殊样式:first-line 向文本的第一行添加样式:before 在元素之前添加内容:after 在元素之后添加内容伪类:link 未被访问的链接:visited 已访问的链接:hover当鼠标悬停到元素上方时:active被激活的元素注意:上述使用时注原创 2017-03-21 14:59:33 · 363 阅读 · 0 评论 -
利用css3伪类实现评论框
一个评论框,后面的按钮有点赞或者发送评论两种状态,其中发送按钮会根据输入框中是否有字段分为可点击和不可点击两种状态。需求:输入框中没文字,没焦点,按钮为‘点赞’;输入框中没有文字,但有焦点时,按钮为灰色的‘发送’;输入框中有文字,但没有验证成功,则输入框中的文字颜色为红色;输入框中有文字且验证成功,则按钮为绿色的‘发送’;开发:1. 如果用JS实现,原创 2017-03-29 13:47:56 · 1605 阅读 · 0 评论 -
div模拟input实现输入框
因为一些原因,无意中看到了H5的全局属性contenteditable,原本不知道这个属性该用在哪里,后来发现可以用带有contenteditable属性的div而不是input或者textarea来作为输入框(div可以根据内容自动调整高度哦)。但是div它是不支持placeholder属性的。那怎么在div内容为空的时候显示一个默认文字呢? 先看下效果:看下代码(code)...原创 2017-03-30 10:09:04 · 36083 阅读 · 0 评论 -
Sass相关用法
Sass是一款CSS预处理器,它在 CSS 语法的基础上拓展了一些功能,如:增加了变量 、嵌套、混合 、导入 等功能,有助于更好地组织管理样式文件,以及更高效地开发项目。Sass 有两种语法格式:1. scss 这种格式仅在 CSS3 语法的基础上进行拓展,所有 CSS3 语法在 SCSS 中都是通用的,也支持大多数 CSS hacks 写法以及浏览器前缀写法,以及早期的 IE 滤镜写法...原创 2019-03-04 19:43:32 · 459 阅读 · 0 评论