最近在新公司的一些HTML学习

  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   }

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

css

 

  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;" style="background-image: url(image/search.png); float:right;background-repeat: no-repeat; width:20px;height: 20px;border:none ;font-family: color:#FFFFFF" ;> -->
 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-9u4e00-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() {                    //注释1
204             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().html
216         }
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>

本文由金沙官网线上发布于Web前端,转载请注明出处:最近在新公司的一些HTML学习

您可能还会对下面的文章感兴趣: