前端标签--js--css大致思路
html标签语言在块级和内联标签的基础上进行页面的设计，设计的时候主要是注意标签块间的距离位置等信息，设计盒子的浮动，盒子的位置，盒子之间的联系。
在设计网页之前一定要判断好该设计多少个盒子，什么样的模块该放在哪个盒子里面，各个盒子的位置，一个盒子能够包含多少。在制作时要用好浮动，必要是要使用好清除浮动，标签语言就是工具性的东西，很容易了解使用方法，但是重点在于知道什么时候判断出该使用哪种标签，该对标签进行什么样的属性分类，怎么调度适合他的css。
css设计时最主要的还是关注盒子的位置，盒子间的放置和关联，每个盒子包含了什么子盒子，一个大页面分为多少个大盒子多少个小盒子等等，了解了各个标签的使用方法，还有链接的使用，也会方便很多，样式方法也都是固定的，做出判断就能方便实用。
js是最重要的，记住语法之后，就要熟悉事件的绑定，在绑定事件之后判断好这个事件要做什么，还有会发什么什么样的情况来触发这个事件。
例如要给一个button绑定事件，令它点击后就可以隐藏一个盒子，就要找到这个button并且做好这个button和盒子的联系。查询很重要查询到标签才能做出一定的操作。
实例：
京东简易评论切换页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.head{
width: 100%;
height: 50px;
background-color: #e0e0e0;
border-bottom: 2px solid red; }
.anniu{
float: left;
width: 100px;
height: 100%;
}
.an_1{
margin-top: 15px;
margin-left:15px ;
}
.anniu_1{
float: left;
width: 100px;
height: 100%;
margin-left: 15px;
}
.anniu_2{
float: left;
width: 150px;
height: 100%;
margin-left: 15px;
}
.an_1:hover{
color: red;
}
.con{
clear: left;
}
.hide{
display: none;
}
.yang{
background-color: red;
}
.lok{
color: white;
}
.lok:hover{
color: white;
}
.as{
color: black;
}
</style>
</head>
<body>
<div class="head">
<a class="as"href="javascript:void(0);"><div class="anniu item 0 yang"><p class="an_1 lok">商品介绍</p></div></a>
<a class="as"href="javascript:void(0);"><div class="anniu_1 item 1"><p class="an_1">规格与包装</p></div></a>
<a class="as"href="javascript:void(0);"><div class="anniu_1 item 2"><p class="an_1">售后保障</p></div></a>
<a class="as"href="javascript:void(0);"><div class="anniu_2 item 3"><p class="an_1">商品评价(20+)</p></div></a>
<a class="as"href="javascript:void(0);"><div class="anniu_2 item 4"><p class="an_1">本店好评商品</p></div></a>
</div>
<div class="0 con"><img src="http://wx1.sinaimg.cn/mw690/005B3dfxgy1fld0x7u7dhj30r80kptm7.jpg"></div>
<div class="1 con hide"><img src="http://wx1.sinaimg.cn/mw690/005B3dfxgy1fld0xbkwanj30ri0kyjt8.jpg"></div>
<div class="2 con hide"><img src="http://wx2.sinaimg.cn/mw690/005B3dfxgy1fld0xdzvjnj30r90l3778.jpg"></div>
<div class="3 con hide"><img src="http://wx1.sinaimg.cn/mw690/005B3dfxgy1fld0xfzs6qj30r90l10uu.jpg"></div>
<div class="4 con hide"><img src="http://wx3.sinaimg.cn/mw690/005B3dfxgy1fld0xi0t76j30r50l3wwq.jpg"></div>
<script>
ele_item=document.getElementsByClassName("item");
for(i=0;i<ele_item.length;i++){
ele_item[i].onclick=function () {
bian=this.classList[2];
for (k=0;k<ele_item.length;k++){
if (ele_item[k]!=this) {
ele_item[k].classList.remove("yang");
el_p=ele_item[k].getElementsByTagName('p')[0];
el_p.classList.remove("lok")
}
else {
this.classList.add('yang');
el_t=this.getElementsByTagName('p')[0];
el_t.classList.add("lok")
}
} ele_con=document.getElementsByClassName('con');
for (j=0;j<ele_con.length;j++){
if (ele_con[j].classList[0]==bian) {
ele_con[j].classList.remove("hide")
}
else {
ele_con[j].classList.add("hide")
}
}
}
}
</script>
</body>
</html>
京东简易切换实例
运用的代码很简单，熟悉循环，遍历时候进行事件的绑定，并在这个事件触发时候所要做出的行为做出判断。
实例2：
简单表格添加删除：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="dist/css/bootstrap.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script src="dist/js/bootstrap.js"></script>
<style>
.bei{
background-color: #9d9d9d;
position: fixed;
top:0;
left:0;
bottom: 0;
right: 0;
opacity: 0.5;
}
.tan{
background-color: white;
position: fixed;
top:30%;
left:30%;
width: 500px;
height: 300px;
/*margin-left: 250px;*/
/*margin-top: 150px;*/ }
.shu{
margin-top: 20px;
margin-left :20px;
}
.hide{
display: none;
}
</style>
</head>
<body> <div class="row">
<div class="col-md-6">
<p class="xian" ><input type="button" value="添加"></p>
<table class="table table-bordered table-hover" >
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
<th>操作</th>
</tr>
</thead>
<tbody id="t1">
<tr>
<td>张三</td>
<td>12</td>
<td>s7</td>
<td>
<button class="del">删除</button>
</td>
</tr> <tr>
<td>张三2</td>
<td>1223</td>
<td>s7</td>
<td>
<button class="del">删除</button>
</td>
</tr> <tr>
<td>张三3</td>
<td>122</td>
<td>s7</td>
<td>
<button class="del">删除</button>
</td>
</tr> </tbody> </table>
</div>
</div> <div class="bei hide j"></div>
<div class="tan hide j">
<form action="">
<p class="shu zl">姓名<input type="text"></p>
<p class="shu zl">年龄<input type="text"></p>
<p class="shu zl">班级<input type="text"></p>
<input type="reset" value="确定" class="shu anq">
<input type="button" value="取消" class="shu an">
</form>
</div> <script>
var ele_an=document.getElementsByClassName("an")[0];
var ele_anx=document.getElementsByClassName("xian")[0];
var ele_c=document.getElementsByClassName("j");
ele_an.onclick=function () {
for (k=0;k<ele_c.length;k++){
ele_c[k].classList.add("hide")
}
};
ele_anx.onclick=function () {
console.log(ele_anx);
for (o=0;o<ele_c.length;o++){
ele_c[o].classList.remove("hide")
} };
var ele_anq=document.getElementsByClassName("anq")[0];
ele_anq.onclick=function () {
var ele_zl=document.getElementsByClassName("zl");
var ele_tr=document.createElement("tr");
for (p=0;p<ele_zl.length;p++){
var zhi=ele_zl[p].children[0].value;
var ele_td=document.createElement("td");
ele_td.innerText=zhi;
ele_tr.appendChild(ele_td)
}
var ele_fu=document.getElementById('t1');
var ele_de=document.createElement("td");
var ele_bu=document.createElement("button");
ele_bu.classList.add("del");
ele_bu.innerText='删除';
ele_de.appendChild(ele_bu);
ele_tr.appendChild(ele_de);
ele_fu.appendChild(ele_tr);
ele_bu.onclick=function () {
var t1=document.getElementById("t1"); // 父节点
t1.removeChild(this.parentElement.parentElement) };
for (k=0;k<ele_c.length;k++) {
ele_c[k].classList.add("hide")
}
};
var eles=document.getElementsByClassName("del");
for(var i=0;i<eles.length;i++){
eles[i].onclick=function () {
// 父节点.removeChild(子节点)
var t1=document.getElementById("t1"); // 父节点
t1.removeChild(this.parentElement.parentElement) } }
</script> </body>
</html>
简易表格添加删除
判断按钮触发的事件和将要进行的事情吗，还有代码进行的顺序。例如新添加的一行表格标签内容，虽然有class删除的属性，但是却无法进行这项操作，就是因为代码已经编译完成，我们又人为的添加了数据，所有编译完成后的网页并没有这项功能，所以我们就要在事件发生时将这个情况作出处理。
前端标签--js--css大致思路的更多相关文章
- 数字平滑 前端插件JS&CSS库
CDN DEMO 拷贝可用: <!DOCTYPE html> <link rel="stylesheet" href="https://cdn.boot ...
- 史上前端面试最全知识点（附答案）---html & js & css
史上前端面试最全知识点(附答案) 一.html & js & css 1.AMD和CMD是什么?它们的区别有哪些? AMD和CMD是二种模块定义规范.现在都使用模块化编程,AMD,异步 ...
- 后端数据中含有html标签和css样式，前端如何转译展示样式效果。
后端含有html标签和css样式的数据: domain="<span style='color:red'>www.baidu.com</span>" (vu ...
- php有效的过滤html标签,js代码,css样式标签
过滤html标签�php中太简单了,我们可以直接使用strip_tags函数来实现了,下面给各位整理了一些关于 strip_tags函数的例子. php过滤html的函数:strip_tags(str ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- JS,CSS是前端，JAVA PHP ASP是后端，数据库是后端的处理对象,非代表前后底
大海-mysql-oracle(529513481) 19:02:18 象我这边,前台都是php,而php做数据分析是不太理想的,做中间件没人力,难办 横瓜(601069289) 19:20:15 ...
- api日常总结：前端常用js函数和CSS常用技巧
我的移动端media html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font- ...
- 压缩前端文件(html, css, js)
1:原因 在写前端代码时, 因为要尽可能的适合阅读会加入许多注释, 空格等, 这些在开发时是必要的, 但当你要发布时, 就需要让代码更加精简, 精简压缩的同时也混淆了代码, 安全性也加强了, 可以说是 ...
- <!-- -->是HTML的注释标签js，css注释
<!-- -->是HTML的注释标签 js,css:单行注释以 // 开头. 多行注释以 /* 开始,以 */ 结尾. web大作业(Vip视频解析) <!-- 这个网页是vip视频 ...
- [Yii2] 快速套模板，加载JS,CSS（HTML标签<base>）
刚开始学,弄了好久,不知道怎么加载JS.CSS,以及怎么不加载YII2自带的模板!其实真的好简单! 补: 其实是我垃圾,YII2默认访问路径是WEB,所以把style文件放到web下就能加载! 首先把 ...
随机推荐
- 【01】npm/cnpm安装
包安装相关信息: 1.node_modules文件夹 node_modules文件夹在nodejs中是一个特殊的文件夹,通过它的名字就可以看出,该文件夹也是用于存放node模块.如果一个模块表达式不是 ...
- favicon还是这个网站生成的比较正确
原文发布时间为:2011-11-16 -- 来源于本人的百度文章 [由搬家工具导入] http://tools.dynamicdrive.com/favicon/ http://www.rw-desi ...
- URL重写IIS7(URL Rewrite Module) 比之前的urlrewrite更方便使用
原文发布时间为:2011-02-24 -- 来源于本人的百度文章 [由搬家工具导入] 微软在IIS7中添加了URL的重写模块,并且免费使用，可以导入.htaccess规则，确实是个不错的选择 URL ...
- Some lines about EF Code First migration.
Some lines about EF Code First migration: 一. 模型设计 1. 遵循EF标准,注意表关系配对 2. 数据模型里尽量把必须的属性和说明都写全 3. EF默认id ...
- android的布局-----GridLayout(网格布局)
学习导图 (一)简介 网格布局由GridLayout所代表,在android4.0之后新增加的布局管理器,因此需要android4.0之后的版本中使用,如果在更早的平台使用该布局管理器,则需要导入相应 ...
- android 的渐变背景设置文件
main.xml:<button android:layout_width="wrap_content" android:layout_height="wrap_c ...
- apscheduler定时器
每天定时任务: import time from apscheduler.schedulers.background import BackgroundScheduler def foo(): pri ...
- 将linlayout布局转为bitmap图片和保存
1.首先新建路径 File filedirs = new File(Environment.getExternalStorageDirectory(), "/YuLin/"); i ...
- n!在k进制下的后缀0
问n! 转化成k进制后的位数和尾数的0的个数.[UVA 10061 How many zeros and how many digits?] Given a decimal integer numbe ...
- HDU 1060 Leftmost Digit【log10/求N^N的最高位数字是多少】
Leftmost Digit Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...