1.点击显示日期插件(导入WdatePicker.js)：
onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" value="${startdate}"
2.批量删除
js:
//全选 function checkDelAll(){ var all = document.getElementById('allDel'); var one = document.getElementsByName('checkDelName'); for(var i=0;i<one.length;i++){ one[i].checked = all.checked; } } //批量删除 function delBatch(){ var number = ""; $("input:checkbox[name=checkDelName]:checked").each(function(k){ if(k == 0){ number = $(this).val(); }else{ number += ","+$(this).val(); } }); if(isEmpty(number)){ alert("请至少选择一行数据！"); return ; } var qr = confirm("您确定要这些数据吗？"); if(!qr){ return ; } var url = basePath+"/admin/personalManagementUser/delMany"; $.post(url,{"ids":number},callback); }
Controller:
@RequestMapping("delMany")
@ResponseBody
public Map<String, Object> delMany() {
String ids = request.getParameter("ids"); // id字符串 "1,2,3..."
Map<String, Object> map = new HashMap<>();
if (StringUtil.isEmpty(ids)) {
map.put(Result_Constant.RESULT, Result_Constant.FAIL);
map.put(Result_Constant.MSG, "删除失败");
} else {
String[] idss = ids.split(","); // 分割
for (String id : idss) {
personalManagementUserService.deleteById(Long.parseLong(id)); // 循环删除
}
map.put(Result_Constant.MSG, "删除成功");
map.put(Result_Constant.RESULT, Result_Constant.SUCCESS);
}
return map;
}
StringUtil:
public static boolean isEmpty(Object str) { return str == null || "".equals(str) || String.valueOf(str).length() == 0 || String.valueOf(str).matches("\\s*"); }
3.网页点击qq加好友：
<a target="_blank"href="http://wpa.qq.com/msgrd?v=3&uin=qq号码&site=qq&menu=yes"><img style="width: auto; height: auto;" border="0" src="http://wpa.qq.com/pa?p=2:qq号码:51" alt="点击这里给我发消息" title="点击这里给我发消息" />
</a>
4.布满左右页面，鼠标上滑固定在顶的导航栏
5.输入框输入数字，按键盘enter键跳到该值页面
js:
function getEvent() { if (document.all) return window.event; func = getEvent.caller; while (func != null) { var arg0 = func.arguments[0]; if (arg0) { if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) { return arg0; } } func = func.caller; } return null; } function isUndefined(variable) { return typeof variable == 'undefined' ? true : false; } function doane(event, preventDefault, stopPropagation) { var preventDefault = isUndefined(preventDefault) ? 1 : preventDefault; var stopPropagation = isUndefined(stopPropagation) ? 1 : stopPropagation; e = event ? event : window.event; if (!e) { e = getEvent(); } if (!e) { return null; } if (preventDefault) { if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } } if (stopPropagation) { if (e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble = true; } } return e; }
html:
<input type="text" name="custompage" class="px" size="2" title="输入页码，按回车快速跳转" value="1" onkeydown="if(event.keyCode==13) {window.location='list?pageNum='+this.value;; doane(event);}">
6.鼠标悬浮显示下拉菜单：
<html> <head> <title></title> <style> .dorp { position: relative; display: inline-block; } .dorp_con { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); padding: 12px 16px; } .dorp:hover .dorp_con { display: block; } </style> </head> <body> <div class="dorp"> <span>下拉菜单！</span> <div class="dorp_con"> <p>子菜单一</p> <p>子菜单二</p> </div> </div> </body> </html>
7.返回顶部按钮
<button type="button" onclick="window.scrollTo('0','0')"> <b>返回顶部</b> </button>
8.地理定位:
<iframe frameborder=0 width="80px;" height="20px;" scrolling="no" src="https://apis.map.qq.com/tools/geolocation?key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp&effect=zoom"></iframe>
9.天气定制代码
图片,css准备：
logo2
nav
c
commom.css:
@charset "UTF-8";
*{word-wrap: break-word;}
html {-webkit-text-size-adjust: none; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,span{padding:0;margin:0;}
body{font:normal 14px/24px "Microsoft Yahei","冬青黑体简体中文 w3","宋体"; }
fieldset,img,html,body,iframe{border:0;}
table{border-collapse:collapse;border-spacing:0;}
ol,ul{list-style:none;}
address,caption,cite,code,dfn,em,strong,th,var{font-weight:normal;font-style:normal;}
caption,th{text-align:left;}
em,i,small,caption,th{font-weight:normal;font-style:normal;font-size:100%;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;font-size:100%;}
q:before,q:after{content:'';}
.clearfix{*zoom:1;}
.clearfix:after{content:"."; display:block;clear:both;visibility:hidden;line-height:0;height:0;}
a{color: #333;text-decoration: none;}
a img {border: none;}
a,button{ outline:none; border:0;}
input,select{border:1px solid #ccc;}
button::-moz-focus-inner{border:0;padding:0;margin:0;}
textarea,input,button,select{outline:0;font-size:inherit;line-height:inherit;color:inherit;font-family:inherit;}
textarea{overflow:auto;resize:none;}
.hide,.none{display: none}
.hidden{visibility: hidden;}
.show,.block{display: block;}
img{ vertical-align:middle}
input:disabled,select:disabled,textarea:disabled{background:#ccc;}
.fl{float: left;}
.fr{float: right;}
.red{color:red;}
.green{color:green;}
/*改变谷歌滚动条的样式*/
::selection{background:pink;}
::-webkit-scrollbar{width:6px;height:6px;background:#ccc;}
::-webkit-scrollbar-button{background-color:#e5e5e5;}
::-webkit-scrollbar-track{background:#999;}
::-webkit-scrollbar-track-piece{background:#ccc}
::-webkit-scrollbar-thumb{background:#666;}
::-webkit-scrollbar-corner{background:#82AFFF;}
::-webkit-scrollbar-resizer{background:#FF0BEE;}
scrollbar{-moz-appearance:none !important;background:rgb(0,255,0) !important;}
scrollbarbutton{-moz-appearance:none !important;background-color:rgb(0,0,255) !important;}
scrollbarbutton:hover{-moz-appearance:none !important;background-color:rgb(255,0,0) !important;}
/* 隐藏上下箭头 */
scrollbarbutton{display:none !important;}
/* 纵向滚动条宽度 */
scrollbar[orient="vertical"]{min-width:12px !important;}
/*
1366*768 1440*900 div---如果你是用fixed的div层的高度一定要控制在：520px以内
*/
.w180{width: 164px;}
.w200{width: 200px;}
.w240{width: 240px;}
.w248{width: 248px;}
.w260{width: 260px;}
.w360{width: 360px;}
.w375{width: 375px;}
/*自动省略号*/
.tmui-ellipsis{display:block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
/*阴影层*/
.tzui-loading-overlay,.tmui-overlay{width:100%;height:100%;background-color:#141414;position:fixed;top:0;left:0;z-index:99;filter:alpha(opacity=58);-moz-opacity:0.58;-khtml-opacity:0.58;opacity:0.58;}
*{margin: 0;padding: 0;list-style: none;}
/*
KISSY CSS Reset
理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
特色：1. 适应中文；2. 基于最新主流浏览器。
维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
*/
/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */ {
margin: 0;
padding: 0;
}
/** 设置默认字体 **/
body,
button, input, select, textarea /* for ie */ {
font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
/** 重置列表元素 **/
ul, ol { list-style: none; }
/** 重置文本格式元素 **/
a { text-decoration: none; }
a:hover { text-decoration: underline; }
/** 重置表单元素 **/
legend { color: #000; } /* for ie6 */
fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
/* 注：optgroup 无法扶正 */
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
10.顶部隐式搜索框
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>潭州学院项目实战---天猫</title> <style type="text/css"> /* 顶部搜索框start */ .search_box { height: 50px; background: hsla(0, 76%, 3%, 0.8); position: fixed; width: 100%; top: 0px; left: 0px; z-index: 101 } .search_box .bw { width: 1190px; margin: 0 auto; height: 50px; } .search_box .bw h1 { width: 190px; } .search_box .bw .sp { margin-left: 50px; margin-top: 7px; } .search_box .bw .sp input { height: 35px; width: 560px; border: 0px; color: #999; text-indent: 0.5em; } .search_box .bw .sp a.sbtn { height: 35px; width: 100px; background: #C40000; color: #fff; text-align: center; line-height: 35px; font-size: 16px; } /* 顶部搜索框end */ </style> </head> <body> <!--搜索tip框--> <div id="tz_search_box" class="search_box hide"> <div class="bw"> <h1 class="fl"> <img src="images/logo2.png" /> </h1> <p class="sp fl"> <input type="text" placeholder="请输入搜索的关键字..." class="fl"> <a class="fl sbtn">搜索</a> </p> </div> </div> </body> </html>
11.
html:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>潭州学院项目实战---天猫</title> <link type="text/css" rel="stylesheet" href="css/common.css" /> <script type="text/javascript" src="js/jquery.js"></script> <style type="text/css"> /*导航*/ .tz_nav { height: 26px; background: #111; color: #dfdfdf; font-size: 12px; } .tz_nav .tz_navbox { width: 1190px; height: 100%; margin: 0 auto; } /*导航左边*/ .tz_nav .tz_navbox .lf { width: 360px; height: 26px; } .tz_nav .tz_navbox .lr { width: 730px; height: 26px; margin-left: 100px; } .tz_nav .tz_navbox a { color: #dfdfdf; } .tz_nav .tz_navbox a .iconfont { color: #C40 } .tz_nav .tz_navbox a:hover { color: #DE0500; text-decoration: underline; } .tz_nav .tz_navbox .pr12 { padding-right: 12px; } /*.tz_nav .tz_navbox a:nth-child(1){padding-right:12px;} .tz_nav .tz_navbox span:nth-child(2){padding-right:12px;} .tz_nav .tz_navbox a:nth-child(3){padding-right:12px;} */ /*导航右边*/ .tz_nav .tz_navbox .lr li { float: left; padding: 0 8px; position: relative; } .tz_nav .tz_navbox .lr li:hover { background: #666; } /*三角形*/ .tz_nav .tz_navbox .lr .top { position: relative; left: 4px; display: inline-block; border-top: 4px solid red; border-right: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid transparent; transition: transform 0.1s linear; } .tz_nav .tz_navbox .lr li:hover .top { transform: rotate(180deg); transition: transform 0.1s linear; } /*提示框*/ .tz_nav .tz_navbox .bx { background: #666; width: 90px; position: absolute; left: 0px; top: 25px; padding: 5px 10px; display: none; } .tz_nav .tz_navbox .bx a { display: block; } .tz_nav .tz_navbox .lr li:hover .bx { display: block; } .tz_nav .tz_navbox .bxx { position: absolute; width: 1180px; height: 200px; left: auto; right: 0px; display: none; border: 1px solid #111 } .tz_nav .tz_navbox .lr li:hover .bxx { display: block; } </style> </head> <body> <!--导航--> <div class="tz_nav"> <div class="tz_navbox"> <div class="lf fl"> <a href="#" class="pr12"><i class="iconfont">󰂠</i> 天猫首页</a> <span class="pr12">喵，欢迎来天猫</span> <a href="#" class="pr12">请登录</a> <a href="#">免费注册</a> </div> <ul class="lr fr"> <li><a href="#"><i class="iconfont">㐳</i>天猫宝</a></li> <li><a href="#"><i class="iconfont">㐳</i>我的淘宝<i class="top"></i></a> <div class="bx"> <a href="#">已买到的宝贝</a> <a href="#">已卖出的宝贝</a> </div></li> <li><a href="#"><i class="iconfont">󰁒</i>我关注的品牌</a></li> <li><a href="#"><i class="iconfont">󰀿</i>购物车0件</a></li> <li><a href="#"><i class="iconfont">㐸</i>收藏夹</a></li> <li><a href="#"><i class="iconfont">㐾</i>手机版</a></li> <li><a href="#"><i class="iconfont">㐶</i>淘宝网</a></li> <li><a href="#"><i class="iconfont">󰁝</i>商家支持<i class="top"></i></a> <div class="bx"> <a href="#">已买到的宝贝</a> <a href="#">已卖出的宝贝</a> <a href="#">已卖出的宝贝</a> <a href="#">已卖出的宝贝</a> </div></li> <li><a href="#"><i class="iconfont">㐳</i>网站导航<i class="top"></i></a> <div class="bxx"> <img src="images/nav.jpg" height="201" width="1180" /> </div></li> </ul> </div> </div> </body> </html>
12.顶稍下显示搜索框：
html:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>潭州学院项目实战---天猫</title> <link type="text/css" rel="stylesheet" href="css/common.css" /> <script type="text/javascript" src="js/jquery.js"></script> <style type="text/css"> /*logo和搜索框*/ .tz_logobox { width: 1190px; height: 120px; margin: 0 auto; } .tz_logobox .logo { height: 100%; background: #fff; width: 240px; text-align: center; line-height: 120px; } .tz_logobox .search { height: 100%; width: 710px; } .tz_logobox .search p { margin-top: 36px; margin-left: 100px; background: #C40000; padding: 5px; padding-right: 0px; height: 32px; width: 560px } .tz_logobox .search input { width: 480px; height: 32px; float: left; border: 0px; outline: none; font-size: 14px; font-family: "微软雅黑"; text-indent: 0.5em; color: #999 } .tz_logobox .search .s_a { background: #C40000; width: 80px; height: 32px; display: inline-block; float: left; text-align: center; line-height: 32px; font-size: 16px; color: #fff; } .tz_logobox .search ul.re { margin-left: 100px; } .tz_logobox .search ul.re li { float: left; margin-left: 12px; } .tz_logobox .search ul.re li.mn { margin-left: 0px } .tz_logobox .search ul.re a { font-size: 12px; color: #888 } .tz_logobox .search ul.re a.selected { color: #DE0500; } .tz_logobox .search ul.re a:hover { color: #DE0500; text-decoration: underline; } .tz_logobox .search ul.re i { padding-left: 12px;; color: #888 } /*.tz_logobox .search ul li:first-child{margin-left:0px;} .tz_logobox .search ul li:nth-child(1){margin-left:0px;} */ .tz_logobox .img { height: 100%; width: 240px; text-align: center; line-height: 120px; position: relative; left: 0px; transition: all .6s ease; } .tz_logobox .img:hover { left: -8px; transition: all .6s ease; } </style> </head> <body> <!--logo区域和搜索框--> <div class="tz_logobox"> <h1 class="logo fl"> <img src="images/logo.png"> </h1> <div class="search fl"> <p> <input type="text" placeholder="请输入关键字..." /><a href="#" class="s_a">搜 索</a> </p> <ul class="re"> <li class="mn"><a href="#" class="selected">连衣裙</a><i>|</i></li> <li><a href="#">防晒霜</a><i>|</i></li> <li><a href="#">年中大促</a><i>|</i></li> <li><a href="#" class="selected">行车记录</a><i>|</i></li> <li><a href="#">热裤</a><i>|</i></li> <li><a href="#" class="selected">凉鞋</a><i>|</i></li> <li><a href="#">食用油</a><i>|</i></li> <li><a href="#">凉席</a><i>|</i></li> <li><a href="#">泳衣</a></li> </ul> </div> <div class="img fl"> <a href="#"><img src="http://img.alicdn.com/tps/i4/TB1vFvoIpXXXXXBXpXX01gBIXXX-190-80.jpg" /></a> </div> </div> </body> </html>
13.
html:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>潭州学院项目实战---天猫</title> <link type="text/css" rel="stylesheet" href="css/common.css" /> <!-- <link type="text/css" rel="stylesheet" href="css/animate.css" /> <link type="text/css" rel="stylesheet" href="css/main.css" /> <link type="text/css" rel="stylesheet" href="css/iconfont.css"/> --> <script type="text/javascript" src="js/jquery.js"></script> <style type="text/css"> /*内容*/ .tz_mainbox { margin: 20px auto; } /*channel*/ .tz_mainbox .channel { height: 30px; background: #fff; } .tz_mainbox .channel .c_name { width: 1190px; height: 100%; margin: 0 auto; } .tz_mainbox .channel .c_name li { float: left; height: 30px; text-align: center; line-height: 30px; font-weight: 600; color: #fff; padding: 0 20px; } .tz_mainbox .channel .c_name li.fst { width: 190px; background: #C40000; padding: 0px; } .tz_mainbox .channel .c_name li a:hover { color: #C40000; text-decoration: underline; } /*.tz_mainbox .channel .c_name li:first-child{width:190px;background:#C40000;padding:0px;} .tz_mainbox .channel .c_name li:nth-child(1){width:190px;background:#C40000;padding:0px;} */ /*banner*/ .tz_mainbox .banner { height: 480px; } .tz_mainbox .banner .b_box { width: 1190px; margin: 0 auto; height: 100%; position: relative; } /*左边*/ .tz_mainbox .banner .b_box .left { width: 190px; height: 100%; background: url("../images/categroy.png"); } /*分类栏*/ .tz_mainbox .banner .b_box .left li { width: 190px; height: 30px; line-height: 30px; padding-left: 0px; transition: all 0.6s ease; position: relative; z-index: 5 } .tz_mainbox .banner .b_box .left li:hover { background: #C40000; transition: all 0.6s ease; } .tz_mainbox .banner .b_box .left li .icon { overflow: hidden; border-top: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid #fff; float: right; margin-top: 10px; margin-right: 10px; display: none; } .tz_mainbox .banner .b_box .left li:hover .icon { display: inline-block; } /*.tz_mainbox .banner .b_box .left li:hover:after{content:"▶";float:right;color:#fff;padding-right:10px;} */ .tz_mainbox .banner .b_box .left .iconfont { color: #fff; text-align: right; width: 35px; margin-right: 10px; display: inline-block; font-size: 16px; } .tz_mainbox .banner .b_box .left li a { color: #fff; font-size: 12px; } .tz_mainbox .banner .b_box .left li a:hover { text-decoration: underline; } /*分类的明细*/ .tz_mainbox .banner .b_box .info { width: 400px; height: 480px; position: absolute; left: 190px; overflow: hidden; z-index: 4 } .tz_mainbox .banner .b_box .info .c_left_if { display: none; position: relative; } .tz_mainbox .banner .b_box .img { width: 810px; height: 100%; position: relative; z-index: 3 } .tz_mainbox .banner .b_box .right { width: 190px; height: 100%; background: pink; } .tz_mainbox .banner .b_box .right .c_tr { height: 240px; transition: all 0.6s ease; } .tz_mainbox .banner .b_box .right .c_tr:hover { transform: translateX(-8px); transition: all 0.6s ease; } .tz_mainbox .banner .b_box .right .c_l { border-bottom: 1px dotted #333 } </style> </head> <body> <!--内容--> <div class="tz_mainbox"> <!--导航--> <div class="channel"> <div class="c_name"> <ul> <li class="fst">商品服务分类</li> <li><a href="#">尚天猫</a></li> <li><a href="#">喵鲜生</a></li> <li><a href="#">天猫会员</a></li> <li><a href="#">电器城</a></li> <li><a href="#">天猫超市</a></li> <li><a href="#">医药馆</a></li> <li><a href="#">阿里旅行</a></li> <li><a href="#">天猫国际</a></li> </ul> </div> </div> <!--channel--> <div id="bannerwarp" class="banner" style="background: #FFDFEC"> <div class="b_box"> <!--分类--> <div class="left fl"> <ul class="ca_box fl" id="tcz_box"> <li data-color="#FFDFEC" data-img="http://img.alicdn.com/tps/i4/TB1X6h6IpXXXXXyXpXXgalVIXXX-810-480.jpg"><i class="iconfont">㑌</i><a href="#">精选市场</a><i class="icon"></i></li> <li data-color="#C861EE" data-img="http://img.alicdn.com/tps/i3/TB1E2jIGVXXXXceXXXXgalVIXXX-810-480.jpg"><i class="iconfont">㐼</i><a href="#">女装/内衣</a><i class="icon"></i></li> <li><i class="iconfont">㐽</i><a href="#">男装/运动户外</a><i class="icon"></i></li> <li><i class="iconfont">㑎</i><a href="#">女鞋/男鞋/箱包</a><i class="icon"></i></li> <li data-color="#FFDFEC" data-img="http://img.alicdn.com/tps/i4/TB1AubYIpXXXXXkaXXXgalVIXXX-810-480.jpg"><i class="iconfont">㑏</i><a href="#">化妆品/个人护理</a><i class="icon"></i></li> <li><i class="iconfont">㑌</i><a href="#">手机/数码/电脑办公</a><i class="icon"></i></li> <li><i class="iconfont">㑌</i><a href="#">母婴玩具</a><i class="icon"></i></li> <li><i class="iconfont">㑌</i><a href="#">零食/进口食品/茶酒</a><i class="icon"></i></li> <li><i class="iconfont">㑌</i><a href="#">大家电/生活电器</a><i class="icon"></i></li> <li><i class="iconfont">㑌</i><a href="#">家具建材</a><i class="icon"></i></li> <li><i class="iconfont">㑌</i><a href="#">腕表/珠宝饰品/眼镜</a><i class="icon"></i></li> <li><i class="iconfont">㑌</i><a href="#">汽车/配件/用品</a><i class="icon"></i></li> <li><i class="iconfont">㑌</i><a href="#">家纺/布艺/鲜花</a><i class="icon"></i></li> <li><i class="iconfont">㑌</i><a href="#">医药保健</a><i class="icon"></i></li> <li><i class="iconfont">㑌</i><a href="#">厨具/收纳/宠物</a><i class="icon"></i></li> <li><i class="iconfont">㑌</i><a href="#">图书音像</a><i class="icon"></i></li> </ul> <div id="info_leftbox" class="info fl"> <div class="c_left_if"> <img src="images/c.jpg"> </div> <div class="c_left_if"> <img src="images/c.jpg"> </div> <div class="c_left_if"> <img src="images/c.jpg"> </div> <div class="c_left_if"> <img src="images/c.jpg"> </div> <div class="c_left_if"> <img src="images/c.jpg"> </div> <div class="c_left_if"> <img src="images/c.jpg"> </div> <div class="c_left_if"> <img src="images/c.jpg"> </div> <div class="c_left_if"> <img src="images/c.jpg"> </div> <div class="c_left_if"> <img src="images/c.jpg"> </div> <div class="c_left_if"> <img src="images/c.jpg"> </div> <div class="c_left_if"> <img src="images/c.jpg"> </div> <div class="c_left_if"> <img src="images/c.jpg"> </div> <div class="c_left_if"> <img src="images/c.jpg"> </div> <div class="c_left_if"> <img src="images/c.jpg"> </div> <div class="c_left_if"> <img src="images/c.jpg"> </div> </div> </div> <!--banner图--> <div class="img fl"> <img id="banner_img" src="http://img.alicdn.com/tps/i4/TB1X6h6IpXXXXXyXpXXgalVIXXX-810-480.jpg"> </div> <!--广告位--> <div class="right fl"> <div class="c_tr c_l"> <img src="http://img.alicdn.com/bao/uploaded/TB14nlXIpXXXXbiXFXXwu0bFXXX.png"> </div> <div class="c_tr"> <img src="http://img.alicdn.com/bao/uploaded/TB1dui8IpXXXXX5XFXXwu0bFXXX.png"> </div> </div> </div> </div> </div> </body> </html>
14.点击按钮复制内容：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> function copyText() { var text = document.getElementById("text").innerText; var input = document.getElementById("input"); input.value = text; // 修改文本框的内容 input.select(); // 选中文本 document.execCommand("copy"); // 执行浏览器复制命令 alert("复制成功"); } </script> </head> <body> <style type="text/css"> .wrapper { position: relative; } #input { position: absolute; top: 0; left: 0; opacity: 0; z-index: -10; } </style> <div class="wrapper"> <p id="text">我把你当兄弟你却想着复制我？</p> <textarea id="input">这是幕后黑手</textarea> <button onclick="copyText()">copy</button> </div> </body> </html>
15.
<div class="tou"> <div class="nav"> <div class="tobox"> <div class="tleft"> <a href="###"><img src="${basePath}/static/images/logo.png" /> </a> <span>激浊扬清丨为P2P网贷崛起而奋斗</span> </div> <div class="tright"> <input type="text" name="" value="" placeholder="搜索内容" /> <c:choose> <c:when test="${not empty user}"> <!--登录之后显示用户图像--> <div class="denglx"> <a href="###"> <img src="${basePath}/static/images/osl.png" /> </a> <a href="${basePath}/logout"> 退出 </a> </div> </c:when> <c:otherwise> <!--未登录--> <div> <span class="denglu"> 登录 ${user.username}</span> <span class="zhuce"> 注册 </span> </div> </c:otherwise> </c:choose> </div> </div> </div> </div>
index.css:
body,html{ background: #F1F5F8; font-family: "微软雅黑"; } .centen{ margin:0 auto; width: 100%; } .tou{ background: #fff; /*height: 120px;*/ overflow: hidden; } .yiqer{ max-width: 1200px; margin:0 auto; } .nav{ max-width: 1200px; padding-top: 12px; margin: 0 auto; } .tobox{ display: flex; justify-content: space-between; } .tleft{ font-size: 12px; } .tleft img{ display: inline-block; vertical-align: bottom; margin-right: 20px; font-size: 13px; } .tright{ display: flex; align-items: center; justify-content: flex-end; flex: 1; } .tright input{ width: 30%; height: 36px; border: none; border: 1px solid #D4D4D4; border-radius: 20px; background: url(../images/sousuo.png) no-repeat; background-position: 90% center; text-indent: 23px; } .tright input::-webkit-input-placeholder{ color:#B2B2B2; } .tright input::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:#B2B2B2; } .tright input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ color:#B2B2B2; } .tright input:-ms-input-placeholder{ /* Internet Explorer 10-11 */ color:#B2B2B2; } .denglu{ color:#276BFA; border-right: 1px solid #E6E6E6; padding: 0; margin: 0; cursor:pointer; margin-left: 40px; box-sizing: border-box; } .denglx{ margin-left: 40px; box-sizing: border-box; cursor:pointer; } .denglx img{ width: 40px; height: 40px; border-radius: 100%; } .zhuce{ color: #B2B2B2; margin-left: 4px; cursor:pointer; } .navs ul{ display: flex; margin-top: 29px; } .navs ul li{ width: 12.56%; text-align: center; } .navs ul li a{ text-align: center; display: inline-block; height: 37px; text-decoration: none; color: #333333; font-size: 17px; white-space: nowrap; } .navs ul li a:hover{ border-bottom: 3px solid #2478FA; color: #2478FA; } .active{ border-bottom: 3px solid #2478FA; color: #2478FA!important; } .gGao{ display: flex; justify-content: space-between; margin-top: 17px; } .ggao1le{ width:72.9% } .ggao1ri{ width: 25.5%; } .ggao1le>a img, .ggao1ri>a img{ width: 100%; display: block; } .swep .ggao1le{ display: flex; justify-content: space-between; } .lleft{ width:46%; background: #fff; } .lright{ width: 51.6%; } .ddqy{ width: auto!important; left: 15px!important; bottom: 70px!important; } .ddqy .swiper-pagination-bullet-active{ background: #fff!important; width: 25px!important; } .ddqy .swiper-pagination-bullet{ background: #5F6779; width: 10px; height: 3px; border-radius: 0!important; } .swone .swiper-slide{ height: 270px; } .swiper-slide .item{ position: relative; } .swiper-slide .title{ position: absolute; left: 0; bottom: 0; width: 100%; line-height: 49px; padding-left: 20px; color: #fff; background: rgba(0,0,0,.4); } .swone .swiper-slide img{ width: 100%; height:270px; } .swone .swiper-button-prev{ background: transparent; top: 15%; opacity: 1; left: 84.2%; } .swone .swiper-button-prev img { width: 22px; height: 22px; } .swone .swiper-button-next img{ width: 20px; height: 20px; } .swone .swiper-button-next{ background: transparent; top: 15%; opacity: 1; } .shenqing{ background: #fff; padding: 15px 20px 0 20px; border-top: 20px solid #F1F5F8; } .shouluo{ display: flex; align-items: center; justify-content: space-between; } .slleft{ border-left: 2px solid #2F75EE; padding-left: 10px; font-size: 18px; } .slleft img{ vertical-align: -3px; margin-left: 3px; } .shouluo{ border-bottom: 1px solid #dfdfdf; padding-bottom: 10px; } .shouluo a{ color: #333; text-decoration: none; } .sright{ font-size: 12px; background: #2F75EE; border-radius: 4px; padding: 5px 6px; } .sright a{ color: #fff; } .caifu{ display: flex; flex-wrap: wrap; padding-bottom: 20px; } .caifu .cson{ width: 47%; box-sizing: border-box; margin-top: 20px; border: 1px solid #f2f2f2; margin-right: 4.91%; padding: 15px; position: relative; overflow: hidden; } .caifu .cson:nth-child(2n){ margin-right: 0; } .gcai{ margin: 35px 0 40px 0; color: #C59D57; font-size: 18px; } .huis{ font-size: 12px; color: #B4B8B9; margin-bottom: 10px; display: flex; align-items: center; } .huis img{ margin-right: 4px; } .jshouluo{ position: absolute; top: 10px; right: -66px; transform: rotate(45deg); background: #2172FF; color: #fff; font-size: 13px; width: 180px; text-align: center; line-height: 28px; } .hhao{ margin-top: 20px; border-top: 20px solid #F1F5F8; margin:0 -20px; } .hhao img{ width: 100%; display: block; } .lright{ background: #fff; padding: 15px; } .lbox{ border-bottom: 1px solid #f2f2f2; margin-bottom: 20px; } .lbox img{ margin-right: 8px; vertical-align: middle; } .lbox .shangyi{ vertical-align:1px; margin-right: 2px; } .lbox .xyhao{ vertical-align:-3px; margin-right: 2px; } .lbox h3{ max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; color: #000; font-weight:500; } .lbox h3 a{ color: #333; text-decoration: none; font-size: 22px; } .lbox h3 a:hover{ color: #007AFF; } .neirongx{ color: #8F9AA8; line-height: 30px; padding: 5px 0; font-size: 16px; padding-bottom: 15px; } .wangdai a{ text-decoration: none; color: #333; padding:0 10px; } .wangdai a:nth-child(2n){ border-left: 1px solid #333; border-right: 1px solid #333; } .wangdai a:hover{ color: #2478fb; } .wangdai li{ line-height: 35px; position: relative; white-space: nowrap; overflow: hidden; text-align: justify; } .wangdai li:after{ position: absolute; top: 46%; left: 0; width: 4px; height: 4px; border-radius: 100%; background: #333; display: block; content: ""; clear: both; } .ershi{ border: 1px solid #007AFF; color: #007AFF; height: 50px; line-height: 50px; padding-left: 10px; margin-top: 15px; display: flex; justify-content: space-around; font-weight: 500; align-items: center; } .ershi b{ font-weight: 400; } .ershi span{ border: 1px solid #D1D1D1; color: #D1D1D1; font-size: 12px; padding: 1px 2px; display: inline-block; height: 20px; line-height: 17px; } a{ text-decoration: none; } .ggao1ri{ background: white; } .plhz{ padding: 10px 20px; } .plhz h4{ border-bottom: 1px solid #EEEEEE; color: #000000; font-size: 16px; padding-bottom: 10px; font-weight: 500; } .plhz h4 span{ color: #8F9AA8; font-size: 15px; } .plhz h4 img{ vertical-align: -5px; margin-right: 2px; } .paolu{ display: flex; align-items: center; padding-top: 20px; } .paolu>div div{ margin-left: 20px; } .paolu>div:nth-child(2){ flex: 1; } .bao{ margin-bottom: 8px; display: flex; justify-content: space-between; } .plu{ background: rgba(252,86,96,.2); color: #fc5260; display: inline-block; padding: 4px; font-size: 13px; } .qun{ color: #92959A; } .plhz{ border-bottom: 20px solid #F1F5F8; padding-bottom: 14px; } .after{ padding:16px 20px; } .afters h4{ border-bottom: 1px solid #EEEEEE; display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; font-size: 16px; color: #000000; } .afters h4 a{ font-size: 14px; color: #8F9AA8; font-weight: 500; } .afters img{ vertical-align: -4px; margin-right: 3px; } .afterr{ padding: 25px 0; } .yuanquan p{ background: url(../images/zhou.png) no-repeat; background-position: 0 center; padding-left: 35px; height: 30px; color: #DFDFDF; font-size: 14px; line-height: 38px; } .yuanquan div{ padding-left: 35px; position: relative; margin-bottom: 15px; } .yuanquan div:after{ position: absolute; top: -9px; left: 3px; width: 1px; display: block; content: ""; clear: both; height: 55px; background: #DFDFDF; } .yuanquan li a{ color: #333; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 250px; padding-top: 5px; } .yuanquan li a:hover{ color: #007AFF; } .rtop{ margin-top: 20px; background: white; box-sizing: border-box; } .rtopduo{ display: flex; align-items: center; justify-content: space-between; padding-left: 10px; border-left: 2px solid #2F75EE; margin-bottom: 15px; position: relative; font-size: 18px; } .liness{ border-top: 1px solid #eee; margin-left: 20px; margin-right:20px; } .rtopduo .swiper-button-prev{ position: absolute; background: transparent; top: 125%!important; right: 6%; height: auto; opacity: 1; left: auto!important; } .rtopduo .swiper-button-next{ position: absolute; background: transparent; left: auto; right: 4%; height: auto; opacity: 1; top: 125%!important; } .swtwo{ margin-top: 15px; } .rmright a{ color: #8F9AA8; font-size: 14px; } .item .ibox{ width: 180px; height:230px; box-shadow: #f4f4f4 0 0 1px 1px; margin: 5px 15px 15px 1px; padding: 15px; } .swtwo .item{ height: 100%; padding: 2px 0; display: flex; } .item .ibox:nth-child(1){ margin-left: 20px; } .item .ibox:hover{ box-shadow: #EEEEEE 0 6px 10px 5px; } .ibox>img{ width: 100%; height: 46px; margin: 10px 0; } .shouyi, .qixian{ font-size: 13px; margin-bottom: 15px; } .shouyi span{ color: #fc5260; } .qixian span{ color: #A3A6AB; } .neirons{ display: flex; justify-content: center; align-items: center; height: 90px; margin-top: 20px; border-top: 2px dashed #eee; } .neirons .blue{ color: #007AFF; font-size: 14px; } .eeeh{ font-size: 13px; color: #A0A5AA; } .zuox{ padding: 20px 20px 0 20px; } .chaguan{ margin-top: 20px; display: flex; justify-content: space-between; } .cazuo{ width: 72.9%; display: flex; justify-content: space-between; } .cayou{ width: 25.5%; background: #fff; box-sizing: border-box; padding: 15px 20px 0 20px; } .czzuo{ width: 62.3%; background: #fff; padding: 15px 20px; box-sizing: border-box; } .czyou{ width: 35.6%; background: white; padding: 15px 20px; box-sizing: border-box; } .jflex{ font-size: 18px; display: flex; justify-content: space-between; align-content: center; border-left: 2px solid #2477F9; padding-left: 10px; } .jflex a{ color: #8F9AA8; font-size: 14px; } .lingx{ border-top: 1px solid #DFDFDF; margin-top: 15px; } .uls{ display: flex; line-height: 50px; } .uls li a{ display: block; color: #333; text-align: center; font-size: 16px; } .uls li{ width:20%; } .activr a{ color:#2478fb!important; border-top: 2px solid #2478fb; } .uls a:hover{ color:#2478fb!important; border-top: 2px solid #2478fb; } .lenrxn{ display: flex; align-items: center; } .lenrxn>div:nth-child(1){ width: 30%; } .lenrxn>div:nth-child(1) img{ width: 100%; } .lenrxn>div:nth-child(2){ flex: 1; padding-left: 18px; } .lenrxn>div:nth-child(2) span{ color: #8E929B; } .lenrxn>div a{ color: #333; } .lenrxn>div a:hover{ color: #2478fb; } .lianguang div:hover{ color: #2478fb; } .xianx{ margin-top: 20px; font-size: 14px; color: #8E929B; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 16px; } .buguangx{ line-height: 19px; } .bguanl li a{ white-space: nowrap; display: flex; justify-content: space-between; margin-top: 25px; color: #333; } .bguanl li a:hover{ color: #4381F0; } .bguanl li span{ color: #A1A5A8; } .bguanl li div{ width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ssss div{ width: 100%!important; } .czyou img{ width: 100%; margin: 15px 0; } .lianguang a{ color: #333; } .lianguang a:hover{ color: #4381F0; } .lianguang div{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; color: #4c4c4c; } .lianguang p{ margin-top: 20px; font-size: 14px; color: #8F9AA8; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 17px; } .hmdan{ margin-top: 15px; } .hmdan li{ border-bottom: 1px solid #DFDFDF; padding-top: 15px; } .hmdan .ltou{ display: flex; align-items: center; justify-content: space-between; } .hmdan .ltou img{ vertical-align: -6px; } .lbun{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 10px; color: #95999D; margin-bottom: 15px; } .lbun span{ background: #D4E2FE; color: #327DE7; display: inline-block; padding: 5px; margin-right: 5px; font-size: 14px; } .xuabz{ display: flex; align-items: center; } .shub{ display: flex; align-items: center; } .xuabz img{ margin-left: 35px; margin-right: 10px; } .xuabz strong{ font-size: 13px; } .xuabz a{ color: #333; margin-left:22px; font-size: 14px; } .xuabz a:hover{ color: #007AFF; } .flexs{ display: flex; flex-wrap: wrap; padding-bottom: 20px; } .flexs>div{ width: 23%; height: 130px; margin-right: 1.5%; box-shadow: #EEEEEE 0 0 1px 1px; margin-top: 20px; padding: 15px; box-sizing: border-box; cursor: pointer; } .flexs>div:hover{ box-shadow: #EEEEEE 0 3px 10px 5px; } .flexs>div:nth-child(4n){ margin-right: 0; } .flexs>div:nth-child(4n-3){ margin-left:1.8%; } .disp{ display: flex; justify-content: space-between; align-items: center; } .ylogo img{ width: 110px; height: 30px; display: block; } .ylogo{ margin-right: 10px; } .zhuang{ font-weight: 800; } .yiban{ color: #848484; } .cha{ color: #F2536F; } .haop{ color: #3A71FF; } .pjiao{ font-size: 13px; } .pjiao img{ margin-right: 10px; vertical-align: -4px; } .times{ font-size: 13px; color: #848484; margin-top: 10px; } .wenbx{ font-size: 14px; color: #848484; margin-top: 16px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 18px; height: 38px; } .zyuan{ font-size: 14px; margin-left: 10px; } .zyuan i{ color: #007AFF; font-style:normal; } .zyuan span{ margin-left: 15px; } .kuandu{ display: flex; flex-wrap: wrap; } .kuandu>div{ width: 18.15%; height: 330px; margin-right: 1.5%; box-shadow: #EEEEEE 0 0 1px 1px; box-sizing: border-box; margin-top: 18px; margin-bottom: 18px; } .kuandu>div:hover{ box-shadow: #DFDFDF 0 6px 15px 5px; } .kuandu>div:nth-child(5n){ margin-right: 0; } .kuandu>div:nth-child(5n-4){ margin-left: 1.75%; } .tname{ line-height: 53px; background: url(../images/bg.png); background-size: 100% 100%; position: relative; color: #fff; font-size: 18px; padding-left: 15px; } .imgsx{ position: absolute; right: 14px; top: 25px; } .imgsx img{ border-radius: 100%; height: 55px; width: 55px; } .bzjin{ line-height: 37px; color: #FB6400; font-size: 14px; padding-left: 15px; } .disnx>div h4{ font-size: 20px; font-weight: 500; color: #333; } .disnx{ padding: 15px; display: flex; box-sizing: border-box; justify-content: space-between; } .disnx>div{ width: 50%; text-align: left; } .disnx p{ color: #888D93; font-size: 13px; margin-top: 10px; } .zuiyui{ font-size: 13px; font-weight: 800; padding-left: 15px; margin-top:20px ; } .ztui{ display: flex; flex-wrap: wrap; box-sizing: border-box; padding: 15px; justify-content: space-between; } .ztui li{ border: 1px solid #C4CFDD; width: 45%; margin-top: 8px; text-align: center; padding: 5px 0; font-size: 14px; color: #8F9AA8; } .foot{ background:#333333; margin-top: 35px; color: #fff; padding: 28px 0; } .shibian{ display: flex; border-bottom: 1px solid #dfdfdf; padding-bottom: 8px; margin-bottom: 30px; } .shibian .yqilj{ width: 7%; font-size: 14px; } .yright{ width: 94%; display: flex; flex-wrap: wrap; } .yright>div{ width: 10%; font-size: 14px; padding-left: 15px; box-sizing: border-box; margin-bottom: 15px; } .yright a{ color: rgba(255,255,255,.7); font-size: 14px; } .yright a:hover{ color: #fff; } .dispx{ display: flex; } .feihuxa{ font-size: 12px; margin-top: 8px; } .liusan{ width: 63%; } .xxxs{ flex: 1; justify-content: space-between; } .xxxs a{ color: #fff; font-size: 13px; } .xxxs>div{ width: 33%; text-align: center; } .xxxs div p{ font-size: 14px; margin-bottom: 15px; text-align: center; } .xxxs div div{ margin-bottom: 15px; } .xxxs div div a{ color: rgba(255,255,255,.7); } .xxxs div div a:hover{ color: #fff; } .erer{ flex: 1; position: relative; display: flex; justify-content: space-around; } .erer>div:nth-child(2){ margin-left: 20px; } .erer:after{ position: absolute; left: 0; top: 17px; width: 1px; height: 82px; background: #fff; display: block; content: ''; clear: both; } .erer>div p{ text-align: center; margin-bottom: 10px; font-size: 14px; } .clsxc div{ margin-bottom: 10px; } .clsxc a{ color: rgba(2545,255,255,.7); font-size: 12px; } .clsxc a:hover{ color: #fff; } .clsxc a img{ vertical-align: -6px; margin-right: 5px; } .fodibu{ display: flex; justify-content: center; margin-top: 30px; } .fodibu a{ color: #fff; border-right: 1px solid #fff; display: inline-block; padding-right: 5px; font-size: 14px; } .fodibu div:nth-child(2n){ margin-left: 50px; font-size: 14px; } .dpi{ text-align: center; margin-top:10px; font-size: 12px; color: rgba(255,255,255,.7); } .dpi a{ font-size: 12px; color: rgba(255,255,255,.7); } .lxun{ color: #7D8184; line-height: 42px; font-size: 14px; } .lxun a{ color: #007AFF; } .touggao img{ width: 100%; } .centx{ display: flex; box-sizing: border-box; margin-top: 20px; } div{ box-sizing: border-box; } *{ box-sizing: border-box; } .cenleft{ width: 75.4%; } .cenright{ flex: 1; margin-left: 2%; } .guzhu{ display: flex; justify-content: space-between; border-bottom: 1px solid #DFDFDF; padding-bottom: 20px; padding-right: 20px; align-items: center; } .jiachu{ font-size: 12px; } .jiachu strong{ font-size: 30px; font-weight: 500; border-bottom: 2px solid #3E71E4; padding-bottom: 15px; padding-left: 10px; padding-right: 10px; margin-right: 20px; } .zzhubox{ padding-top: 20px; background: #fff; } .shrngqing img{ vertical-align: -3px; } .shrngqing{ color: #3E71E4; cursor: pointer; } .shaixuan{ padding-bottom: 8px; } .shaixuan li a{ margin-left: 20px; color: #333; } .shaixuan li span{ color: #898989; display: inline-block; width: 11.5%; white-space: nowrap; text-align: right; } .shaixuan li{ font-size: 13px; padding-left: 15px; margin-top: 25px; } .bxactiv{ color: #325FE0!important; background: #EEF0FD; display: inline-block; padding: 2px 4px; } .pxuns{ display: flex; justify-content: space-between; background: #fff; margin: 20px 0; align-items: center; height: 40px; padding-right: 10px; } .pxuns b{ font-weight: 500; } .pxuns .bsx{ margin-left: 10px; font-size: 15px; color: #333; display: inline-block; } .mactiv{ background: #3773EB; line-height: 40px; display: inline-block; color: #fff!important; padding: 0 15px; } .pxuns input{ border-radius: 20px; height: 28px; border: 1px solid #DFDFDF; text-indent: 15px; padding-right: 30px; background: url(../images/luoxun/sousuoxiao.png) no-repeat; background-position: 94% 67%; } .xunhuan{ display: flex; flex-wrap: wrap; } .xunhuan>li{ width: 31.6%; margin-right: 2.6%; height: 395px; box-shadow: #EEEEEE 0 0 1px 1px; background: #fff; margin-bottom: 20px; } .xunhuan>li:hover{ box-shadow: #dfdfdf 0 3px 15px 5px; margin-top: -5px; } .xunhuan>li:nth-child(3n){ margin-right: 0; } .xtitle{ background: url(../images/luoxun/bg.png) no-repeat; background-size: 100% 100%; height: 50px; line-height: 58px; color: #fff; position: relative; padding-left:30%; } .xtitle img{ position: absolute; top: 48%; left: 20px; width:60px; height:60px; border-radius: 100%; border:4px solid #fff; } .dianhua{ color: #F56800; font-size: 13px; padding-left: 30%; line-height:45px; } .dianhua img{ vertical-align: -3px; margin-right: 5px; } .xunhuan .disnx h4, .xunhuan .disnx p{ text-align: center; } .xunhuan .disnx h4{ color: #3872F7; } .fanla{ display: flex; } .fanla>div{ flex: 1; text-align: center; } .fanla>div h5{ color: #DB7F82; } .fanla>div p{ color: #B7B7B7; font-size: 14px; margin-top: 8px; } .ztuis{ padding: 15px; display: flex; flex-wrap: wrap; box-sizing: border-box; } .ztuis li{ border: 1px solid #DFDFDF; text-align: center; width: 30%; padding: 3px 0; margin-right: 5%; margin-bottom: 15px; } .ztuis li:nth-child(3n){ margin-right: 0; } .guanzu{ border:1px solid #1986EB; font-size: 16px; text-align: center; color: #1986EB; line-height: 40px; margin-left: 15px; margin-right: 15px; margin-top: -6px; cursor: pointer; } .quxiao{ font-size: 16px; text-align: center; line-height: 40px; margin-left: 15px; margin-right: 15px; margin-top: -6px; cursor: pointer; background: #F5F5F5; } .ttouzi{ line-height: 40px; border-bottom: 1px solid #DFDFDF; display: flex; align-items: center; background: #FFF; padding-left: 10px; } .ttouzi img{ margin-right: 8px; } .boxsx{ margin-bottom: 10px; padding: 15px; display: flex; justify-content: space-between; align-items: center; height: 140px; background: #fff; overflow: hidden; } .boxsx img{ width:60px ; height: 60px; border-radius: 100%; } .boxsx>div:nth-child(1){ width: 33%; font-size: 14px; color: #898989; } .boxsx>div:nth-child(1) p{ margin-top: 10px; } .boxsx>div:nth-child(2){ flex: 1; box-sizing: border-box; font-size: 14px; } .wushi{ margin-bottom: 20px; } .wushi strong{ font-size: 15px; } .wushi span{ font-size: 14px; color: #898989 } .boxsx .neir{ font-size: 14px; color:#898989 ; line-height: 18px; } .shenx img{ width: 100%; } .shenx{ margin-bottom: 10px; } /*分页*/ .fenyeqi{ margin:0 auto; text-align: center; } .fyeqi{ display: flex; align-items: center; text-align: center; display: inline-block; margin-top: 30px; } .fyeqi li{ display: inline-block; line-height: 40px; background: #fff; margin-left: 10px; } .fyeqi li a{ display: block; padding:0 18px; } .fyactive{ background: #3E71E7!important; color: #fff; } .centx .yiabai{ width: 100%; } .ceng{ background: #fff; padding: 40px 0; display: flex; } .weihxx{ width: 27%; text-align: right; } .ceng .youbiuan{ width:55% ; box-sizing: border-box; padding-left: 2%; } .weihxx div{ height: 55px; } .heiter>div{ height: 55px; } .huoqu{ margin-left: 5%; background:#DEEDFF; padding:8px 10px; border-radius: 5px; color: #2150FA; display: inline-block; border: none; } .heiter input{ width: 100px; padding: 5px; } .chicuen{ color:#FF7F8A; } .pic{ width:100px; height:100px; border-radius:50% ; margin:20px auto; cursor: pointer; background-image: url(../../images/luoxun/add4.jpg); background-size: cover; } .activsx{ width: 245px; height: 175px; border: 1px solid #DFDFDF; display: inline-block; margin: 0 20px 20px 0; text-align: center; color: #7C7C7C; } .subile{ width: 277px; line-height: 40px; text-align: center; font-size: 16px; color: #fff; border: none; background: #3773EB; margin-top: 30px; } .jishaox{ font-size: 14px; color: #868686; line-height: 18px; margin-top: 40px; } .jishaox span{ color: #3773EB; } .zhezhao{ background: rgba(0,0,0,.4); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; display: none; } .bodys{ width: 600px; height: 515px; background: #fff; border-radius: 5px; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); } .zhezhao1{ background: rgba(0,0,0,.4); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; display: none; } .bodys2{ width: 600px; height: 555px; background: #fff; border-radius: 5px; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); } .zhezhao2{ background: rgba(0,0,0,.4); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; display: none; } .bodys3{ width: 530px; background: #fff; border-radius: 5px; position: fixed; overflow: hidden; top: 50%; left: 50%; transform: translate(-50%,-50%); } .dchu{ border-bottom: 1px solid #EEEEEE; height: 80px; line-height:90px; display: flex; justify-content:center; font-size: 20px; position: relative; } .dchu div{ width: 35%; text-align: center; } .dchu a{ display: inline-block; color: #333; padding:0 10px; height: 80px; } .dlactiv{ color: #3773EB!important; border-bottom: 3px solid #3773EB; } .quxiaozc{ position: absolute; right: 23px; top: 19px; height: 30px; line-height: 30px; cursor: pointer; font-size: 40px; color: #666; } .denglfuo{ width: 300px; margin:0 auto; margin-top: 45px; } .denglfuo input{ width: 100%; height: 50px; text-indent:50px; border: 1px solid #DFDFDF; font-size: 16px; color: #C8C8C8; } .denglfuo .phone{ background: url(../images/shoujihao.png) no-repeat; background-position: 20px center; } .denglfuo .input_text_password{ background: url(../images/mima.png) no-repeat; background-position: 20px center; } .denglfuo li{ margin-top: 33px; position: relative; } .eyes_box{ position: absolute; right: 22px; top: 18px; } .kan{ display: none; } .denglfuo .wjma{ margin-top: 19px!important; } .wjma div{ display: flex; font-size: 13px; color: #C8C8C8; justify-content: space-between; } .wjma a{ color: #3773EB; font-size: 13px; } .denglfuo li button{ border: none; background: #3773EB; line-height: 44px; color: #fff; width: 100%; font-size: 18px; } .dldibu{ display: flex; margin-top: 50px; } .dldibu div{ text-align: center; color: #C8C8C8; } .dldibu>div:nth-child(1), .dldibu>div:nth-child(3){ flex: 1; border-top: 1px solid #F9F9F9; } .dldibu>div:nth-child(2){ width:178px; } .dldibu>div:nth-child(2) p{ margin-bottom: 30px; } .weixdl{ margin:0 35px; } .zhucexs{ margin: 0 auto; width: 382px; margin-top: 45px; } .zhucexs li{ margin-bottom:30px; position: relative; } .zhucexs input{ width: 100%; height: 50px; text-indent:50px; border: 1px solid #DFDFDF; font-size: 16px; color: #C8C8C8; } .zhucexs .yhuname{ background: url(../images/shoujihao.png) no-repeat; background-position: 20px center; } .zhucexs li p{ font-size: 13px; margin-top: 15px; text-align: center; color: #CDCDCD; } .zhucexs .hder{ background: url(../images/mima.png) no-repeat; background-position: 20px center; } .zhucexs .bashiss{ color: #000000; background: url(../images/micheng.png) no-repeat; background-position: 20px center; } .zcmim button{ border: none; background: #3773EB; line-height: 44px; color: #fff; width: 100%; font-size: 18px; } .fszyc{ display: inline-block; position: absolute; right: 0; top: 0; text-align: center; line-height: 50px; color: #fff; padding: 0 15px; background: #3773EB; border: none; } .heitad{ height: 48px!important; background: #F2F2F2; } .bodys3 .heitad .quxiaozc{ top: 8px; } .bodys3 .dchu{ justify-content: space-between; } .dchu .wjimx{ line-height: 44px; color: #2B2B2B; padding-left: 30px; } .wjimx{ position: relative; } .wjimx:after{ position: absolute; left: 0; top: 30%; display: block; content: ''; clear: both; width: 4px; height: 20px; background: #3773EB; } .zhaohui>li{ position: relative; display: flex; align-items: center; margin-bottom: 20px; justify-content: space-between; box-sizing: border-box; flex-wrap: wrap; } .zhaohui li>span{ display: block; text-align: right; width: 25%; } .zhaohui li>div{ width: 70%; box-sizing: border-box; } .zhaohui li>div input{ width: 100%; height: 50px; text-indent:20px; border: 1px solid #DFDFDF; font-size: 16px; color: #C8C8C8; } .zhaohui{ padding: 40px 60px 40px 40px; } .zhaohui li>ul{ width: 70%; box-sizing: border-box; } .zhaohui li>ul input{ width: 100%; height: 45px; text-indent:20px; border: 1px solid #DFDFDF; font-size: 16px; color: #C8C8C8; } .tishiwben{ color: #FF4770; font-size: 12px; width: 100%; padding-left: 30%; padding-top: 8px; } .isOk{ text-align: center; } button{ cursor: pointer; } .isOk button{ background: #3773EB; font-size: 18px; text-align: center; line-height: 45px; border: none; width: 240px; color: #fff; margin-top: -20px; margin-bottom: 20px; cursor: pointer; }
登录弹框：
<div class="zhezhao"> <div class="bodys"> <div class="dchu"> <div> <a class="dlactiv" href="###">登录</a> </div> <div> <a class="zche" href="###">注册</a> </div> <span class="quxiaozc">×</span> </div> <!----> <ul class="denglfuo"> <li><input name="username" id="user_username" class="phone" type="text" placeholder="请输入手机号/用户名" /></li> <li><input name="password" type="password" id="user_password" class="input_text_password mima_dd " placeholder="请输入密码" /> <input name="password2" type="text" id="user_password_text" class="input_text_password mima_wz" style="display: none;" placeholder="请输入密码" /> <a class="eyes_box " id="userLogin_eyes_box" data-show="1" href="javascript:void(0);"> <i class="bukan"><img src="${basePath}/static/images/bukanmima.png" /></i> <i class="kan"><img src="${basePath}/static/images/kanmimma.png" /> </i> </a></li> <li class="wjma"> <div> <a class="wjmm" href="###">忘记密码？</a> <span>还没有账号？<a class="zche" href="###">立即注册</a></span> </div> </li> <li class="wjma"> <button type="button" id="userLogin">登录</button> </li> </ul> <div class="dldibu"> <div></div> <div> <p>第三方登录</p> <a href="###"><img src="${basePath}/static/images/qq.png" /></a> <a class="weixdl" href="###"><img src="${basePath}/static/images/weixin.png" /></a> <a href="###"><img src="${basePath}/static/images/weibo.png" /></a> </div> <div></div> </div> </div> </div>
css如上
注册弹框：
<div class="zhezhao1"> <div class="bodys2"> <div class="dchu"> <div> <a class="denglxx" href="###">登录</a> </div> <div> <a class="dlactiv" href="###">注册</a> </div> <span class="quxiaozc">×</span> </div> <!----> <ul class="zhucexs"> <li><input id="userReg_phone" name="phone" class="yhuname" type="text" placeholder="请输入手机号" /></li> <li><input id="userReg_code" name="code" class="yhuname" type="text" placeholder="请输入验证码" /> <button class="fszyc" id="btns" href="###">发送验证码</button></li> <li><input id="userReg_password" name="password" type="password" class="input_text_password hder mima_dd " placeholder="输入密码(数字，字母皆可，最低6位)" /> <input name="" type="text" class="input_text_password hder mima_wz" style="display: none;" placeholder="输入密码(数字，字母皆可，最低6位)" /> <a class="eyes_box " data-show="1" href="javascript:void(0);"> <i class="bukan"><img src="${basePath}/static/images/bukanmima.png" /></i> <i class="kan"><img src="${basePath}/static/images/kanmimma.png" /></i> </a></li> <li><input id="userReg_username" type="text" class="bashiss" name="username" placeholder="输入用户名" value="" /> <p>*默认用户名可修改，汉字，字母数字皆可，5-10位</p></li> <li class="zcmim"> <button type="button" id="userReg_submit">注册</button> </li> </ul> </div> </div> <!--忘记密码弹窗--> <div class="zhezhao2"> <div class="bodys3"> <div class="dchu heitad"> <p class="wjimx">忘记密码</p> <span class="quxiaozc">×</span> </div> <!----> <ul class="zhaohui"> <li><span>输入手机号码</span> <div> <!-- Forgetthe password --> <input type="text" name="phone" value="" id="ftp_phone" placeholder="请输入您的手机号码" /> </div> <!-- <p class="tishiwben">*输入手机号不存在</p> --></li> <li><span>验证码</span> <div> <input type="text" name="code" id="ftp_code" value="" placeholder="请输入验证码" /> <button class="fszyc" id="btnss" href="###">发送验证码</button> </div></li> <li><span>设置新密码</span> <ul> <li><input name="password" type="password" id="ftp_password" class="input_text_password mima_dd " placeholder="数字，字母皆可至少6位" /> <input name="" type="text" class="input_text_password mima_wz" style="display: none;" placeholder="数字，字母皆可至少6位" /> <a class="eyes_box " data-show="1" href="javascript:void(0);"> <i class="bukan"><img src="${basePath}/static/images/bukanmima.png" /></i> <i class="kan"><img src="${basePath}/static/images/kanmimma.png" /></i> </a></li> </ul></li> </ul> <div class="isOk"> <button type="button" id="ftp_submit">确认</button> </div> </div> </div>
1736
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
