前端标签--js--css大致思路

html标签语言在块级和内联标签的基础上进行页面的设计，设计的时候主要是注意标签块间的距离位置等信息，设计盒子的浮动，盒子的位置，盒子之间的联系。

在设计网页之前一定要判断好该设计多少个盒子，什么样的模块该放在哪个盒子里面，各个盒子的位置，一个盒子能够包含多少。在制作时要用好浮动，必要是要使用好清除浮动，标签语言就是工具性的东西，很容易了解使用方法，但是重点在于知道什么时候判断出该使用哪种标签，该对标签进行什么样的属性分类，怎么调度适合他的css。

css设计时最主要的还是关注盒子的位置，盒子间的放置和关联，每个盒子包含了什么子盒子，一个大页面分为多少个大盒子多少个小盒子等等，了解了各个标签的使用方法，还有链接的使用，也会方便很多，样式方法也都是固定的，做出判断就能方便实用。

js是最重要的，记住语法之后，就要熟悉事件的绑定，在绑定事件之后判断好这个事件要做什么，还有会发什么什么样的情况来触发这个事件。

例如要给一个button绑定事件，令它点击后就可以隐藏一个盒子，就要找到这个button并且做好这个button和盒子的联系。查询很重要查询到标签才能做出一定的操作。

实例：

京东简易评论切换页面：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         *{
  8             margin: 0;
  9             padding: 0;
 10         }
 11         .head{
 12             width: 100%;
 13             height: 50px;
 14             background-color: #e0e0e0;
 15             border-bottom: 2px solid red;
 16 
 17         }
 18         .anniu{
 19             float: left;
 20             width: 100px;
 21             height: 100%;
 22         }
 23         .an_1{
 24             margin-top: 15px;
 25             margin-left:15px ;
 26         }
 27         .anniu_1{
 28             float: left;
 29             width: 100px;
 30             height: 100%;
 31             margin-left: 15px;
 32         }
 33         .anniu_2{
 34             float: left;
 35             width: 150px;
 36             height: 100%;
 37             margin-left: 15px;
 38         }
 39         .an_1:hover{
 40             color: red;
 41         }
 42         .con{
 43             clear: left;
 44         }
 45         .hide{
 46             display: none;
 47         }
 48         .yang{
 49             background-color: red;
 50         }
 51         .lok{
 52             color: white;
 53         }
 54         .lok:hover{
 55             color: white;
 56         }
 57         .as{
 58             color: black;
 59         }
 60     </style>
 61 </head>
 62 <body>
 63 <div class="head">
 64     <a class="as"href="javascript:void(0);"><div class="anniu item 0 yang"><p class="an_1 lok">商品介绍</p></div></a>
 65     <a class="as"href="javascript:void(0);"><div class="anniu_1 item 1"><p class="an_1">规格与包装</p></div></a>
 66     <a class="as"href="javascript:void(0);"><div class="anniu_1 item 2"><p class="an_1">售后保障</p></div></a>
 67     <a class="as"href="javascript:void(0);"><div class="anniu_2 item 3"><p class="an_1">商品评价(20+)</p></div></a>
 68     <a class="as"href="javascript:void(0);"><div class="anniu_2 item 4"><p class="an_1">本店好评商品</p></div></a>
 69 </div>
 70 <div class="0 con"><img src="http://wx1.sinaimg.cn/mw690/005B3dfxgy1fld0x7u7dhj30r80kptm7.jpg"></div>
 71 <div class="1 con hide"><img src="http://wx1.sinaimg.cn/mw690/005B3dfxgy1fld0xbkwanj30ri0kyjt8.jpg"></div>
 72 <div class="2 con hide"><img src="http://wx2.sinaimg.cn/mw690/005B3dfxgy1fld0xdzvjnj30r90l3778.jpg"></div>
 73 <div class="3 con hide"><img src="http://wx1.sinaimg.cn/mw690/005B3dfxgy1fld0xfzs6qj30r90l10uu.jpg"></div>
 74 <div class="4 con hide"><img src="http://wx3.sinaimg.cn/mw690/005B3dfxgy1fld0xi0t76j30r50l3wwq.jpg"></div>
 75 <script>
 76  ele_item=document.getElementsByClassName("item");
 77     for(i=0;i<ele_item.length;i++){
 78         ele_item[i].onclick=function () {
 79             bian=this.classList[2];
 80             for (k=0;k<ele_item.length;k++){
 81                 if (ele_item[k]!=this) {
 82                     ele_item[k].classList.remove("yang");
 83                     el_p=ele_item[k].getElementsByTagName('p')[0];
 84                     el_p.classList.remove("lok")
 85                 }
 86                 else {
 87                     this.classList.add('yang');
 88                     el_t=this.getElementsByTagName('p')[0];
 89                     el_t.classList.add("lok")
 90                 }
 91             }
 92 
 93             ele_con=document.getElementsByClassName('con');
 94             for (j=0;j<ele_con.length;j++){
 95                 if (ele_con[j].classList[0]==bian) {
 96                     ele_con[j].classList.remove("hide")
 97                 }
 98                     else {
 99                         ele_con[j].classList.add("hide")
100                     }
101                 }
102             }
103     }
104 </script>
105 </body>
106 </html>

京东简易切换实例

运用的代码很简单，熟悉循环，遍历时候进行事件的绑定，并在这个事件触发时候所要做出的行为做出判断。

实例2：

简单表格添加删除：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <link rel="stylesheet" href="dist/css/bootstrap.css">
  7     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
  8     <script src="dist/js/bootstrap.js"></script>
  9     <style>
 10         .bei{
 11             background-color: #9d9d9d;
 12             position: fixed;
 13             top:0;
 14             left:0;
 15             bottom: 0;
 16             right: 0;
 17             opacity: 0.5;
 18         }
 19         .tan{
 20             background-color: white;
 21              position: fixed;
 22             top:30%;
 23             left:30%;
 24             width: 500px;
 25             height: 300px;
 26             /*margin-left: 250px;*/
 27             /*margin-top: 150px;*/
 28 
 29         }
 30         .shu{
 31             margin-top: 20px;
 32             margin-left :20px;
 33         }
 34         .hide{
 35             display: none;
 36         }
 37     </style>
 38 </head>
 39 <body>
 40 
 41 <div class="row">
 42     <div class="col-md-6">
 43         <p class="xian" ><input type="button" value="添加"></p>
 44         <table class="table table-bordered table-hover" >
 45           <thead>
 46                  <tr>
 47                 <th>姓名</th>
 48                 <th>年龄</th>
 49                 <th>班级</th>
 50                 <th>操作</th>
 51             </tr>
 52           </thead>
 53           <tbody id="t1">
 54                     <tr>
 55                         <td>张三</td>
 56                         <td>12</td>
 57                         <td>s7</td>
 58                         <td>
 59                             <button class="del">删除</button>
 60                         </td>
 61                     </tr>
 62 
 63                     <tr>
 64                         <td>张三2</td>
 65                         <td>1223</td>
 66                         <td>s7</td>
 67                          <td>
 68                             <button class="del">删除</button>
 69                         </td>
 70                     </tr>
 71 
 72                     <tr>
 73                         <td>张三3</td>
 74                         <td>122</td>
 75                         <td>s7</td>
 76                          <td>
 77                             <button class="del">删除</button>
 78                         </td>
 79                     </tr>
 80 
 81           </tbody>
 82 
 83 </table>
 84     </div>
 85 </div>
 86 
 87 <div class="bei hide j"></div>
 88 <div class="tan hide j">
 89     <form action="">
 90     <p class="shu zl">姓名<input type="text"></p>
 91     <p class="shu zl">年龄<input type="text"></p>
 92     <p class="shu zl">班级<input type="text"></p>
 93     <input type="reset" value="确定" class="shu anq">
 94     <input type="button" value="取消" class="shu an">
 95         </form>
 96 </div>
 97 
 98 <script>
 99     var ele_an=document.getElementsByClassName("an")[0];
100     var ele_anx=document.getElementsByClassName("xian")[0];
101     var ele_c=document.getElementsByClassName("j");
102         ele_an.onclick=function () {
103             for (k=0;k<ele_c.length;k++){
104                 ele_c[k].classList.add("hide")
105         }
106     };
107     ele_anx.onclick=function () {
108         console.log(ele_anx);
109         for (o=0;o<ele_c.length;o++){
110             ele_c[o].classList.remove("hide")
111         }
112 
113     };
114     var ele_anq=document.getElementsByClassName("anq")[0];
115     ele_anq.onclick=function () {
116         var ele_zl=document.getElementsByClassName("zl");
117         var ele_tr=document.createElement("tr");
118         for (p=0;p<ele_zl.length;p++){
119             var zhi=ele_zl[p].children[0].value;
120             var ele_td=document.createElement("td");
121             ele_td.innerText=zhi;
122             ele_tr.appendChild(ele_td)
123         }
124         var ele_fu=document.getElementById('t1');
125         var ele_de=document.createElement("td");
126         var ele_bu=document.createElement("button");
127         ele_bu.classList.add("del");
128         ele_bu.innerText='删除';
129         ele_de.appendChild(ele_bu);
130         ele_tr.appendChild(ele_de);
131         ele_fu.appendChild(ele_tr);
132         ele_bu.onclick=function () {
133             var t1=document.getElementById("t1");   // 父节点
134           t1.removeChild(this.parentElement.parentElement)
135 
136         };
137         for (k=0;k<ele_c.length;k++) {
138             ele_c[k].classList.add("hide")
139         }
140     };
141      var eles=document.getElementsByClassName("del");
142     for(var i=0;i<eles.length;i++){
143         eles[i].onclick=function () {
144            // 父节点.removeChild(子节点)
145           var t1=document.getElementById("t1");   // 父节点
146           t1.removeChild(this.parentElement.parentElement)
147 
148         }
149 
150     }
151 </script>
152 
153 
154 </body>
155 </html>

简易表格添加删除

判断按钮触发的事件和将要进行的事情吗，还有代码进行的顺序。例如新添加的一行表格标签内容，虽然有class删除的属性，但是却无法进行这项操作，就是因为代码已经编译完成，我们又人为的添加了数据，所有编译完成后的网页并没有这项功能，所以我们就要在事件发生时将这个情况作出处理。

posted on 2017-11-13 18:20 Symoon_g 阅读(545) 评论(0) 编辑收藏举报