web 电子商务网站开发笔记整理
0 html 表格对角线怎么实现？有图才有真像！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>用div+css模拟表格对角线</title> <style type="text/css"> *{padding:0;margin:0;} caption{font-size:14px;font-weight:bold;} table{ border-collapse:collapse;border:1px #525152 solid;width:50%;margin:0 auto;margin-top:100px;} th,td{border:1px #525152 solid;text-align:center;font-size:12px;line-height:30px;background:#C6C7C6;} th{background:#D6D3D6;} /*模拟对角线*/ .out{ border-top:162px #D6D3D6 solid;/*上边框宽度等于表格第一行行高*/ width:0px;/*让容器宽度为0*/ height:0px;/*让容器高度为0*/ border-left:140px #BDBABD solid;/*左边框宽度等于表格第一行第一格宽度*/ position:relative;/*让里面的两个子容器绝对定位*/ } b{font-style:normal;display:block;position:absolute;top:-40px;left:-40px;width:35px;} em{font-style:normal;display:block;position:absolute;top:-25px;left:-70px;width:55px;} .t1{background:#BDBABD;} </style> </head> <body> <table> <caption>用div+css模拟表格对角线</caption> <tr> <th style="width:140px;"> <div class="out"> <b>类别</b> <em>姓名</em> </div> </th> <th>年级</th> <th>班级</th> <th>成绩</th> <th>班级均分</th> </tr> <tr> <td class="t1">张三</td> <td>三</td> <td>2</td> <td>62</td> <td>61</td> </tr> <tr> <td class="t1">李四</td> <td>三</td> <td>1</td> <td>48</td> <td>67</td> </tr> <tr> <td class="t1">王五</td> <td>三</td> <td>5</td> <td>79</td> <td>63</td> </tr> <tr> <td class="t1">赵六</td> <td>三</td> <td>4</td> <td>89</td> <td>66</td> </tr> </table> </body> </html>
效果图展示：
- input type="checkbox" 怎么对齐？
- 小图标 或者说是雪碧图 怎么取背景图片？
- html 三列布局 如何排版更好？
- 要用绝对定位，请先使用相对定位？
- 用div做背景 怎么设置 背景图片的透明度？
- html 文字开头空两格 怎么控制？
- 写自己的代码 整理好他们的命名规范 并写好注释，你不是一个人在战斗！
解析2：
9.如何实现下面这个价格被划掉的效果？
解9：两种标签可以实现
<s class="monery_span">￥3780.0</s>
<style>
.monery_span {
font-family: "微软雅黑";
font-size: 16px;
font-weight: bold;
color: #D20200;
}
</style>
<del class="sort-cot-list">¥60</del>
<style> .sort-cot-list { color: #5F5F5F;
}
</style>
解1 效果图就参考解析2吧！(哎，做数学题习惯了，感觉这个格式像在解方程，嘿嘿。。。)
<style type="text/css"> body{font-size:12px; font-family:Tahoma;} .checkbox{vertical-align:middle; margin-top:0;}
</style>
<body>
<input class="checkbox" type="checkbox" />复选框 </body>
想了解更多详细可以参考鑫仔(希望博主不要介意这么称呼他，博主的文章每每读之都有收获，表示真心感谢！)的博客：checkbox复选框的一些深入研究与理解
解3：效果图如下
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> /*CSS源代码*/ .wrap { overflow: hidden; border: 1px solid #ddd; } .wrap .pannel { padding: 10px; height: 300px; color: #fff; } .wrap .left { float: left; width: 170px; background-color: #39f; } .wrap .right { float: right; width: 220px; background-color: #f50; } .wrap .center { margin: 0 250px 0 200px; background-color: #ccc; } </style> </head> <body> <!-- HTML代码片段中请勿添加<body>标签 //--> <div class="wrap"> <div class="pannel left">Left</div> <div class="pannel right">Right</div> <div class="pannel center">Center</div> </div> </body> </html>
可以参考：http://www.seejs.com/%e5%89%8d%e7%ab%af%e5%85%a5%e9%97%a8
10.关于图文排版，一张图片和一行文字怎么一行显示的问题？
11. 返回顶部效果的实现，先看效果图
复制代码 代码如下: <a id="go2top" class="go2top" href="#header"><span class="go2top-inner"></span></a> <script type="text/javascript"> $(function(){ $('#go2top').click(function(){ $("html,body").animate({scrollTop:0},200); return false; }); $(window).scroll(function(){ var obj=$('#go2top'); if(obj.offset().top>900){ obj.show(); }else{ obj.hide(); } }); }); </script> CSS定义 复制代码 代码如下: .go2top { background: url("http://images.cnitblog.com/blog/84698/201303/28125209-67653841b1114531a2a1e6db63315d63.png") no-repeat scroll left top transparent; bottom: 65px; color: #444444; display: none; height: 50px; margin-left: 510px; position: fixed; right: 160px; text-align: center; width: 50px; } .go2top:hover { background-position: -50px top; } 试试看，是不是有了返回顶部了，非常方便实用的功能，希望大家能够喜欢。
原文地址出处：使用jQuery实现返回顶部(http://www.w2bc.com/article/19303)
12.Jquery实现购物车物品数量的加减特效2016-01-28
$(function () { //获得文本框对象 var t = $("#text_box"); //数量增加操作 $("#add").click(function () { if (parseInt(t.val()) < 99) { t.val(parseInt(t.val()) + 1); // $('#add').attr('disabled',true); } }); //数量减少操作 $("#min").click(function () { if (parseInt(t.val()) > 1) { // $('#min').attr('disabled',true); t.val(parseInt(t.val()) - 1); } }); });
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery实现购物车物品数量的加减</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script> $(function(){ var t = $("#text_box"); $("#add").click(function(){ t.val(parseInt(t.val())+1) setTotal(); }) $("#min").click(function(){ t.val(parseInt(t.val())-1) setTotal(); }) function setTotal(){ $("#total").html((parseInt(t.val())*3.95).toFixed(2)); } setTotal(); }) </script> </head> <body> <p>单价：3.95</p> <input id="min" name="" type="button" value="-" /> <input id="text_box" name="" type="text" value="4" /> <input id="add" name="" type="button" value="+" /> <p>总价：<label id="total"></label></p> </body> </html>
原文地址：
no1，jQuery实现购物车物品数量的加减
no3,jquery禁用a标签,jquery禁用按钮click点击()
13.文字溢出隐藏与超长标题自动省略号
14:日期空件 http://www.jq22.com/jquery-info5596
15.JS判断字符串包含的方法
1. 例子：
var tempStr = "tempText" ;
var bool = tempStr.indexOf("Texxt");
//返回大于等于0的整数值，若不包含"Text"则返回"-1。
if(bool>0){
document.write("包含字符串");
}else{
document.write("不包含字符串");
}
2. indexOf用法：
1
strObj.indexOf(subString[, startIndex])
JavaScript中indexOf函数方法返回一个整数值，指出 String 对象内子字符串的开始位置。如果没有找到子字符串， 则返回 -1。如果 startindex 是负数，则 startindex 被当作零。如果它比最大的字符位置索引还大，则它被当作最大的可能索引。
参数：
strObj ： 必选项，String 对象或文字。
subString ：必选项，要在 String 对象中查找的子字符串。
starIndex ：可选项，该整数值指出在 String 对象内开始查找的索引。如果省略，则从字符串的开始处查找；
如果 startindex 是负数，则 startindex 被当作零。如果它比最大的字符位置索引还大，则它被当作最大的可能索引。
3. 与lastIndexOf的区别：
lastIndexOf() 方法则是从字符串的结尾开始检索子串。
16.如何让JS函数只执行一次？
var flag = "true";
function onlyOne() {
if(flag) {
"这里是要执行的代码";
}
flag = "false";
}
17.优化if else多层嵌套
//method1 if (color) { if (color === 'black') { printBlackBackground(); } else if (color === 'red') { printRedBackground(); } else if (color === 'blue') { printBlueBackground(); } else if (color === 'green') { printGreenBackground(); } else { printYellowBackground(); } } //method2 switch(color) { case 'black': printBlackBackground(); break; case 'red': printRedBackground(); break; case 'blue': printBlueBackground(); break; case 'green': printGreenBackground(); break; default: printYellowBackground(); } //method3 switch(true) { case (typeof color === 'string' && color === 'black'): printBlackBackground(); break; case (typeof color === 'string' && color === 'red'): printRedBackground(); break; case (typeof color === 'string' && color === 'blue'): printBlueBackground(); break; case (typeof color === 'string' && color === 'green'): printGreenBackground(); break; case (typeof color === 'string' && color === 'yellow'): printYellowBackground(); break; } //method4 var colorObj = { 'black': printBlackBackground, 'red': printRedBackground, 'blue': printBlueBackground, 'green': printGreenBackground, 'yellow': printYellowBackground }; if (color in colorObj) { colorObj[color](); }