在数学中讲述了点成线，线成面，面成体。那么不管是在前端还是在后端。你要学习的是自己的逻辑思维，对于这个页面你的看法与态度。接下来点走进我的学习中的过程。在学习的道路上是你自己想学什么就能学什么。因为在这一路上都是你自己打选择。没有比脚更长的路。你自己走过的每一个时刻都算数。书的厚度在于你·自己学习的态度。
请看下面的图
本人是将这些项目分开处理的一些回顾
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>电商平台网站</title> </head> <!--导入css文件--> <link rel="stylesheet" type="text/css" href="css/AAAA.css"/> <body> <article> <div id="top"> <ul class="topList"> <li><a href="注册页面.html">注册页面</a></li> <li><a href="index.html">电商页面</a></li> <li><a href="tableA.html">tableA课表</a></li> <li><a href="tableB.html">tableB课表</a></li> <li><a href="tableC.html">tableC课表</a></li> </ul> </div> </article> <hr> <h1 style="color: red; background: black; align-content: center;text-align: center;">电商平台网站的制作</h1> <div id="top" class="brand"> 电商网 <input type="search" placeholder="搜索"/> </div> <hr> <div class="content"> <div class="pic-info"> <div class="pic-box"> <img src="img/w1 (4).jpg" /> </div> <ul> <li>商品名称:BELL</li> <li>商品价格:4000￥</li> <li>交易数量:123</li> </ul> </div> </div> <div class="content"> <div class="pic-info"> <div class="pic-box"> <img src="img/w1 (5).jpg" /> </div> <ul> <li>商品名称:http</li> <li>商品价格:5000</li> <li>交易数量:34</li> </ul> </div> </div> <div class="content"> <div class="pic-info"> <div class="pic-box"> <img src="img/w1 (6).jpg" /> </div> <ul> <li>商品名称:华为</li> <li>商品价格:6000</li> <li>交易数量:12000</li> </ul> </div> </div> </body> </html>
页面的效果图
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片头像</title> <style type="text/css"> .asd{ width: 50px; height:50px; padding: 3px; border: 5px; background: lightskyblue; border: dotted;*/ /*border: dashed cornflowerblue;*/ /*border: dotted cyan;*/ } </style> </head> <body> <table border="2" class="qw" datafld="300"> <tr> <td colspan="2"><img src="img/bnm/cc1 (1).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (2).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (3).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (4).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (5).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (6).jpg" class="asd"></td> </tr> <tr> <td colspan="2"><img src="img/bnm/cc1 (7).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (8).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (9).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (10).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (11).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (12).jpg" class="asd"></td> </tr> <tr> <td colspan="2"><img src="img/bnm/cc1 (13).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (14).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (15).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (16).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (17).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (18).jpg" class="asd"></td> </tr> <tr> <td colspan="2"><img src="img/bnm/cc1 (19).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (20).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (21).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (22).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (23).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (24).jpg" class="asd"></td> </tr> <tr> <td colspan="2"><img src="img/bnm/cc1 (25).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (26).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (27).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (28).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (29).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (30).jpg" class="asd"></td> </tr> <tr> <td colspan="2"><img src="img/bnm/cc1 (31).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (32).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (33).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (34).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (35).jpg" class="asd"></td> <td colspan="2"><img src="img/A/kp1 (5).jpg" class="asd"></td> </tr> </table> <table border="4" class="qw"> <tr> <td class="asd"><img src="img/A/kp1 (1).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (2).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (3).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (4).jpg" class="asd"></td> </tr> <tr> <td class="asd"><img src="img/A/kp1 (5).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (6).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (7).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (8).jpg" class="asd"></td> </tr> <tr> <td class="asd"><img src="img/A/kp1 (9).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (10).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (11).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (12).jpg" class="asd"></td> </tr> <tr> <td class="asd"><img src="img/A/kp1 (13).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (14).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (15).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (16).jpg" class="asd"></td> </tr> </table> <a href="s2.html"><h1>ok1</h1></a> <a href="S3.html"><h1>ok2</h1></a> <a href="Table1.html"><h1>ok3</h1></a> <a href="TableA.html"><h1>ok4</h1></a> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>购物车</title> <style> table{ width:600px; text-align:center; } th{; color:#FFF; padding:5px; } td{ ; border-bottom:1px dashed #817865; } caption{ font-size: 40px; color: red; } </style> </head> <body> <table id="list" border="0" bgcolor="silver"> <caption><h4>我的购物车</h4></caption><br /> <tr> <th bgcolor="crimson"><label><input id="all" type="checkbox" onclick="all_check()" />全选</label></th> <th bgcolor="#817865">商品</th> <th bgcolor="antiquewhite">描述</th> <th bgcolor="darkturquoise">单价（元）</th> <th bgcolor="deepskyblue">数量</th> <th bgcolor="#00A40C"> 评价</th> <th bgcolor="aliceblue">购买者电话</th> <th bgcolor="orangered">删除键</th> </tr> <tr> <tr> <td background="img/3.jpg"><input name="ic" type="checkbox" onclick="single_check()" /></td> <td><img src="img/3.jpg"></td> <td width="170" align="left">棉麻上衣</td> <td>268</td> <td>2</td> <td>五颗星</td> <td bgcolor="aquamarine">18137567889</td> <td bgcolor="#817865"> <input type="button" value=" 删除" onclick="removeRow1()"></td> </tr> <tr> <td><input name="ic" type="checkbox" onclick="single_check()" value="234"/></td> <td width="80"><img src="img/1.jpg"></td> <td width="170" align="left"><a>春长袖裙套装长裙</a></td> <td bgcolor="darkslateblue">699</td> <td>1</td> <td>五颗星</td> <td>18134567889</td> <td bgcolor="#817865"> <input type="button" value=" 删除" onclick="removeRow1()"></td> </tr> <tr> <td><input name="ic" type="checkbox" onclick="single_check()" /></td> <td><img src="img/2.jpg"></td> <td width="170" align="left">新款女装收腰长裙</td> <td>399</td> <td bgcolor="fuchsia">1</td> <td>五颗星</td> <td bgcolor="lightblue">18134567889</td> <td bgcolor="#817865"> <input type="button" value=" 删除" onclick="removeRow1()"></td> </tr> <tr><td colspan="4" style="text-align:left; font-weight:bold; padding-left:15px;"><a href=javascript:removeRow();>删除选中的商品 </a></td><td><button id="tj"> 提交订单</button></td> </tr> </table> <script> //全选 function all_check() { var oInput= document.getElementsByName("ic"); for(i=0;i<oInput.length;i++) if(document.getElementById("all").checked==true) { oInput[i].checked=true; // alert(oInput[i].value); } else oInput[i].checked=false; } //多选 function single_check() { var oInput= document.getElementsByName("ic"); var j=0; for(i=0;i<oInput.length;i++) if(oInput[i].checked==true) j++; if( j==oInput.length) document.getElementById("all").checked=true; else document.getElementById("all").checked=false; } //删除 function removeRow(){ var cheObj=document.getElementsByName("ic"); var taObj=document.getElementById("list"); if(confirm("确定要删除么？")) for(var k=0;k<cheObj.length;k++){ if(cheObj[k].checked){ taObj.deleteRow(k+1); k=-1; } } document.getElementById("all").checked=false; } var taObj=document.getElementById("list"); for(var k=0;k<taObj.rows.length;k++){ taObj.rows[k].onmouseover=function (){ this.style.backgroundColor="silver"; } taObj.rows[k].onmouseout=function (){ this.style.backgroundColor="#ddd"; } } function removeRow1(){ var cheObj=document.getElementsByName("ic"); var taObj=document.getElementById("list"); if(confirm("确定要删除么？")) for(var k=0;k<cheObj.length;k++){ if(cheObj[k].checked){ taObj.deleteRow(k+1); k=-1; } } document.getElementById("all").checked=false; } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>国庆节</title> </head> <body> <h1 id="res"></h1> <script type="text/javascript"> function test(year,month,day){ var end =new Date(year,month-1,day); var leftTime=end.getTime()-Date.now(); var day =Math.floor(leftTime/1000/60/60/24); var h =Math.floor(leftTime/1000/60/60%24); var m =Math.floor(leftTime/1000/60%60); var s =Math.floor(leftTime/1000/60); var str="距国庆节还有"+day+"天"+h+"小时"+m+"分钟"+s+"秒"; res.innerHTML=str } setInterval("test(2021,10,1)",1000); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { background-color: lightblue; } </style> </head> <link rel="stylesheet" href="css/index.css" /> <body> <h1 style="text-align: center;">A课表页面</h1> <table border="5px" align="center"> <caption>A班课程表</caption> <tr> <th>项目</th> <th colspan="5">上课</th> <th colspan="2">休息</th> </tr> <tr> <td>星期</td> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期四</td> <td>星期五</td> <td>星期六</td> <td>星期天</td> </tr> <tr> <td rowspan="4">上午</td> <td> <a href="语文.html">语 文</a> </td> <td> <a href="数学.html">数学</a> </td> <td> <a href="英语.html">英文</a> </td> <td> <a href="化学.html">化学</a> </td> <td> <a href="地理.html">地理</a> </td> <td> <a href="政治.html">政治</a> </td> <td rowspan="6">休息</td> </tr> <tr> <td> <a href="化学.html">化学</a> </td> <td> <a href="地理.html">地理</a> </td> <td> <a href="政治.html">政治</a> </td> <td> <a href="语文.html">语 文</a> </td> <td> <a href="数学.html">数学</a> </td> <td> <a href="英语.html">英文</a> </td> </tr> <tr> <td> <a href="语文.html">语 文</a> </td> <td> <a href="数学.html">数学</a> </td> <td> <a href="化学.html">化学</a> </td> <td> <a href="地理.html">地理</a> </td> <td> <a href="政治.html">政治</a> </td> <td> <a href="英语.html">英文</a> </td> </tr> <tr> <td> <a href="化学.html">化学</a> </td> <td> <a href="地理.html">地理</a> </td> <td> <a href="政治.html">政治</a> </td> <td> <a href="语文.html">语 文</a> </td> <td> <a href="数学.html">数学</a> </td> <td> <a href="英语.html">英文</a> </td> </tr> <tr> <td rowspan='2'>下午</td> <td> <a href="化学.html">化学</a> </td> <td> <a href="政治.html">政治</a> </td> <td> <a href="语文.html">语 文</a> </td> <td> <a href="数学.html">数学</a> </td> <td> <a href="英语.html">英文</a> </td> <td> <a href="地理.html">地理</a> </td> </tr> <tr> <td> <a href="化学.html">化学</a> </td> <td> <a href="政治.html">政治</a> </td> <td> <a href="语文.html">语 文</a> </td> <td> <a href="数学.html">数学</a> </td> <td> <a href="地理.html">地理</a> </td> <td> <a href="英语.html">英文</a> </td> </tr> </table> </body> </html>
