前端UI组件
cxzlp0521
这个作者很懒,什么都没留下…
展开
-
bootstrap简单的页面布局
1.布局结构(头部固定,内容分为左右结构)2.结果展示3.HTML代码<div class="logo"> logo</div><div class="container-fluid"> <div class="row main"> <div class=&quo原创 2018-09-25 19:55:56 · 7891 阅读 · 7 评论 -
伪元素妙用
1.content[String] - 使用引号包括一段字符串,将会向元素内容中添加字符串。 [attr()] – 调用当前元素的属性,可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。 [url()]– 用于引用媒体文件。2.清除浮动清除浮动的原因(子元素在父元素内使用了float后,脱离标准流,不占用位置,当父元素高度没有设置时,会影响后续元素的排版,清...原创 2019-01-25 16:45:45 · 178 阅读 · 0 评论 -
输入框自定义清除按钮
1.结果展示(需要用到bootstrap,jquery)2.HTML代码 <div class="container"> <form class="form-signin" autocomplete="off"> <h2 class="form-signin-heading text-primary tex.原创 2019-01-19 11:38:01 · 2481 阅读 · 1 评论 -
CSS3动画,开关门
无聊练习的css动画效果1.效果展示2.html代码 <div class="wrap"> <div class="door-l"> </div> <div class="door-r"> <原创 2018-12-12 20:21:54 · 856 阅读 · 0 评论 -
CSS+jQuery实现轮播图
1.效果展示2.html代码<div class="wrap"> <div class="carousel"> <!--左箭头--> <div class="arrow arrow-l">&lt;</div> <!-原创 2018-12-04 16:54:53 · 346 阅读 · 0 评论 -
bootstrap多选下拉列表
1.简单功能展示只包含了,多选与搜索功能 效果如图(蓝色为我自己设的背景颜色,不是插件颜色) 2.html代码 data-live-search="true"为设置是否可以搜索 multiple设置是否可以多选 selectpicker 为插件所需的类(必填) ...原创 2018-11-20 10:06:15 · 527 阅读 · 0 评论 -
导航栏下划线跟随效果
1.效果展示(颜色仅为了看出效果,可根据情况自行修改)2.html代码 <ul> <li class="active"> <a href="">option1</a> </li> <li> &原创 2018-11-19 16:56:51 · 2696 阅读 · 1 评论 -
修改input中placeholder的字体样式
1.代码/* 谷歌、苹果浏览器 */::-webkit-input-placeholder { color: #fff; font-size: 14px;}/*火狐浏览器 */::-moz-input-placeholder { color: #fff; font-size: 14px;}/* IE浏览器 */::-ms-input-placeholder ...原创 2018-11-21 17:28:02 · 270 阅读 · 0 评论 -
隐藏与修改滚动条样式
1.隐藏滚动条(只是隐藏滚动条,页面仍可移动)/* 谷歌、苹果浏览器 */::-webkit-scrollbar { display: none;}/* IE浏览器 */::-ms-scrollbar { display: none;}/* 火狐浏览器 */::-moz-scrollbar { display: none;}/* 欧朋浏览器 *...原创 2018-11-21 17:21:37 · 373 阅读 · 1 评论 -
CSS3动画
1.CSS3编写的动画特效,效果可以自己试试看(把想要的效果的class放到相应元素内即可)/* 快速翻转动画 */@-webkit-keyframes flipInLeft { 0% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0.5 } 60...原创 2018-11-05 19:31:03 · 296 阅读 · 0 评论 -
自定义radio和CheckBox
1.自定义CheckBox 采用label的for属性 使用伪类:checked 效果: html代码 <div> <input type="checkbox" name="d" class="check" id="check" checked> <label for="ch原创 2018-11-06 15:43:18 · 125 阅读 · 0 评论 -
jquery的表格插件dataTables的使用(一)
1.jquery—Datatable简单案列的使用 用于前端界面已写好的table,使用非常方便,引用相应的js与css文件就可以使用(此文章为jquery-datatable插件最基本的应用方式) 界面结果 2.使用步骤引入文件(采用CDN方式引入,网址https://www.staticfile.org/) //css文件<link rel="style...原创 2018-10-30 19:18:20 · 302 阅读 · 0 评论 -
点击图片,弹框居中放大显示图片
1.结果展示 2.html代码<!-- 需要放大的图片 --> <div><img src="./images/face.gif" alt="" class="pimg"></div> <!-- 图片放大后的遮罩层 --> <div id="out原创 2018-10-22 11:18:47 · 3657 阅读 · 4 评论 -
一个简单的form表单登录界面
1.表单展示2.HTML代码<body><div class="main"> <div class="title"> <span>密码登录</span> </div> <div class="title-msg"原创 2018-09-21 15:50:42 · 42186 阅读 · 13 评论 -
bootstrap页面头部用户图像下拉菜单
1.界面展示2.HTML代码<div class="logo"> <div class="container-fluid"> <div class="row"> <div class="col-lg-10" style="background: #354144;原创 2018-09-26 18:13:29 · 6840 阅读 · 4 评论 -
flex 布局
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html转载 2019-03-06 09:56:58 · 164 阅读 · 0 评论