今天接着说test8的页面还原。

头部header和尾部footer

我一开始是想直接使用bootstrap的栅格系统来实现的。但是内容的定位出了不少麻烦。

那么就索性用原生html+css来还原页面了。

放上效果图

头部html代码

  1. <div class="g-header w-100">
  2.         <div class="h-row-1">
  3.             <div class="w-80">
  4.                 <a href="">客服热线：010 594 78634</a>
  5.                 <span class="float-right">
  6.                     <a href=""><img src="img/test8-1/weixinicon.jpg"></a>
  7.                     <a href=""><img src="img/test8-1/qqicon.jpg"></a>
  8.                     <a href=""><img src="img/test8-1/weiboicon.jpg"></a>
  9.                 </span>
  10.             </div>
  11.         </div>
  12.         <div class="h-row-2">
  13.             <div class="w-80">
  14.                 <a href="">首页</a>
  15.                 <a href="">职业</a>
  16.                 <a href="">推荐</a>
  17.                 <a href="">关于</a>
  18.             </div>
  19.         </div>
  20. </div>

尾部html代码

  1. <div class="g-footer">
  2.     <div class="f-row-1">
  3.         <div class="w-80">
  4.             <div class="f-cess-1">
  5.                 <h5>技能树<span style="padding:0 0.3rem;">一</span>改变你我</h5>
  6.                 <ul>
  7.                     <li>
  8.                         <a href="">关于我们</a>
  9.                     </li>
  10.                     <li>
  11.                         <a href="" class="f-a">联系我们</a>
  12.                     </li>
  13.                     <li>
  14.                         <a href="">合作企业</a>
  15.                     </li>
  16.                 </ul>
  17.  
  18.              </div>
  19.             <div class="f-cess-2">
  20.                 <h5>旗下网站</h5>
  21.                 <ul>
  22.                     <li>
  23.                         <a href="">草船云孵化器</a>
  24.                     </li>
  25.                     <li>
  26.                         <a href="">最强IT特训营</a>
  27.                     </li>
  28.                     <li>
  29.                         <a href="">葡萄藤轻游戏</a>
  30.                     </li>
  31.                     <li>
  32.                         <a href="">桌游精灵</a>
  33.                     </li>
  34.                 </ul>
  35.  
  36.             </div>
  37.             <div class="f-cess-3">
  38.                 <h5>微信公众平台</h5>
  39.                 <img src="img/test8-1/qrcode.png" class="s-icon-max-2">
  40.             </div>
  41.         </div>
  42.     </div>
  43.  
  44.     <div class="f-row-2 ta-center">
  45.         <div class="w-80">
  46.             <span>Copyright<span>&copy;</span>2015技能树</span><span>wwww.jnshu.com</span>
  47.             <span>All</span><span>Rights</span><span>Reserved</span>
  48.             <span>京ICP备13005880号</span>
  49.         </div>
  50.     </div>
  51. </div>

css代码

  1. html{
  2.     font-size:62.5%;
  3.     height:100%;
  4.     width:100%;
  5.     /*将html 和 body 元素的高度设置为100%，使其充满整个屏幕。*/
  6.     /*这里还要说明一下：html下的body一般会有或多或少的margin，body的高度不是100%的。*/
  7. }
  8. body{
  9.     display:flex;
  10.     flex-direction:column;
  11.     height:100%;
  12.     width:100%;
  13.     /*将html 和 body 元素的高度设置为100%，使其充满整个屏幕。这里body：height：100%是继承html的高度*/
  14.     /*将 body 的 display 属性设置为 flex, 然后将方向属性设置为列,*/
  15. }
  16. ul,li{
  17.     margin:;
  18.     padding:;
  19.     list-style: none;
  20. }
  21. li{
  22.     display: inline-block;
  23.  
  24. }
  25.  
  26. /*---框架设置---*/
  27.  
  28. /*我们希望 header 和footer 只占用他们应该占用的空间，将剩余的空间全部交给主体内容区域*/
  29. .g-header{
  30.     flex:0 0 auto;
  31.  
  32. }
  33. .g-content{
  34.     flex: 1 0 auto;
  35.     /*将 flex-grow 设置为1，该元素会占用全部可使用空间*/
  36.     /*而其他元素该属性值为0，因此不会得到多余的空间*/
  37.     /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
  38.     width:100%;
  39. }
  40.  
  41. .g-footer{
  42.     flex: 0 0 auto;
  43. }
  44. .g-footer-f{
  45.     position: fixed;bottom:;
  46.     width:100%;
  47.     min-height: 5rem;
  48.     /*此方法通过position固定在浏览器下方，但是以一种浮动在上层的效果出现的。*/
  49.     /*所以上一个紧挨的并列盒子，即g-content盒子的内容就会有一部分显示不全。被遮挡了。*/
  50.     /*而这种特性也被用于实现footer底层样式透明，footer里的按钮不透明。*/
  51.     /*而实现内容不遮挡，只要在g-content的底部新增一个含高度的空div就完成。*/
  52. }
  53. .footer-bg{
  54.     height:5rem;
  55.     /*只要再给一个层，然后给个跟父盒子一样高的高度就可以实现底层透明，上层不透明*/
  56.     background:#29BDE0;
  57.     filter:alpha(Opacity=50);-moz-Opacity:0.5;opacity:0.5;
  58.     /*filter:alpha(Opacity=50);-moz-Opacity:0.5;opacity:0.5;实现透明效果*/
  59. }
  60.  
  61. /*---具体的头部设置---*/
  62.  
  63. .h-row-1{
  64.     min-height: 2rem;
  65.     line-height: 2rem;
  66.     border-top:0.1rem solid #fff;
  67. }
  68.  
  69. .h-row-2{
  70.     background:#20B176;
  71.     min-height:4rem;
  72.     line-height:4rem;
  73.     text-align: right;
  74. }
  75. .h-row-1 a{
  76.     color:#20B176;
  77. }
  78. .h-row-1 img{
  79.     max-width: 1rem;
  80.     margin:0 0.2rem;
  81. }
  82. .h-row-2 a{
  83.     font-size:1.5rem;
  84.     color:#fff;
  85.     margin-left: 2.5rem;
  86. }
  87.  
  88. /*---具体的脚步设置---*/
  89. .g-footer{
  90.     background:#20B176;
  91. }
  92. .f-row-2{
  93.     min-height: 2rem;
  94.     line-height: 2rem;
  95.     border-top:0.1rem solid #fff;
  96. }
  97. .f-row-2 span{
  98.     padding:0 0.2rem;
  99.     font-size:1rem;
  100.     color:#fff;
  101. }
  102. .f-row-2 span:nth-child(5){
  103.     padding-right:0.5rem;
  104.     border-right:0.1rem solid #fff;
  105. }
  106.  
  107. .f-row-1{
  108.     padding:1rem 0;
  109.     margin:0 auto;
  110.     min-height: 11rem;
  111. }
  112. .f-row-1>.w-80{
  113.     display:flex;
  114.     flex-wrap:nowrap;
  115.     font-size: 1rem;
  116. }
  117. .f-row-1 h5{
  118.     font-size: 1.5rem;
  119.     color:#fff;
  120. }
  121. .f-row-1 a{
  122.     padding:0 1rem;
  123.     color:#fff;
  124. }
  125. .f-cess-1,.f-cess-2,.f-cess-3{
  126.     position:relative;
  127.     margin:;
  128.     /*border:0.1rem solid #ff0000;*/
  129. }
  130. .f-cess-1,.f-cess-2{
  131.     width:40%;
  132. }
  133. .f-cess-3{
  134.     width:20%;
  135.     text-align:right;
  136.     overflow: hidden;
  137. }
  138. .f-cess-1 ul{
  139.     position: absolute;
  140.     bottom:;
  141.     left:;
  142.     /*border:0.1rem solid #ff0000;*/
  143. }
  144. .f-cess-2 ul{
  145.     position: absolute;
  146.     bottom:;
  147.     left:;
  148. }
  149. .f-cess-1 li{
  150.     margin:1rem 0 0 -1rem;
  151.     /*用于撑开链接的行高和去掉默认的左边10px间隙*/
  152. }
  153. .f-cess-2 li{
  154.     margin:1rem 1rem 0 -1rem;
  155. }
  156. .f-cess-1 li:first-child{
  157.     border-right:0.1rem solid #fff;
  158. }
  159. .f-cess-1 li:nth-child(2){
  160.     border-right:0.1rem solid #fff;
  161. }
  162.  
  163. /*---公用css调用---*/
  164. .w-100{
  165.     width:100%;
  166.  
  167. }
  168. .w-80{
  169.     width:80%;
  170.     margin:0 auto;
  171.     /*border:0.1rem solid #ff0000;*/
  172. }
  173. .float-right{
  174.     float:right;
  175. }
  176. .ta-center{
  177.     text-align: center;
  178. }
  179. .ta-right{
  180.     text-align: right;
  181. }

友情链接的模块就比较简单的还原了（注意鼠标手势，和hover效果我还没弄上去）

  1.     <div class="c-cell-5">
  2.         <div class="w-80">
  3.             <a href="" class=" ta-center" style="color:black"><h4>友情链接</h4></a>
  4.             <ul>
  5.                 <li>
  6.                     <a href=""><span>&bull;&ensp;</span>手机软件</a>
  7.                 </li>
  8.                 <li>
  9.                     <a href=""><span>&bull;&ensp;</span>教师招聘</a>
  10.                 </li>
  11.                 <li>
  12.                     <a href=""><span>&bull;&ensp;</span>找工作<span>&emsp;</span></a>
  13.                 </li>
  14.                 <li>
  15.                     <a href=""><span>&bull;&ensp;</span>手机软件</a>
  16.                 </li>
  17.                 <li>
  18.                     <a href=""><span>&bull;&ensp;</span>教师招聘</a>
  19.                 </li>
  20.                 <li>
  21.                     <a href=""><span>&bull;&ensp;</span>找工作<span>&emsp;</span></a>
  22.                 </li>
  23.                 <li>
  24.                     <a href=""><span>&bull;&ensp;</span>手机软件</a>
  25.                 </li>
  26.                 <li>
  27.                     <a href=""><span>&bull;&ensp;</span>教师招聘</a>
  28.                 </li>
  29.                 <li>
  30.                     <a href=""><span>&bull;&ensp;</span>找工作<span>&emsp;</span></a>
  31.                 </li>
  32.                 <li>
  33.                     <a href=""><span>&bull;&ensp;</span>手机软件</a>
  34.                 </li>
  35.                 <li>
  36.                     <a href=""><span>&bull;&ensp;</span>教师招聘</a>
  37.                 </li>
  38.                 <li>
  39.                     <a href=""><span>&bull;&ensp;</span>找工作<span>&emsp;</span></a>
  40.                 </li>
  41.                 <li>
  42.                     <a href=""><span>&bull;&ensp;</span>手机软件</a>
  43.                 </li>
  44.                 <li>
  45.                     <a href=""><span>&bull;&ensp;</span>教师招聘</a>
  46.                 </li>
  47.                 <li>
  48.                     <a href=""><span>&bull;&ensp;</span>找工作<span>&emsp;</span></a>
  49.                 </li>
  50.                 <li>
  51.                     <a href=""><span>&bull;&ensp;</span>手机软件</a>
  52.                 </li>
  53.                 <li>
  54.                     <a href=""><span>&bull;&ensp;</span>教师招聘</a>
  55.                 </li>
  56.                 <li>
  57.                     <a href=""><span>&bull;&ensp;</span>找工作<span>&emsp;</span></a>
  58.                 </li>
  59.                 <li>
  60.                     <a href=""><span>&bull;&ensp;</span>手机软件</a>
  61.                 </li>
  62.                 <li>
  63.                     <a href=""><span>&bull;&ensp;</span>教师招聘</a>
  64.                 </li>
  65.                 <li>
  66.                     <a href=""><span>&bull;&ensp;</span>找工作<span>&emsp;</span></a>
  67.                 </li>
  68.                 <li>
  69.                     <a href=""><span>&bull;&ensp;</span>手机软件</a>
  70.                 </li>
  71.                 <li>
  72.                     <a href=""><span>&bull;&ensp;</span>教师招聘</a>
  73.                 </li>
  74.                 <li>
  75.                     <a href=""><span>&bull;&ensp;</span>找工作<span>&emsp;</span></a>
  76.                 </li>
  77.  
  78.             </ul>
  79.         </div>
  80.     </div>
  1. .c-cell-5 li{
  2.     margin:1rem 2rem 1rem 0;
  3.     /*border:0.1rem solid #ff0000;*/
  4. }
  5. .c-cell-5 li a{
  6.     color:#989898;
  7. }

其他内容块，我都是使用原生html+css实现的。

  1.     <div class="c-cell-1">
  2.         <div class="w-80">
  3.             <div class="avator">
  4.                 <div class="morohology-3">
  5.                     <img src="img/test8-1/rocket.png">
  6.                     <h4><strong>高效</strong></h4>
  7.                     <p>将五到七年的成长时间，缩短到一年到三年</p>
  8.                 </div>
  9.                 <div class="morohology-3">
  10.                     <img src="img/test8-1/book.png">
  11.                     <h4><strong>规范</strong></h4>
  12.                     <p>标准的实战教程，不会走弯路</p>
  13.                 </div>
  14.                 <div class="morohology-3">
  15.                     <img src="img/test8-1/connection.png">
  16.                     <h4><strong>人脉</strong></h4>
  17.                     <p class="">同班好友，同院学长，技术大师，入学就混入职脉圈，为以后铺平道路。</p>
  18.                 </div>
  19.                 <div class="morohology-3 c-title-3">
  20.                     <span class="c-title-4">
  21.                         <span class="glyphicon glyphicon-user color20B">12400</span>
  22.                         <p>累计在线学习人数</p>
  23.                         <span class="glyphicon glyphicon-user color20B">12400</span>
  24.                         <p>学员已经找到满意工作</p>
  25.                     </span>
  26.  
  27.                 </div>
  28.             </div>
  29.  
  30.         </div>
  31.     </div>
  1. .c-cell-1{
  2.  
  3. }
  4. .c-cell-1 img{
  5.     max-width: 2.5rem;
  6.     max-height: 2.5rem;
  7. }
  8. .color20B{
  9.     color:#20B176;
  10. }
  11. .c-title-3{
  12.     border-left:0.1rem dashed #989898;
  13. }
  14. .c-title-4{
  15.     position: absolute;
  16.     top: 50%;
  17.     left: 50%;
  18.     transform: translate(-50%,-50%);
  19. }
  1.  <div class="c-cell-2">
  2.         <div class="w-80">
  3.             <a href="" class="ta-center c-title"><h4>如何学习</h4></a>
  4.             <div class="avator-1">
  5.                 <div class="morohology-4">
  6.                     <span class="list-1 float-left">1</span><span class="inline-block float-left">匹配你现在的个人情况寻找适合自己的岗位</span>
  7.                     <img src="img/test8-1/triangle1.png" class="list-2 inline-block float-left">
  8.                 </div>
  9.                 <div class="morohology-4">
  10.                     <span class="list-1">2</span><span class="inline-block">匹配你现在的个人情况寻找适合自己的岗位</span>
  11.                     <img src="img/test8-1/triangle1.png" class="list-2 inline-block">
  12.                 </div>
  13.                 <div class="morohology-4">
  14.                     <span class="list-1">3</span><span class="inline-block">匹配你现在的个人情况寻找适合自己的岗位</span>
  15.                     <img src="img/test8-1/triangle1.png" class="list-2 inline-block">
  16.                 </div>
  17.                 <div class="morohology-4">
  18.                     <span class="list-1">4</span><span class="inline-block">匹配你现在的个人情况寻找适合自己的岗位</span>
  19.                     <img src="img/test8-1/triangle1.png" class="list-2 inline-block">
  20.                 </div>
  21.                 <div class="morohology-4">
  22.                     <span class="list-1">5</span><span class="inline-block">匹配你现在的个人情况寻找适合自己的岗位</span>
  23.                     <img src="img/test8-1/triangle1.png" class="list-2 inline-block">
  24.                 </div>
  25.                 <div class="morohology-4">
  26.                     <span class="list-1">6</span><span class="inline-block">匹配你现在的个人情况寻找适合自己的岗位</span>
  27.                     <img src="img/test8-1/triangle1.png" class="list-2 inline-block">
  28.                 </div>
  29.                 <div class="morohology-4">
  30.                     <span class="list-1">7</span><span class="inline-block">匹配你现在的个人情况寻找适合自己的岗位</span>
  31.                     <img src="img/test8-1/triangle1.png" class="list-2 inline-block">
  32.                 </div>
  33.                 <div class="morohology-4">
  34.                     <span class="list-1">8</span><span class="inline-block">匹配你现在的个人情况寻找适合自己的岗位</span>
  35.                     <img src="img/test8-1/triangle1.png" class="list-2 inline-block">
  36.                 </div>
  37.             </div>
  38.  
  39.         </div>
  40.     </div>
  1. .c-cell-2{
  2.     min-height: 25rem;
  3. }
  4. .list-1{
  5.     display:inline-block;
  6.     padding:2rem;
  7.     background:url("../img/test8-1/roundness.png") no-repeat 50% 50%;
  8.     background-size: contain;
  9.     font-size:2rem;
  10.     color:#20B176;
  11. }
  12. .list-2{
  13.     display:inline-block;
  14.     padding:0.5rem;
  15.     background:url("../img/test8-1/triangle3.png") no-repeat 50% 50%;
  16.     background-size: contain;
  17. }
  18. .inline-block{
  19.     display: inline-block;
  20. }
  21. .morohology-4{
  22.     position:relative;
  23.     /*flex: 0 0 24%;*/
  24.     float:left;
  25.     width:23%;
  26.     margin:1.5rem 1rem 1.5rem 0;
  27.     display:flex;
  28.     justify-content: center;
  29.     align-items: center;
  30.     /*padding:2rem 5rem 2rem 5rem;*/
  31.     /*border:0.1rem solid #ff0000;*/
  32. }
  33. .float-left{
  34.     float:left;
  35. }
  36. .avator-1{
  37.     overflow: hidden;
  38. }
  1. <div class="c-cell-3">
  2.         <div class="w-80">
  3.             <a href="" class="ta-center c-title"><h4>优秀学员展示</h4></a>
  4.             <div class="avator">
  5.                 <div class="morohology-3 min-height bgcolorfff">
  6.                     <img src="img/test8-1/Avatar3.png">
  7.                     <h4>技术顾问：罗大佑</h4>
  8.                     <p>百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
  9.                 </div>
  10.                 <div class="morohology-3 min-height bgcolorfff">
  11.                     <img src="img/test8-1/Avatar2.png">
  12.                     <h4>技术顾问：罗大佑</h4>
  13.                     <p>百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
  14.                 </div>
  15.                 <div class="morohology-3 min-height bgcolorfff">
  16.                     <img src="img/test8-1/Avatar.png">
  17.                     <h4>技术顾问：罗大佑</h4>
  18.                     <p>百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
  19.                 </div>
  20.                 <div class="morohology-3 min-height bgcolorfff">
  21.                     <img src="img/test8-1/Avatar4.png">
  22.                     <h4>技术顾问：罗大佑</h4>
  23.                     <p>百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
  24.                 </div>
  25.             </div>
  26.             <div class="ta-center">
  27.                 <span class="c-title-2">&bull;</span><span class="c-title-2">&bull;</span>
  28.                 <span class="c-title-2">&bull;</span><span class="c-title-2">&bull;</span>
  29.             </div>
  30.         </div>
  31.  
  32.     </div>
  1. .c-cell-3{
  2.     min-height: 25rem;
  3. }
  4. .avator{
  5.  
  6.     display: flex;
  7.     justify-content: space-around;
  8.     overflow: hidden;
  9. }
  10. .morohology-3{
  11.     position: relative;
  12.     /*width:20%;*/
  13.     flex: 0 0 20%;
  14.     padding:1rem;
  15.     display:flex;
  16.     flex-direction: column;
  17.     align-items: center;
  18. }
  19. .min-height{
  20.     min-height: 25rem;
  21. }
  22. .bgcolorfff{
  23.     background: #fff;
  24. }
  25. .morohology-3>p{
  26.     color:#989898;
  27. }
  28. .c-title-2{
  29.     font-size:5rem;
  30. }
  1. <div class="c-cell-4">
  2.         <div class="w-80">
  3.             <a href="" class="ta-center c-title"><h4>战略合作企业</h4></a>
  4.             <div class="ta-center">
  5.                 <img src="img/test8-1/alibaba.jpg">
  6.                 <img src="img/test8-1/jinshanyun.jpg">
  7.                 <img src="img/test8-1/huanxin.jpg">
  8.                 <img src="img/test8-1/qiniu.jpg">
  9.             </div>
  10.  
  11.         </div>
  12.  
  13.     </div>
  1. .c-cell-4 img{
  2.     max-width: 15rem;
  3.     margin:2rem 0;
  4.     padding:2rem;
  5.     background:#fff;
  6. }
  1. .c-cell-5 li{
  2.     margin:1rem 2rem 1rem 0;
  3.     /*border:0.1rem solid #ff0000;*/
  4. }
  5. .c-cell-5 li a{
  6.     color:#989898;
  7. }
  8. .c-cell-5{
  9.     background:#fff;
  10.  
  11. }
  12. .c-title{
  13.     color:black;
  14.     cursor:pointer;
  15. }

这里主要分析一下：html+css布局中，

高效模块含有flex的column内嵌套postion定位

如何学习模块flex布局

优秀学员这块模块的代码在c-cell-1中得到了重用。

明天尝试加入bootstrap栅格系统，做对比

pc端的企业网站（IT修真院test8）详解1-2的更多相关文章

  1. pc端的企业网站（IT修真院test8）详解1-1

    这任务需求我们使用推特的前端框架bootstrap来实现.先放psd图. 上传这些图片也蛮大的.为此我使用office picture manager压缩了图片. 方法:alt+p+o,然后tab+下 ...

  2. pc端的企业网站（IT修真院test8）详解1-3

    一,base.css基础样式表的意义 我昨天,整理了一下代码规范. 发现现在这个程度的页面还原.有必要创建一个规范的base.css库和framework.css库 而且也要为日后的工作整理一些常用的 ...

  3. pc端的企业网站（IT修真院test9）详解一个响应式完成的pc端项目

    一:引入bootstrap框架 昨天一直被bootstrap栅格系统折磨. why? 我本来想一边码字,一边学习栅格布局的.but不成功.这时我头脑已经昏了. 下午,我查看了bootstrap的官网, ...

  4. pc端的企业网站（IT修真院test8）详解1-4

    今天完成的事情:(1,伪元素:before,:after的使用.2.table的使用(collapse的使用)3rgba的高级运用) 今天我主要完成test8-3的页面. header和footer都 ...

  5. VS2010 Chart控件（一）Chart控件在ASP.NET网站中的应用示例详解（C#语言）

    步骤如下: 1. Chart控件(一)Chart控件在ASP.NET网站中的应用示例详解(C#语言)" title="VS2010 Chart控件(一)Chart控件在ASP.NE ...

  6. [转帖]PC虚拟化主流：KVM、XEN、OpenVZ详解

    PC虚拟化主流:KVM.XEN.OpenVZ详解 https://zhuanlan.zhihu.com/p/90920566 1.pc虚拟化——KVM KVM是完整的硬件虚拟化,可以在Windows ...

  7. 移动端开发touchstart，touchmove，touchend事件详解和项目

    移动端开发touchstart,touchmove,touchend事件详解和项目 最近在做移动端的开发,在一个“服务商管理”页面使用到了触摸事件"touchstart",&quo ...

  8. 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

  9. 全网最详细的PLSQL Developer + Oracle client的客户端 或者 PLSQL Developer + Oracle server服务端的下载与安装过程（图文详解）

    不多说,直接上干货! 环境说明: 本地没有安装Oracle服务端,oracle服务端64位,是远程连接,因此本地配置PLSQL Developer64位. Oracle database使用在本机部署 ...

随机推荐

  1. Java之进程与线程

    一.进程 二.线程 1.定义及特点 1)[定义]线程是一个进程内部的一条执行路径,Java虚拟机允许应用程序并发地运行多个执行路径 是系统独立调度和分派[CPU]的基本单位 2)特点 进程中执行运算的 ...

  2. Java IO流--练习2

    1)写一个Java程序,输入3个整数,并求出三个数的最大数和最小数 代码: package 第十二章IO流; import java.io.BufferedReader; import java.io ...

  3. index.js:13 Uncaught TypeError: Cannot read property 'split' of undefined

    使用 webpack 编译 Vue 项目时出现报错: index.js:13 Uncaught TypeError: Cannot read property 'split' of undefined ...

  4. 深入探索C++对象模型(五)

    构造.解构.拷贝语意学(Semantics of Construction,Destruction, and Copy) 一般而言,class的data member应该被初始化,并且只在constr ...

  5. Web前端的路该怎么走？很迷茫

    “路漫漫其修远兮,吾将上下而求索”,这句出自<离骚>. 虽然端午已过,但是还是不影响一个程序员想表(zhuang)达(boy)自己此刻心情的冲动. 偶然路过同事旁边,不(tou)小(kan ...

  6. Lucene全文搜索之分词器：使用IK Analyzer中文分词器（修改IK Analyzer源码使其支持lucene5.5.x）

    注意:基于lucene5.5.x版本 一.简单介绍下IK Analyzer IK Analyzer是linliangyi2007的作品,再此表示感谢,他的博客地址:http://linliangyi2 ...

  7. Hql没有limit，替换方案

    在HQL+MYSQL中不能直接在查询语句中使用LIMIT进行检索,正确方法为: String hql = "from User where id=? order by addDate des ...

  8. 编写一个简单的Web Server

    编写一个简单的Web Server其实是轻而易举的.如果我们只是想托管一些HTML页面,我们可以这么实现: 在VS2013中创建一个C# 控制台程序 编写一个字符串扩展方法类,主要用于在URL中截取文 ...

  9. openvpn配置注意事项

    1.安装VPN安装结束后,需要配置CONFIG文件夹服务端及客户端的配置文件,建议从sample文件里直接拷贝修改,网上的一些案例会引起无法启动的问题,没仔细研究过是哪里错了,反正最后从sample里 ...

  10. SQL 调用存储过程

    --1调用存储过程 exec 存储过程名 参数 --2当表使用 select a.*,b.* from tb b inner join ( select * from openrowset('sqlo ...