![](https://img-blog.csdnimg.cn/20190918140129601.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端
前端
多隆
这个作者很懒,什么都没留下…
展开
-
登陆界面设计
页面<!DOCTYPE html><html lang="en"> <head> <style type="text/css"> #wrapper { width:670px;height:420px;position:absolute;left:50%;margin-left:-335px;top:50%;margin-top:-2原创 2017-11-16 16:20:18 · 961 阅读 · 0 评论 -
HTML5调用百度地图API进行地理定位实例
<!DOCTYPE html> <html> <title>HTML5调用百度地图API进行地理定位实例</title> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/java原创 2017-10-24 09:29:10 · 437 阅读 · 0 评论 -
CSS自定义button
CSSbutton { width: 160px; height: 44px; border: medium none; border-radius: 2px; background: #00A3D9 none repeat scroll 0% 0%; font-size: 16px; color: #FFF; cursor: poin原创 2017-10-24 09:29:31 · 1704 阅读 · 0 评论 -
JS三级联动(一)
页面<div> <select id="level_1" class="input select" name="parent.parent.id"> <option value="">--请选择--</option> </select> <select id="level_2" class="input select" n原创 2017-10-24 09:31:24 · 452 阅读 · 0 评论 -
JS三级联动(二)
表设计 页面设计 index.jsp:<script> location.href = "<%=basePath%>index/getAcademys.do";</script>select.jsp:<div> <div> <label for="academy">学院</label> <select id="academy" nam原创 2017-10-24 09:31:37 · 194 阅读 · 0 评论 -
div中的内容-图片img垂直居中的五种方法
一、行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如:p { height:30px; line-height:30px; width:100px; overflow:hidden; }二、内边距(padding)法 和行高法很相似,它同样适合一行或几行文字垂直居中,原理就是利用padding将内容垂直居中,比如原创 2017-10-25 09:22:18 · 6797 阅读 · 0 评论 -
博客关键词的手动添加方法
HTML设计如下:<div class="form-group" style="position: relative;"> <label for="tags" class="sr-only">标签</label> <div class="form-control" style="cursor: text;height: auto;"> <span id="tagsDi原创 2017-10-25 09:23:48 · 704 阅读 · 0 评论 -
博客关键词的手动添加方法2
表设计:/*Navicat MySQL Data TransferSource Server : localhost_3306Source Server Version : 50713Source Host : localhost:3306Source Database : wikiTarget Server Type : MYSQLT原创 2017-10-25 09:24:53 · 286 阅读 · 0 评论 -
JS继承示例
image-file-visible-init.js内容如下:$(document).ready(function(){$.imageFileVisible({wrapSelector: ".upload-image-show1", fileSelector: ".upload-image-file2 .file",width: "100%",height: "100%"});});image原创 2017-10-25 09:49:08 · 189 阅读 · 0 评论 -
JS获取文章概要
编辑器内容 源码 测试脚本 测试结果原创 2017-10-26 09:02:34 · 1155 阅读 · 0 评论 -
纯css3实现栏目三等平均分配
样式*{margin:0;padding:0;font-size:12px;font-family:'Microsoft YaHei'}#nav,#nav2{display:-webkit-box;display:-moz-box;display:box;margin:auto;margin-top:30px;border:10px solid #7f8c8d}#nav{width:300px;原创 2017-10-26 09:03:35 · 5870 阅读 · 0 评论 -
圆形带图标文字按钮
CSS代码如下:.tupian { width: 60px; height: 60px; line-height: 58px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; font-size: 24px; border-width: 1原创 2017-10-26 09:03:47 · 1811 阅读 · 0 评论 -
自定义标签页
CSS代码如下:.tab-box{ border: 1px solid #e6e6e6;}.tab-box-menu { border-bottom: 1px solid #e6e6e6; height: 45px; line-height: 45px; }.tab-box-menu li{ cursor: pointer; padding-lef原创 2017-10-26 09:03:58 · 312 阅读 · 0 评论 -
JS实现吸附(adsorption)效果
当页面向下滚动到一定位置时,原来处在页面中间的导航栏,吸附在页面顶端,保持一直可见 当页面向上滚动到一定位置时,导航栏可以恢复到原始位置 代码如下:$(function() { function adsorption(){ var scrollTop=0; $(window).scroll(function () { scrollTop=docum原创 2017-10-24 09:28:45 · 3563 阅读 · 0 评论 -
使用input + label替代placeholder
HTML<div class="input-wrapper"> <input id="inputID" type="text"> <label for="inputID">请输入...</label></div>Style.input-wrapper { width: 300px;height: 42px;margin-bottom: 20px;position: rela原创 2017-10-24 09:28:13 · 1794 阅读 · 0 评论 -
MUI列表页面打开详细页面的方式
推荐使用MUI examples中list.html页面中的方式,该方式简要代码如下:mui.openWindow({ id: id, url: this.href, styles: webview_style, show: { aniShow: aniShow }, waiting: { autoShow: false //显示正在加载图标,fa原创 2017-10-23 21:17:26 · 4215 阅读 · 0 评论 -
背景透明,文字不透明
CSS<style type="text/css">.elem { width: 300px; height: 350px; position: relative;}.elem-show { width: 100%; height: 100%;}.elem-act { width: 100%; position: absolute;原创 2017-11-16 16:10:19 · 253 阅读 · 0 评论 -
自定义上传组件
CSS<style type="text/css">ul, ol, li { list-style-type: none; margin: 0; padding: 0;}</style><style type="text/css">#image-grid { width:250px; height:250px; background: #ff原创 2017-11-16 15:50:57 · 214 阅读 · 0 评论 -
四分五裂布局
CSS<style type="text/css">.ebox { width: 500px; height: 100%; display: table; border: 1px solid #DDD;}.ebox-i { position: relative; float: left; width: 50%; padding:原创 2017-11-16 15:35:08 · 224 阅读 · 0 评论 -
仿12306登录
页面<!DOCTYPE html><html> <head> <title>车票预定 | 客运服务 | 铁路客户服务中心</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equ原创 2017-11-16 11:51:05 · 1489 阅读 · 0 评论 -
颜色大全
页面<!DOCTYPE html><html> <head> <style type="text/css"> ul, ol, li { list-style-type: none; margin: 0; padding: 0; } </style>原创 2017-11-16 10:14:55 · 2714 阅读 · 0 评论 -
自定义 success, warn, danger 等提示框
页面<!DOCTYPE html><html> <head> <style type="text/css"> ul, ol, li { list-style-type: none; margin: 0; padding: 0; }原创 2017-11-16 10:06:20 · 567 阅读 · 0 评论 -
大地铆钉
示例代码<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Insert title here</title> <style> img { margin: 0px; padding: 0p原创 2017-11-15 17:53:26 · 243 阅读 · 0 评论 -
通用等分自适应上传组件
test.jsp<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%@ taglib prefix="upload" tagdir="/WEB-I原创 2017-11-15 15:19:26 · 204 阅读 · 0 评论 -
JS限制只允许数字输入
示例代码<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Insert title here</title> <script src="/js/jquery-3.1.0.min.js"></script></head><原创 2017-11-15 16:55:09 · 4702 阅读 · 0 评论 -
bootstrap-datepicker插件使用
插件下载百度搜索bootstrap-datepicker,这里不再提供相关链接示例代码<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Insert title here</title> <script src="/js/jq原创 2017-11-15 16:51:48 · 323 阅读 · 0 评论 -
jquery-confirm插件使用
插件下载百度一大堆,这里不再提供相关链接示例代码<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Insert title here</title> <script src="/js/jquery-3.1.0.min.js">原创 2017-11-15 16:42:07 · 1268 阅读 · 0 评论 -
summernote文本编辑器使用(含概要内容提取)
test.jsp<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><%@ taglib prefix="summernote" tagdir="/WEB-INF/tags" %><!DOCTYPE html><html lang="en"> <head>原创 2017-11-15 10:48:46 · 7996 阅读 · 0 评论 -
CSDN文本编辑器类型显示
CSS#editor { font-family:Consolas,'Courier New',Courier,mono,serif; background-color:rgb(231,229,220); width:687.046875px; overflow:auto; padding-top:1px; margin:18px 0px!i原创 2017-10-27 11:33:42 · 283 阅读 · 0 评论 -
ng-bind-html的作用
ng-bind-html的作用是把<p><select></p><p><option value="1">1</option></p><p><option value="2">2</option></p><p><option value="3">3</</p><p><option value="4">4<原创 2017-10-27 11:34:03 · 258 阅读 · 0 评论 -
字符串中文提取
var str = "啊aa";alter(str.replace(/[^\u4e00-\u9fa5]/gi,""));[\u4e00-\u9fa5]这个确实只匹配中文 [^\x00-\xff]这个匹配所有非ASCII的字符,如这些%!)(之类的是全角字符 匹配中文字符的正则表达式: [\u4e00-\u9fa5]匹配双字节字符(包括汉字在内):[^\x00-\xff] 评注:可以用来计算原创 2017-11-03 09:32:30 · 1661 阅读 · 0 评论 -
$ace.trustAsHtml
参见链接: http://www.cnblogs.com/leejersey/p/4579933.html http://blog.csdn.net/zcl_love_wx/article/details/51395211原创 2017-11-07 10:16:08 · 936 阅读 · 0 评论 -
$http.post提交示例
var url= 'http://localhost:8080/user/save', data={ id:100, email:'admin@admin.com' }, transFn=function(data) { return $.param(data); }, config={ headers:{'Content-Type原创 2017-11-07 10:16:22 · 5216 阅读 · 1 评论 -
$scope.$watch
参见链接: http://www.angularjs.cn/A0a6 http://yuankeqiang.lofter.com/post/8de51_1454f93原创 2017-11-07 10:16:35 · 980 阅读 · 0 评论 -
AngularJs指令中使用controller
参见链接: http://hudeyong926.iteye.com/blog/2073488 http://www.ituring.com.cn/tupubarticle/1385原创 2017-11-07 10:17:11 · 576 阅读 · 0 评论 -
Font Awesome Animation
参考链接: http://l-lin.github.io/font-awesome-animation/原创 2017-11-07 10:17:25 · 219 阅读 · 0 评论 -
jquery.page创建分页
引入jquery.page.js和jquery.page.css,两个文件的内容如下: jquery.page.js内容为:(function($){ var ms = { init:function(obj,args){ return (function(){ if (args.pageCount > 1) {原创 2017-11-07 10:18:11 · 1584 阅读 · 2 评论 -
textAngular 文本编辑器的用法
参见链接 https://github.com/textAngular/textAngular原创 2017-11-07 10:18:23 · 2567 阅读 · 0 评论 -
仿大前端www.daqianduan.com列表
CSS<style><!--.item { border: 1px solid #f2f2f2; z-index: 1; position: relative;}.item:not(:first-child) { margin-top: -1px;}.item:hover { z-index: 2; border: 1px solid #8原创 2017-11-13 16:11:59 · 730 阅读 · 0 评论 -
多行文本显示省略号
ellipsis.xml<?xml version="1.0"?><bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"原创 2017-11-13 15:26:46 · 173 阅读 · 0 评论