dianliu5718
dianliu5718

前端技术

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[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 delMany() {

        String ids = request.getParameter("ids"); // id字符串 "1,2,3..."
        Map 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

前端技术_第1张图片

c

前端技术_第2张图片

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. 基于最新主流浏览器。
维护：玉伯, 正淳
 */

/** 清除内外边距 **/
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>


    
    <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>
    
    <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.前端技术_第3张图片

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_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>
        
        <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>
                
                <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 heretitle>
<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()">copybutton>
    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如上

前端技术_第4张图片

注册弹框：

<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>
                            
                            <input type="text" name="phone" value="" id="ftp_phone"
                                placeholder="请输入您的手机号码" />
                        div> 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>

前端技术_第5张图片

转载于:https://www.cnblogs.com/excellent-vb/p/9323426.html

你可能感兴趣的:(前端技术)

  • 前端技术简介 2401_83916204 程序员前端
    “前端开发”是从“网页制作”演变而来的。从2005年开始，互联网进入web2.0时代，由单一的文字和图片组成的静态网页已经不能满足用户的需求，用户需要更好的体验。在web2.0时代，网页有静态网页和动态网页。所谓动态网页，就是用户不仅仅可以浏览网页，还可以与服务器进行交互。举个例子，你登陆新浪微博，要输入账号密码，这个时候就需要服务器对你的账号和密码进行验证通过才行。web2.0时代的网页不仅包含
  • RAG与LLM原理及实践(16)---RAG 前端技术Flask-socketIO PhoenixAI8 RAGMilvusChroma源码及实践前端flaskpythonsocketioRAG
    目录背景技术理念RAG结合点实时数据更新与推送实时查询与响应安装使用完整案例说明后端python代码代码解释前端html代码JS代码代码解释总结背景构建RAG系统或别的系统时，如果后端采用的全Python，或者说是以python为主的系统，是很常见的一个选择，因为毕竟python对LLM，图片，乃至其他video等resource的model都有较完善的支撑，为了快速开发出原型，甚至之后的商用，往
  • 【Web前端技术 02】深入探索HTML5：标签全解析与案例演示！ wcyd Web前端技术前端html5html
    深入探索HTML5：标签全解析与案例演示！大家好！在上一篇文章中，我们对HTML5有了一个基本的了解。今天，我们将更深入地探索HTML5，全面介绍各种标签及其应用。从基础标签到新增标签，从文档结构到格式标签，我们将一一解析，并提供丰富的案例演示。准备好了吗？让我们开始吧！️HTML5基础结构首先，让我们回顾一下HTML5的基本结构。HTML5文档的结构就像一座房子的蓝图，指导我们如何构建网页。下面
  • 微服务架构在前端开发中的应用 爱学习的卢生 架构微服务云原生
    随着云计算和容器技术的发展，微服务架构已经成为了现代应用程序开发的一种主流架构风格。微服务架构将应用程序拆分成一组小型服务，每个服务都有自己的代码库、数据库和API接口，这样可以使得应用程序更加灵活、可扩展和易于维护。虽然微服务架构最初是应用于后端服务的开发，但是随着前端技术的迅速发展，微服务架构也开始在前端开发中得到了应用。本文将介绍微服务架构在前端开发中的应用，包括其优势、挑战和最佳实践。微服
  • java计算机毕业设计Vue潍坊学院宿舍管理系统设计与实现MyBatis+系统+LW文档+源码+调试部署 一梵sheji288 javamybatisvue.js
    java计算机毕业设计Vue潍坊学院宿舍管理系统设计与实现MyBatis+系统+LW文档+源码+调试部署java计算机毕业设计Vue潍坊学院宿舍管理系统设计与实现MyBatis+系统+LW文档+源码+调试部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、
  • 2024上学期--实验室学习计划 m0_66357705 javascript前端vue.js
    阶段周次学习内容实践内容时间安排新增内容/重点基础巩固1-2周Java基础，多线程，TCP/IP网络编程相关练习和小的编程项目每天学习2小时，实践1小时Java20及以上版本新特性学习框架深入学习3-6周Spring，SpringBoot相关练习和小的编程项目每天学习3小时，实践1.5小时学习SpringCloud和微服务架构基础前端技术提升7-8周Vue2，Vue3相关练习和小的编程项目每天学习
  • 基于Java毕业设计新锐台球厅管理系统源码+系统+mysql+lw文档+部署软件 练练科技 java课程设计mysql
    基于Java毕业设计新锐台球厅管理系统源码+系统+mysql+lw文档+部署软件基于Java毕业设计新锐台球厅管理系统源码+系统+mysql+lw文档+部署软件本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码
  • java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署 鸿源网络 数据库mysqljava
    java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQ
  • 基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署 源新网络 java开发语言
    基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码
  • 前端架构师招聘 qq_42801150 前端架构金融
    前端架构师（薪酬50-80W）所属部门：医美云事业部级别：T4岗位职责：1.负责事业部前端技术选型、关键技术决策；2.负责为技术VP前端相关技术决策提供建议和支持；3.负责组织实施内部UI库、内部基础研发工具和研发依赖的开发和实施；4.负责制订公司前端研发规范的制订和实施审查；5.负责组织定期内部前端业务培训，协助提升内部员工前端业务技能。任职要求：1.5年以上工作经验，大型互联网公司前端团队技术
  • 前端技术演进与未来发展趋势探究 科技语者 前端
    该论文为AI生成，请勿运用到正式的论文上，以下仅供参考一、引言1.1研究背景在当今数字化时代，前端领域呈现出蓬勃发展的态势。随着互联网的普及和技术的不断进步，前端技术在构建用户界面、提升用户体验方面发挥着至关重要的作用。从早期的静态网页到如今的动态交互界面，前端技术经历了巨大的变革。在过去的几十年里，前端技术的发展可谓日新月异。从1990年第一个Web浏览器的诞生，到如今各种先进的前端框架和工具的
  • electron调用python_Electron+Python界面开发（通过zerorpc） weixin_39574050
    Python开发GUI要么太繁琐要么太丑，而前端技术恰巧是最适合做漂亮UI的。所以考虑将Python和前端技术结合，通过进程通信和前端框架交流，打包成一个完整的桌面APP。教程分成两种实现方式，一个是zerorpc进程通信一个是http通信。这篇教程介绍zerorpc的方式，流程如下：start|V+--------------------+||start|electron+-----------
  • java计算机毕业设计生产管理系统源代码+数据库+系统+lw文档 影伴设计 java开发语言前端
    java计算机毕业设计生产管理系统源代码+数据库+系统+lw文档java计算机毕业设计生产管理系统源代码+数据库+系统+lw文档本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址：https://pan.b
  • 计算机毕业设计springboot健身中心前台信息管理系统qotli源码+系统+程序+lw文档+部署 呦呦网络 数据库
    计算机毕业设计springboot健身中心前台信息管理系统qotli源码+系统+程序+lw文档+部署计算机毕业设计springboot健身中心前台信息管理系统qotli源码+系统+程序+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1
  • 基于JAVA家庭记账系统计算机毕业设计源码+系统+mysql数据库+lw文档+部署 丽扬科技 数据库javamysql
    基于JAVA家庭记账系统计算机毕业设计源码+系统+mysql数据库+lw文档+部署基于JAVA家庭记账系统计算机毕业设计源码+系统+mysql数据库+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0
  • 基于JAVA智能推荐二手车交易网站计算机毕业设计源码+系统+数据库+lw文档+部署 光光网络 java开发语言
    基于JAVA智能推荐二手车交易网站计算机毕业设计源码+系统+数据库+lw文档+部署基于JAVA智能推荐二手车交易网站计算机毕业设计源码+系统+数据库+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0
  • JAVA毕业设计酒店管理系统设计与实现计算机源码+lw文档+系统+调试部署+数据库 妮维网络 java开发语言jvm
    JAVA毕业设计酒店管理系统设计与实现计算机源码+lw文档+系统+调试部署+数据库JAVA毕业设计酒店管理系统设计与实现计算机源码+lw文档+系统+调试部署+数据库本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0
  • 快速上手 Electron 及推荐库 Liumoui electronjavascript前端
    ###快速上手Electron及推荐库####什么是Electron?Electron是一个基于Node.js和Chromium的框架，用于构建跨平台的桌面应用程序。它将网页技术（HTML、CSS和JavaScript）带入桌面应用开发，允许开发者使用熟悉的前端技术构建功能强大的桌面应用。####Electron的基本概念1.**主进程和渲染进程**-**主进程**：运行在Node.js环境中，负
  • 基于SpringBoot的流浪猫狗救援网站 超级无敌暴龙战士塔塔开 Java课设与毕设资源java
    文章目录项目介绍主要功能截图：部分代码展示设计总结项目获取方式作者主页：超级无敌暴龙战士塔塔开简介：Java领域优质创作者、简历模板、学习资料、面试题库【关注我，都给你】文末获取源码联系项目介绍基于SpringBoot的流浪猫狗救援网站,java项目。eclipse和idea都能打开运行。推荐环境配置：eclipse/ideajdk1.8mavenmysql前端技术：vue，Ajax，Json后端
  • 上传文件太大 net::ERR_CONNECTION_ABORTED 500 (Internal Server Error) 连接失败错误 我的风格0.0 spring前端springjava前端
    前端技术:VUE,elementUI后端技术:springCloudspringBoot前台上传文件时一直报错:net::ERR_CONNECTION_ABORTED问题根因:上传文件太大,超过后台配置解决办法:后台application.yml中添加配置:spring:servlet:multipart:enabled:truemax-file-size:100MBmax-request-siz
  • java计算机毕业设计智能停车场管理系统源码+mysql数据库+系统+部署+lw文档 法姆利 javamysql开发语言
    java计算机毕业设计智能停车场管理系统源码+mysql数据库+系统+部署+lw文档java计算机毕业设计智能停车场管理系统源码+mysql数据库+系统+部署+lw文档本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8
  • java-net-php-python-ssmKTV点歌系统查重PPT计算机毕业设计程序 荣荣科技 javaphp开发语言
    java-net-php-python-ssmKTV点歌系统查重PPT计算机毕业设计程序java-net-php-python-ssmKTV点歌系统查重PPT计算机毕业设计程序本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5
  • 深入理解防抖（Debounce）：提升网页性能的关键技术 正小安 前端前端
    深入理解防抖（Debounce）：提升网页性能的关键技术什么是防抖？防抖（Debounce）是一种重要的前端技术，用于控制函数的执行频率。其核心思想是：在一定时间内，无论事件被触发多少次，只执行一次目标函数。换句话说，当事件首次触发后，如果在设定的等待时间内事件再次被触发，则重新计时，直到最后一次事件触发后等待时间结束，才执行目标函数。为什么需要防抖？在前端开发中，我们经常会遇到一些事件在短时间内
  • 外卖系统定制开发：技术选型与架构设计要点 万岳科技系统开发 人工智能小程序前端
    随着外卖行业的迅速发展，餐饮企业需要一个高效、稳定、可扩展的外卖系统来满足日益增长的用户需求。本文将探讨外卖系统定制开发的技术选型与架构设计要点，并提供一些示例代码来说明关键技术的实现。一、技术选型1.前端技术选型外卖系统的前端需要具备良好的用户体验和快速响应能力。常用的前端技术包括：框架：React、Vue.js或Angular状态管理：Redux、VuexCSS预处理器：Sass、Less打包
  • 后端程序员的前端基础-前端三剑客之JavaScript yinying293 后端程序员的前端路线Java#JavaWebjavascript前端java
    后端程序员工作中需要用的前端技术，内容精简极致，目标核心掌握即可本模块分三部分，另外两篇请戳→后端程序员的前端基础-前端三剑客之一：HTML后端程序员的前端基础-前端三剑客之二:CSS后端程序员的前端基础-前端三剑客之三:本篇文章目录1JavaScript简介1.1JavaScript简介1.2JavaScript组成部分1.3JavaScript发展史2JavaScript基本语法2.1JS的引
  • 前端技术演进（四）：前端三层结构与应用 weixin_34184561 前端javascript数据结构与算法ViewUI
    这个来自之前做的培训，删减了一些业务相关的，参考了很多资料（参考资料列表），谢谢前辈们，么么哒?前端有三个基本构成：结构层HTML、表现层CSS和行为层Javascript。他们分别成熟的版本是HTML5、CSS3和ECMAScript6+。这里我们主要了解现代前端三层结构的演进历程以及如何在三层结构的基础之上进行高效开发。HTMLHTML（超文本标记语言——HyperTextMarkupLang
  • 从零开始开发跑腿配送系统：技术选型与架构设计 万岳科技系统开发 小程序人工智能前端
    开发一个跑腿配送系统涉及多个技术栈和模块，从前端到后端，再到数据库和实时通信，每一个环节都至关重要。本文将详细介绍从零开始开发跑腿配送系统的技术选型与架构设计，并提供部分代码示例以帮助理解。一、技术选型前端技术：React：用于构建用户界面，具有组件化和高效的特点。Redux：用于状态管理，便于管理复杂的应用状态。AntDesign：提供一套美观的UI组件，提升开发效率和用户体验。后端技术：Nod
  • 小程序外卖开发中的关键技术与实现方法 万岳科技系统开发 小程序
    小程序外卖服务凭借其便捷性和灵活性，正成为现代餐饮行业的重要组成部分。开发一个功能完善的小程序外卖系统，需要掌握一系列关键技术和实现方法。本文将介绍小程序外卖开发中的核心技术，并提供具体的代码示例，帮助开发者理解和实现这些技术。1.小程序架构设计小程序外卖系统的架构设计主要包括前端的小程序和后端的服务器部分。前端负责用户界面的展示和交互，后端则处理数据存储和业务逻辑。1.1前端技术栈微信小程序开发
  • web前端技术分享：koa中间件是如何实现的？ 程序员的小傲娇 web前端编程语言web
    在前端开发过程中我们可能会使用到koa中间件，但很多同学却不知道它是如何实现的，下面小千就来给大家介绍一下这个koa中间件（洋葱模型）。一、问题分析asyncawait是promise的语法糖，await后面跟一个promise，所以上面的代码可以写成：改成这样更好理解一些，所以流程控制的核心在于next的实现。next要求调用队列中下一个middleware，当达到最后一个的时候resolve。
  • 使用WebStorm进行高效的全栈JavaScript开发 vvvae1234 webstorm
    JavaScript的日益普及，成为全栈开发者已经成了当今开发者追求的重要目标。全栈开发者不仅需要掌握前端技术栈（如HTML、CSS和JavaScript），还必须理解后端技术（如Node.js、Express等）和数据库（如MongoDB或MySQL）。在这个过程中，选择一个合适的集成开发环境（IDE）至关重要。WebStorm作为一款强大的JavaScript开发工具，为开发者提供了丰富的功能
  • 继之前的线程循环加到窗口中运行 3213213333332132 javathreadJFrameJPanel
    之前写了有关java线程的循环执行和结束，因为想制作成exe文件，想把执行的效果加到窗口上，所以就结合了JFrame和JPanel写了这个程序，这里直接贴出代码，在窗口上运行的效果下面有附图。 package thread; import java.awt.Graphics; import java.text.SimpleDateFormat; import java.util
  • linux 常用命令 BlueSkator linux命令
    1.grep 相信这个命令可以说是大家最常用的命令之一了。尤其是查询生产环境的日志，这个命令绝对是必不可少的。 但之前总是习惯于使用 （grep -n 关键字 文件名 ）查出关键字以及该关键字所在的行数，然后再用 （sed -n  '100,200p' 文件名），去查出该关键字之后的日志内容。 但其实还有更简便的办法，就是用（grep  -B n、-A n、-C n 关键
  • php heredoc原文档和nowdoc语法 dcj3sjt126com PHPheredocnowdoc
    <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Current To-Do List</title> </head> <body> <?
  • overflow的属性 周华华 JavaScript
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q
  • 《我所了解的Java》——总体目录 g21121 java
            准备用一年左右时间写一个系列的文章《我所了解的Java》，目录及内容会不断完善及调整。         在编写相关内容时难免出现笔误、代码无法执行、名词理解错误等，请大家及时指出，我会第一时间更正。    &n
  • [简单]docx4j常用方法小结 53873039oycg docx
            本代码基于docx4j-3.2.0，在office word 2007上测试通过。代码如下:         import java.io.File; import java.io.FileInputStream; import ja
  • Spring配置学习 云端月影 spring配置
    首先来看一个标准的Spring配置文件 applicationContext.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi=&q
  • Java新手入门的30个基本概念三 aijuans java新手java 入门
    17.Java中的每一个类都是从Object类扩展而来的。　　18.object类中的equal和toString方法。　　equal用于测试一个对象是否同另一个对象相等。　　toString返回一个代表该对象的字符串,几乎每一个类都会重载该方法,以便返回当前状态的正确表示.(toString 方法是一个很重要的方法)　　 19.通用编程:任何类类型的所有值都可以同object类性的变量来代替。　
  • 《2008 IBM Rational 软件开发高峰论坛会议》小记 antonyup_2006 软件测试敏捷开发项目管理IBM活动
    我一直想写些总结,用于交流和备忘,然都没提笔,今以一篇参加活动的感受小记开个头,呵呵! 其实参加《2008 IBM Rational 软件开发高峰论坛会议》是9月4号,那天刚好调休.但接着项目颇为忙,所以今天在中秋佳节的假期里整理了下. 参加这次活动是一个朋友给的一个邀请书,才知道有这样的一个活动,虽然现在项目暂时没用到IBM的解决方案,但觉的参与这样一个活动可以拓宽下视野和相关知识.
  • PL/SQL的过程编程,异常,声明变量,PL/SQL块 百合不是茶 PL/SQL的过程编程异常PL/SQL块声明变量
    PL/SQL;    过程; 符号; 变量; PL/SQL块; 输出; 异常;     PL/SQL 是过程语言(Procedural Language)与结构化查询语言(SQL)结合而成的编程语言PL/SQL 是对 SQL 的扩展,sql的执行时每次都要写操作
  • Mockito(三)--完整功能介绍 bijian1013 持续集成mockito单元测试
            mockito官网：http://code.google.com/p/mockito/，打开documentation可以看到官方最新的文档资料。 一.使用mockito验证行为 //首先要import Mockito import static org.mockito.Mockito.*; //mo
  • 精通Oracle10编程SQL(8)使用复合数据类型 bijian1013 oracle数据库plsql
    /* *使用复合数据类型 */ --PL/SQL记录 --定义PL/SQL记录 --自定义PL/SQL记录 DECLARE TYPE emp_record_type IS RECORD( name emp.ename%TYPE, salary emp.sal%TYPE, dno emp.deptno%TYPE ); emp_
  • 【Linux常用命令一】grep命令 bit1129 Linux常用命令
    grep命令格式   grep [option] pattern [file-list]     grep命令用于在指定的文件(一个或者多个,file-list)中查找包含模式串(pattern)的行,[option]用于控制grep命令的查找方式。   pattern可以是普通字符串，也可以是正则表达式，当查找的字符串包含正则表达式字符或者特
  • mybatis3入门学习笔记 白糖_ sqlibatisqqjdbc配置管理
    MyBatis 的前身就是iBatis，是一个数据持久层(ORM)框架。  MyBatis 是支持普通 SQL 查询，存储过程和高级映射的优秀持久层框架。MyBatis对JDBC进行了一次很浅的封装。   以前也学过iBatis，因为MyBatis是iBatis的升级版本，最初以为改动应该不大，实际结果是MyBatis对配置文件进行了一些大的改动，使整个框架更加方便人性化。
  • Linux 命令神器：lsof 入门 ronin47 lsof
           lsof是系统管理/安全的尤伯工具。我大多数时候用它来从系统获得与网络连接相关的信息，但那只是这个强大而又鲜为人知的应用的第一步。将这个工具称之为lsof真实名副其实，因为它是指“列出打开文件（lists openfiles）”。而有一点要切记，在Unix中一切（包括网络套接口）都是文件。 有趣的是，lsof也是有着最多
  • java实现两个大数相加，可能存在溢出。 bylijinnan java实现
    import java.math.BigInteger; import java.util.regex.Matcher; import java.util.regex.Pattern; public class BigIntegerAddition { /** * 题目：java实现两个大数相加，可能存在溢出。 * 如123456789 + 987654321
  • Kettle学习资料分享，附大神用Kettle的一套流程完成对整个数据库迁移方法 Kai_Ge Kettle
    Kettle学习资料分享   Kettle 3.2 使用说明书 目录 概述..........................................................................................................................................7 1.Kettle 资源库管
  • [货币与金融]钢之炼金术士 comsci 金融
           自古以来,都有一些人在从事炼金术的工作.........但是很少有成功的        那么随着人类在理论物理和工程物理上面取得的一些突破性进展......        炼金术这个古老
  • Toast原来也可以多样化 dai_lm androidtoast
    Style 1： 默认 Toast def = Toast.makeText(this, "default", Toast.LENGTH_SHORT); def.show(); Style 2： 顶部显示 Toast top = Toast.makeText(this, "top", Toast.LENGTH_SHORT); t
  • java数据计算的几种解决方法3 datamachine javahadoopibatisr-languer
    4、iBatis     简单敏捷因此强大的数据计算层。和Hibernate不同，它鼓励写SQL，所以学习成本最低。同时它用最小的代价实现了计算脚本和JAVA代码的解耦，只用20%的代价就实现了hibernate 80%的功能,没实现的20%是计算脚本和数据库的解耦。     复杂计算环境是它的弱项，比如：分布式计算、复杂计算、非数据
  • 向网页中插入透明Flash的方法和技巧 dcj3sjt126com htmlWebFlash
    将 Flash 作品插入网页的时候，我们有时候会需要将它设为透明，有时候我们需要在Flash的背面插入一些漂亮的图片，搭配出漂亮的效果……下面我们介绍一些将Flash插入网页中的一些透明的设置技巧。 　　一、Swf透明、无坐标控制　　首先教大家最简单的插入Flash的代码，透明，无坐标控制： 　　注意wmode="transparent"是控制Flash是否透明
  • ios UICollectionView的使用 dcj3sjt126com
    UICollectionView的使用有两种方法，一种是继承UICollectionViewController，这个Controller会自带一个UICollectionView；另外一种是作为一个视图放在普通的UIViewController里面。 个人更喜欢第二种。下面采用第二种方式简单介绍一下UICollectionView的使用。 1.UIViewController实现委托，代码如
  • Eos平台java公共逻辑 蕃薯耀 Eos平台java公共逻辑Eos平台java公共逻辑
     Eos平台java公共逻辑 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月1日 17:20:4
  • SpringMVC4零配置--Web上下文配置【MvcConfig】 hanqunfeng springmvc4
    与SpringSecurity的配置类似，spring同样为我们提供了一个实现类WebMvcConfigurationSupport和一个注解@EnableWebMvc以帮助我们减少bean的声明。   applicationContext-MvcConfig.xml <!-- 启用注解，并定义组件查找规则 ，mvc层只负责扫描@Controller --> <
  • 解决ie和其他浏览器poi下载excel文件名乱码 jackyrong Excel
       使用poi,做传统的excel导出，然后想在浏览器中，让用户选择另存为，保存用户下载的xls文件，这个时候，可能的是在ie下出现乱码（ie,9,10,11),但在firefox,chrome下没乱码， 因此必须综合判断，编写一个工具类：      /** * * @Title: pro
  • 挥洒泪水的青春 lampcy 编程生活程序员
    2015年2月28日，我辞职了，离开了相处一年的触控，转过身--挥洒掉泪水，毅然来到了兄弟连，背负着许多的不解、质疑——”你一个零基础、脑子又不聪明的人，还敢跨行业，选择Unity3D？“，”真是不自量力••••••“，”真是初生牛犊不怕虎•••••“，••••••我只是淡淡一笑，拎着行李----坐上了通向挥洒泪水的青春之地——兄弟连！ 这就是我青春的分割线，不后悔，只会去用泪水浇灌——已经来到
  • 稳增长之中国股市两点意见-----严控做空，建立涨跌停版停牌重组机制 nannan408
       对于股市，我们国家的监管还是有点拼的，但始终拼不过飞流直下的恐慌，为什么呢？    笔者首先支持股市的监管。对于股市越管越荡的现象，笔者认为首先是做空力量超过了股市自身的升力，并且对于跌停停牌重组的快速反应还没建立好，上市公司对于股价下跌没有很好的利好支撑。    我们来看美国和香港是怎么应对股灾的。美国是靠禁止重要股票做空，在
  • 动态设置iframe高度(iframe高度自适应) Rainbow702 JavaScriptiframecontentDocument高度自适应局部刷新
    如果需要对画面中的部分区域作局部刷新，大家可能都会想到使用ajax。 但有些情况下，须使用在页面中嵌入一个iframe来作局部刷新。 对于使用iframe的情况，发现有一个问题，就是iframe中的页面的高度可能会很高，但是外面页面并不会被iframe内部页面给撑开，如下面的结构： <div id="content"> <div id=&quo
  • 用Rapael做图表 tntxia rap
    function drawReport(paper,attr,data){          var width = attr.width;     var height = attr.height;          var max = 0;   &nbs
  • HTML5 bootstrap2网页兼容（支持IE10以下） xiaoluode html5bootstrap
    <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他