你的位置:首页 > 网页设计

[网页设计]最近在新公司的一些HTML学习


还是先把代码贴在这  后期再写感想

 1 <!DOCTYPE html> 2 <head> 3 <meta http-equiv="x-ua-compatible" content="IE=9" > 4 <html lang="en"> 5 <meta charset="UTF-8"> 6 <title>客户端</title> 7 <LINK href="zhcss.css" type=text/css rel=stylesheet> 8 </head> 9 <body> 10   <div class="leftsidebar_box" id="content"> 11       <!-- 头像框 --> 12       <div class="tx_box"> 13         <div class="top_box"> 14          <div class="to1"> 15           <img class="to" alt="aaa" src="image/tx.png"> 16           <div style="margin-left:40px;margin-top:-10px;" > 17             <p style="font-family:'雅黑';font-size:10px;"><b>OneSimple</b></p> 18              <p style="font-family:'宋体';font-size:10px;">在线</p> 19           </div> 20          </div> 21         </div> 22       </div> 23       <!-- 搜索框 -->  24       <div class="outside_box"> 25         <div class="search_div"> 26         <form onsubmit="highlight(this.s.value);return false;"> 27           <input id="kw" onKeyup="getContent(this);" style=" width: 93%;border:none; padding-left: 6px;" type="text" value="请输入搜索内容"onfocus="this.value=''" onblur="if(this.value==''){this.value='请输入搜索内容'}" /> 28           <!-- <input type="" value="&nbsp;" ;> --> 29           <div id="append"></div> 30         </form>   31         </div> 32       </div> 33       <!-- 最近使用 --> 34       <div class="div_b"> 35         <div style=" width:95%;text-align:center;font-size:15px;z-index: 0;"><b>最近使用</b></div> 36           <div class="zjsy_box">   37             <DIV class="bottom"> 38             </DIV> 39           </div> 40       </div> 41       <!-- 菜单栏 --> 42       <div class="div_c"> 43         <div class="inside_box" id="inside_box"></div> 44       </div> 45   </div>  46 <script src="jquery.min.js"></script> 47 <script> 48  49   $('#queding').click(function(){ 50     var arr = [$('#select').val(),$('#value').val()]; 51     window.location="skp:ruby_queding"; 52   }); 53   var divId = new Array;      //定义数组进行工具id的排列 54   var testArr2 = new Array;    //工具的名称数组 55   var zjsyArr = new Array;    //定义最近使用的 56   var zjsyArr2= new Array; 57   var ss=0; 58   var box = document.getElementsByClassName("inside_box")[0]; 59     box.clsssName="inside_box"; 60   //动态数组加载内容 只需加载 61   //大功能的名称--name   62   //工具名称--value 63   //功具指向地址--dizhi 64   //图标无需在数组中加载 但需要统一规格20x20px;并且存储格式必须为.png 65   var data = [ 66   {  id:"1", 67     name:"测绘工具", 68     value:["简单","加载","删除","时候就","真刚性","花园"], 69     dizhi:["https://1www.baidu.com1/","https://1www.baidu.com2/","https://1www.baidu.com3/","https://1www.baidu.com4/","https://1www.baidu.com5/","https://1www.baidu.com6/"]}, 70   {  id:"2", 71     name:"画图工具", 72     value:["简单1","加载1","删除1","时候就1","真刚性1","花园1"], 73     dizhi:["https://2www.baidu.com1/","https://2www.baidu.com2/","https://2www.baidu.com3/","https://2www.baidu.com4/","2https://www.baidu.com5/","https://2www.baidu.com6/"]}, 74   {  id:"3", 75     name:"边角工具", 76     value:["简单2","加载2","删除2","时候就2","真刚性2","花园2"], 77     dizhi:["https://3www.baidu.com1/","https://3www.baidu.com2/","https://3www.baidu.com3/","https://3www.baidu.com4/","https://3www.baidu.com5/","https://3www.baidu.com6/"]}, 78   {  id:"4", 79     name:"涂料红酒", 80     value:["简单3","加载3","删除3","时候就3","真刚性3","花园3"], 81     dizhi:["4F:/cj/jm/UI/zh.html1","4F:/cj/jm/UI/zh.html2","4F:/cj/jm/UI/zh.html3","4F:/cj/jm/UI/zh.html4","4F:/cj/jm/UI/zh.html5","4F:/cj/jm/UI/zh.html6"]}, 82   ]; 83   function contains(arr, obj) { 84     var i = arr.length; 85       while (i--) { 86       if (arr[i] == obj) { 87        return true; 88       } 89     } 90     return false; 91   } 92   data.forEach(function(e,i){ 93     var button = document.createElement("button"); 94     button.className="left_button"; 95     button.innerHTML = e.name; 96     button.id = e.id;  //对功能块button进行id命名             97     var zjsy = document.getElementsByClassName("bottom")[0];  // 最近使用的生成部件 98     zjsy.clsssName="bottom"; 99     button.onclick = function(){100       for(var divIdIndex = 0;divIdIndex<divId.length;divIdIndex++)101       {102         var listId = document.getElementById(divId[divIdIndex]);103         listId.style.display="none";104       }                            // $("list"+this.id).slideToggle();105       var listobj = document.getElementById("list"+this.id);  //控制菜单栏的子目录显示与关闭106         if(listobj.style.display == "block"){107           listobj.style.display = "none";108         }else if(listobj.style.display=="none"){109           listobj.style.display = "block";110         }111      }112     var div1 = document.createElement("div");113     div1.className="div_d";114     div1.id = "list"+ e.id;115     divId.push(div1.id);116     div1.style.display = "none";117     for(var j in e.value){118       var div2 = document.createElement("div");119       div2.setAttribute("id",div1.id+"gn"+j);120       div2.className="picture";121       var pic = e.value[j];                //对图片名称进行赋值,让它进行名称匹配,更为精准。//alert(j); 122       for (var i in e.dizhi) {              // alert(e.dizhi[i]);123         // div2.innerHTML = "<a href= '"+e.dizhi[i]+"' target=_blank>"+"<img src="+"image/"+pic+".png>"+e.value[j]+"</a>"; //alert(pic);//alert(div2.innerHTML);124         div2.innerHTML ="<img src="+"image/"+pic+".png>"+e.value[j];125       }126       div2.onclick=function(){127         //alert(div2.id);128         var div3 = document.createElement("div");129           div3.className="content";130           div3.setAttribute("name","zjsydiv");131         var jj;132         var idIndex = this.id.split("gn");133         //alert(idIndex);134         var idIndex1 = idIndex[idIndex.length-1];     //idIndex1为数组坐标 135         var pic = e.value[idIndex1];136         //alert(e.dizhi[idIndex1]);             //对图片名称进行赋值,让它进行名称匹配,更为精准。 137           // testArr2.push("<a href= '"+e.dizhi[idIndex1]+"' target=_blank>"+"<img src="+"image/"+pic+".png>"+e.value[idIndex1]+"</a>");//alert(testArr2);138           testArr2.push("<img src="+"image/"+pic+".png>"+e.value[idIndex1]);139           var res =0;140           var res1 =1;141           var res2=2;142           for (var i=0; i<testArr2.length; i++) {143               var zjsy1=testArr2[i];144                 jj = e.value[i];145           }146           var zjsyshuzu=contains(zjsyArr, zjsy1); // alert(zjsyshuzu); 判断是否重复 true则不添加 false则添加数组147           if (zjsyshuzu==false) {148             zjsyArr.push(zjsy1);149             div3.innerHTML =zjsy1;150             zjsy.appendChild(div3);151           }152           for (var h in zjsyArr){153             div3.setAttribute("id",h);154             div3.onclick=function(){155               var m = this.id;156               jj = zjsyArr[m]157               var jj1 = jj.replace(/[^1-9\u4e00-\u9fa5]/ig,"");  //匹配中文字符与阿拉伯数字158               window.location="skp:ruby_div3@"+jj1;159             }160           }161         ss = e.value[idIndex1];    //弹出输出功能名 div2 中162         window.location="skp:ruby_div2@"+ss;163       }164       div1.appendChild(div2);    //div2工具生成栏 165     }166     box.appendChild(button);   //button为大功能生成栏167     box.appendChild(div1);     //div1为一个大的工具栏 其中包含工具和大功能名称  168   });169   $(document).ready(function() {170     $(document).keydown(function(e) {171       e = e || window.event;172       var keycode = e.which ? e.which : e.keyCode;173       if (keycode == 38) {          //上移键174         if (jQuery.trim($("#append").html()) == "") {    //trim()此方法为去除所选定的字符串左右的空格  175           return ;176         }177         movePrev();178       }179       else if (keycode == 40) {        //下移键180         if (jQuery.trim($("#append").html()) == "") {181           return;182         }183         $("#kw").blur();184         if ($(".item").hasClass("addbg")) {185           moveNext();186         } else {187           $(".item").removeClass('addbg').eq(0).addClass('addbg');188         }189 190       } else if (keycode == 13) {191             dojob();192       }193     });194     var movePrev = function() {195      $("#kw").blur();196       var index = $(".addbg").prevAll().length;197       if (index == 0) {198         $(".item").removeClass('addbg').eq($(".item").length - 1).addClass('addbg');199       } else {200         $(".item").removeClass('addbg').eq(index - 1).addClass('addbg');201       }202     }203     var moveNext = function() {          //注释1204       var index = $(".addbg").prevAll().length;205         if (index == $(".item").length - 1) {206           $(".item").removeClass('addbg').eq(0).addClass('addbg');207         } else {208           $(".item").removeClass('addbg').eq(index + 1).addClass('addbg');209         }210     }211     var dojob = function() {212       $("#kw").blur();213       var value = $(".addbg").text();214       $("#kw").val(value);("");215       $("#append").hide().html216     }217   });218   function getContent(obj) {          //获取搜索框输入的值219     var kw = jQuery.trim($(obj).val());220     if (kw == "") {221       $("#append").hide().html("");222       return false;223     }224     var html1 = "";225     for(var j = 0;j<data.length;j++){    //进行页面的匹配226       for (var i = 0; i < data[j].value.length; i++) {227         if (data[j].value[i].indexOf(kw) >= 0) {228           html1 = html1 + "<div class='item' onmouseenter='getFocus(this)' onClick='getCon(this);'>" +data[j].value[i] + "</div>"    //匹配成功下拉框显示内容 229         }230       }231     }232     if (html1 != "") {233         $("#append").show().html(html1);234     } else {235         $("#append").hide().html("");236     }237   }238 239   function getFocus(obj) {240     $(".item").removeClass("addbg");241     $(obj).addClass("addbg");242   }243   function getCon(obj) {     //点击某个匹配值时 下拉框掩藏244     var value = $(obj).text();245     $("#kw").val(value);246     $("#append").hide().html("");247     window.location="skp:ruby_divsousuo@"+value;248   }249 </script>250 </body>251 </html>

css

 1 html, body, div, span, applet, object, iframe, 2 h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 a, abbr, acronym, address, big, cite, code, 4 del, dfn, em, img, ins, kbd, q, s, samp, 5 small, strike, strong, sub, sup, tt, var, 6 b, u, i, center, 7 dl, dt, dd, ol, ul, li, 8 fieldset, form, label, legend, 9 table, caption, tbody, tfoot, thead, tr, th, td, 10 article, aside, canvas, details, embed, 11 figure, figcaption, footer, header, hgroup, 12 menu, nav, output, ruby, section, summary, 13 time, mark, audio, video { 14 margin: 0; 15 padding: 0; 16 border: 0; 17 font-size: 100%; 18 font: inherit; 19 vertical-align: baseline; 20 } 21 /* HTML5 display-role reset for older browsers */ 22 article, aside, details, figcaption, figure, 23 footer, header, hgroup, menu, nav, section { 24 display: block; 25 } 26 body { 27 line-height: 1; 28 } 29 ol, ul { 30 list-style: none; 31 } 32 html{ 33  background-color: #FFEFD5;  34 } 35 blockquote, q { 36 quotes: none; 37 } 38 blockquote:before, blockquote:after, 39 q:before, q:after { 40 content: ''; 41 content: none; 42 } 43 table { 44 border-collapse: collapse; 45 border-spacing: 0; 46 }  47  48  49 /* 50 ::-webkit-scrollar{ 51  width: 20px; 52  53 } 54  55 ::-webkit-scrollar-track-piece{ 56  background:#FFFFFF; 57  -webkit-border-radius:6px; 58 } 59  60 ::-webkit-scrollar-thumb:vertical{ 61  background-color: black; 62  -webkit-border-radius:6px; 63 }*/ 64  65  66 ul,ol,li{list-style:none;} 67 input,button{ 68  margin:0; 69  vertical-align:middle; 70 } 71  72  73  74 {font-family:'宋体';} 75 dl,dt,dd{display:block;margin:0;} 76 a{text-decoration:none;} 77  78 body{ 79   margin:0; 80   padding:0; 81   overflow-x:hidden; 82   font-family:Arial, Helvetica, sans-serif;  83   color:#000000; 84   margin:0 auto; 85 } 86  87 table{ 88   border-collapse:collapse; 89   border-spacing:0; 90 } 91  92 a{ 93  color:#333333 ; 94  outline:none 95  text-decoration:none; 96 } 97  98 a:hover{ 99  color:#00FFFF; 100  text-decoration:underline;101 }102 103 /*头像框*/104 .tx_box{105   /*padding: 8px;*/106   padding-top: 15px;107   border-style: solid;108   background-color: #FFEFD5;109   border-color: #A9A9A9;110   border-width: 1px;111 }112 113 .top_box{114   width: 85px;115   height: 50px;116   padding: 2px; 117 }118 119 .to{120   width: 53px;121   height: 50px;122   border-radius: 50%;123   position: absolute;124   top: 50%;125   left: 50%; 126   margin-left: -40px; 127   margin-top: -25px;128 }129 130 /*控制头像框的文字*/131 .to1 { 132   /*width: 20px; 133   height: 20px; */134   /*padding-left: 60px; */135   padding-top: 25px;136   /* border-radius: 50%; */137   padding-left: 17px;  138   position: relative; 139 } 140 141 /* 左边框box*/142 .leftsidebar_box{143   position:fixed;144   width:97.5%;145   height:99%;146   overflow: auto;147   /*overflow:visible !important;*/148   /*position:fixed;*/149   /*border-width: 5px;*/150   padding: 2px;151   border-style: solid;152   border-color: #A9A9A9;153   border-width: 3px;154  /*  float: right;*/155 156 }157 158 /*搜索外边框*/159 .outside_box{160 /* padding: 1px;161    top: 125px;162    right:2px;163    left:1px;164   padding-right: 3px;*/165   margin-top:2px; 166   position:absolute;167   padding: 1px;168   right: 2px;169   left: 2px;170   border-style: solid;171   background-color: #FFFFFF;172   border-color: #A9A9A9;173   border-width: 1px;174   /*width: 96%;*/175   z-index: 3;176 }177 178 /*搜索成功的字体*/179 .highlight{180  background:green;181  font-weight:bold;182  color:white;183 }184 185 .search_box{186   background-image: url(image/search.png);187   background-repeat: no-repeat ;188 }189 190 .search_div{191  192 }193 194 .lanmu {195  MARGIN: 0px auto; 196  width: auto;197  height: 50px;198 }199 200 .lanmu span.fr{ 201  float:right; 202  margin-right:12px; 203  margin-top:25px; 204  /*display:inline; */205 }206 207 /*上边框*/208 .mydpx .bottom {209  PADDING-TOP: 3px; 210  HEIGHT: 30px;211 }212 213 .zjsy_box{214   height: 100%;215   padding-bottom: 5px;216   border-style: solid;217   border-color: #A9A9A9;218   border-width: 1px;219   padding-top: 5px;220   padding-left:10px;221   padding-right: 8px;222   overflow: auto;223   background-color: #FFFFF4;224 }225 226 .content{ 227   width:90%; 228   height:25px; 229   float: left;230 }231 .content img{232  padding-top: 3px;233  width:20px; 234  height:20px;235 }236 237 .leftsidebar_box dt{238  /*左边文字*/239  padding-left:0px;240  padding-right:0px;241  background-repeat:no-repeat;242  background-position:10px center;243  position:relative;244  /*line-height:48px;*/245  cursor:pointer;246 }247 248 /*下拉框*/249 .leftsidebar_box dd{250  /*background-color:#FFFAFA;*/251  padding-left:1px;252 }253 254 /*下拉框文字*/255 .leftsidebar_box dd a{256  font-size: 15px;257  font-weight:bold;258  color:#696969;          /*银白色*/259  line-height:20px;260 }261 262 .leftsidebar_box dl dd:last-child{263  padding-bottom:10px;264 }265 266 /*最近使用外框*/267 .div_b {268    position:absolute;269    padding: 1px;270    top: 125px;271    right:2px;272    left:1px;273    height:60px;274    z-index: 1;275 }276 277 /*菜单栏的边框*/ 278 .div_c{279   /*margin: 1px;*/280   position:absolute;281   padding-top: 5px;282   padding: 2px;283   top: 215px;284   right:1px;285   left:0px;286   /*width:150px;*/287   288 }289 290 .left_button{291   width: 100%; 292   height: 31px;293   margin: 1px;294   /* border-radius: 15%;*/295   border-color:black;296   background-color:#FFFFFF;297 }298 299 .inside_box{300   /*border:none;*/301   height: 100%;302   padding-bottom: 5px;303   border-style: solid;304   border-color: #A9A9A9;305   border-width: 1px;306   padding-top: 5px;307   padding-left:8px;308   padding-right: 8px;309   310 }311 312 .div_d{313   /*border-radius: 10%;*/314   width :99%;315   /*width: 100px;*/316   height: 100px;317   border-style: solid;318   border-width: 1px;319   background-color:#FFFFF4;320   padding: 1px;321   margin-right: 10px;322   overflow: auto;323 }324 325 .picture{326   /* width:23px; 327   height:45px; 328   padding:1px;329   float: left;*/330   /*cursor:pointer;*/ 331   padding: 2px;332   margin: 1px;333   color:#000000;334   /*overflow:hidden;*/335   /*vertical-align:middle;*/336   /*font-weight:bold;*/337   font-size: 18px;338   width:90%; 339   height:25px; 340   float: left;341 }342 343 .picture img{344   /*width:20px; 345  height:25px;*/346 347  padding-top: 3px;348  width:20px; 349  height:20px;350 }351 352 .button1{353  margin-right:1px; 354  height: 31px;355  background-color:#C6E2FF;356 }357 358 .item {359   position:inherit;360   padding: 3px 5px;361   cursor: pointer;362   background-color: white;363  }364  365  .addbg {366   background: #99FFFF;367  }368  369  .first {370   border: solid #87A900 2px;371   width: 300px;372  }373  374  #append {375   border: solid #87A900 2px;376   border-top: 0;377   display: none;378  }