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.  </body>
  154.  </html>

简易表格添加删除

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

前端标签--js--css大致思路的更多相关文章

  1. 数字平滑 前端插件JS&CSS库

    CDN DEMO 拷贝可用: <!DOCTYPE html> <link rel="stylesheet" href="https://cdn.boot ...

  2. 史上前端面试最全知识点（附答案）---html & js & css

    史上前端面试最全知识点(附答案) 一.html & js & css 1.AMD和CMD是什么?它们的区别有哪些? AMD和CMD是二种模块定义规范.现在都使用模块化编程,AMD,异步 ...

  3. 后端数据中含有html标签和css样式，前端如何转译展示样式效果。

    后端含有html标签和css样式的数据: domain="<span style='color:red'>www.baidu.com</span>" (vu ...

  4. php有效的过滤html标签,js代码,css样式标签

    过滤html标签�php中太简单了,我们可以直接使用strip_tags函数来实现了,下面给各位整理了一些关于 strip_tags函数的例子. php过滤html的函数:strip_tags(str ...

  5. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  6. JS,CSS是前端，JAVA PHP ASP是后端，数据库是后端的处理对象,非代表前后底

    大海-mysql-oracle(529513481)  19:02:18 象我这边,前台都是php,而php做数据分析是不太理想的,做中间件没人力,难办 横瓜(601069289) 19:20:15  ...

  7. api日常总结：前端常用js函数和CSS常用技巧

    我的移动端media html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font- ...

  8. 压缩前端文件(html, css, js)

    1:原因 在写前端代码时, 因为要尽可能的适合阅读会加入许多注释, 空格等, 这些在开发时是必要的, 但当你要发布时, 就需要让代码更加精简, 精简压缩的同时也混淆了代码, 安全性也加强了, 可以说是 ...

  9. <!-- -->是HTML的注释标签js，css注释

    <!-- -->是HTML的注释标签 js,css:单行注释以 // 开头. 多行注释以 /* 开始,以 */ 结尾. web大作业(Vip视频解析) <!-- 这个网页是vip视频 ...

  10. [Yii2] 快速套模板，加载JS,CSS（HTML标签<base>）

    刚开始学,弄了好久,不知道怎么加载JS.CSS,以及怎么不加载YII2自带的模板!其实真的好简单! 补: 其实是我垃圾,YII2默认访问路径是WEB,所以把style文件放到web下就能加载! 首先把 ...

随机推荐

  1. css 两列布局中单列定宽单列自适应布局的6种思路

    前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...

  2. Javascript&Html-location对象

    Javascript&Html-location对象 location对应是BOM最有用的对象之一,她提供了当前窗口中加载的文档的信息,并提供了一些导航的功能.location对象有一个特别的 ...

  3. 《手把手教你学C语言》学习笔记（1）---C语言的特点

    学习C语言的原因,主要是需要使用C语言编程,我用故我学,应该是最主要的原因了. C语言的定位:C语言严格意义上只能算是中级语言,是面向过程编程语言的集大成者,虽然这种语言有很多的问题,但总体而言是瑕不 ...

  4. SaltStack 模块学习之拷贝master服务器上文件和目录到minion服务器

    一. cp.get_file实现从master端复制文件到minion服务器的文件中cp.get_file 1. 修改/etc/salt/master ,指定server 工作的根目录   file- ...

  5. 【linux】进程存储管理

    看<Linux高级程序设计>的笔记 设有一个hello的可执行文件 ①显示该文件的基本信息 ls hello -l ②文件基本情况 file hello ③列出文件的存储区域情况 size ...

  6. hdu 3639 有向图缩点+建反向图+搜索

    题意:给个有向图,每个人可以投票(可以投很多人,一次一票),但是一个人只能支持一人一次,支持可以传递,自己支持自己不算,被投支持最多的人. 开始想到缩点,然后搜索,问题是有一点想错了!以为支持按票数计 ...

  7. Codeforces Round #450 (Div. 2) C. Remove Extra One【*模拟链表/一个数比前面所有数大就是个record。删掉一个数,让record的个数尽量多。】

    C. Remove Extra One time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  8. SQLITE3 --详解

    由于我主要负责我们小组项目数据库模块的部分所以这几天都一直在研究在iphone中最为常用的一个简单数据库sqlite,自己也搜集很多资料,因此在 这里总结一下这几天的学习成果: Sqlite 操作简明 ...

  9. ios编程规范

    允许使用较长的描述尽量不要使用缩写,而是将完整的意思写出来.源于代码的维护可能会被不同文化背景的programmer阅读 适当的命名前缀,比如给变量,协议等,不要给方法加前缀 方法命名规则一般以小写字 ...

  10. PROFILE - 库存：物料状态支持 控制【物料状态定义】禁止的事务处理

    PROFILE 库存:物料状态支持