小白学前端02

第二天：

今天想简单的仿写知乎的一个网页，主要是想学习导航栏的实现

结果做到这。。。就又开始做其他的去了：

函待完善的有：知乎的导航栏还有input框里面有文字，且js实现了点击消失的效果（此效果在javascriptDOM编程艺术里面有），还有高度，宽度设置的细节需要学习

惯例总结一下爬过的坑：

q1:导航栏怎样才可固定在顶部？

ans:用position:fixed;

q2:ul块float:left  lookfor搜索块float:right却两个凑成一团..

ans:应该设置宽度解决?对阅知乎页面的源码它取了这些属性： width: 1519.2px;top: 0px;left: 0px;  min-width: 1032px; overflow: hidden;目前这个问题因为怎么发生的都不记得了，也忘了当时怎么改动的

要重新测试一下了

q..：其实还有一些，但是下午的全部精力基本都扑到那个未实现的js函数上去了.....好多都没及时记录下来..

 

 

 

下午主要想到要在导航栏下方添加一些文字或图形，以便测试导航栏的效果，然后突然想到能不能用js实现一个菱形的一半放在页面下方：

一开始是准备这样：菱形的边采用"--"，等先做好一条斜线，之后再倒着用for即可，对DOM操作而言：先生成article元素，再生成p元素作为它的孩子，每添加一个p元素依次给属性style以left: i*10+10 px向右移动

function brokenLine(){
  var header  =document.getElementsByTagName("header")[0];
  var article = document.createElement("article");
  var pnode = document.createElement("p");
  var ptxt = document.createTextNode("--");
  pnode.setAttribute("position","relative");
  pnode.appendChild(ptxt);
  article.appendChild(pnode);
  insertAfter(article,header);
  for(var i=0;i<100;i++){
    var pnode = document.createElement("p");
    var ptxt = document.createTextNode("--");
    pnode.setAttribute("position","relative");
    pnode.appendChild(ptxt);
    article.appendChild(pnode);
    moveElement(pnode,i*10+10);  
  }
}
function moveElement(elemment,final_x){
  var pnode = document.getElementsByTagName("p");
  var elem = pnode[pnode.length-1];
  if (!elem.style.left) {
    elem.style.left = "0px";
  }
  if(!elem) {console.log("lastChild can't use this way!");}
  var xpos = parseInt(elem.style.left);
  console.log(elem);
  console.log(xpos);
  if (xpos == final_x) {
    return true;
  }
  while (xpos < final_x) { 
    var dist = Math.ceil((final_x - xpos)/10);
    xpos = xpos + dist;
    dist = Math.ceil((final_x - xpos)/10); 
  }
  console.log(xpos);
  elem.style.left = xpos + "px";
}
addLoadEvent(brokenLine);

当然失败了.....结果是根本p元素没有平移...奇怪的是在火狐浏览器里面查看html 的的确确是生成了<p style="10px" >--</p> 其中的style也的确每一个p都递增了10px,但是为什么就是没有平移的效果了？？？

查阅文档：两句话一下惊醒:static 为默认值。没有定位，元素出现在正常的流中； 如果 "position" 属性的值为 "static"，那么设置 "left" 属性不会产生任何效果。

于是立马在循环里给每个p加上属性position:absolute;   结果...当然还是失败嘛....  但是明明改了为什么还不行呢？？  难道因为p元素被嵌套在article元素里就不再是块级元素导致的失效？还是p元素本身就不能实现这样的效果呢？----算是明天的一个小任务吧，因为还是没弄出来...待解

 

其中发现了一个现象载入页面时，p元素竟然出现在导航栏的下方，立马坚定的去重写js不生成article元素，改为p元素直接接在header的下面，结果似乎解决了，因为在我贴的第一张图里一共5个p元素都没有出现被导航栏覆盖的情况，可是之后新建了一个html测试了一下又发现其实p元素有没有被嵌套在article元素里结果都一样..如下图，还是p元素被覆盖了。。但是我的第一张贴图又明明是没有被覆盖....结果嘛又成了待解

 

在brokenLine.js的注释里记载了爬过的坑：

/*、
1.若未加
if (!elem.style.left) {
  elem.style.left = "0px";
}
则console.log(xpos)显示为NaN
2.article未挂到body里面，就接着操作了
3.直接elem=document.getElementsByTagName("p").lastchild导致elem is undefined
4.结果能正常出来<p style="left: 40px;">--</p> 但是left在网页中显示不出来，整个还是竖直的一条
5.html里面外联broken.js和utils.js时，把broken放到了utils前面导致，broken中报错无定义
6.发现可能添加的p 元素一直没办法形成折线的原因可能是被嵌在article元素中，取掉article元素直接添加，
结果弄成全部插在了header元素里面
7.发现添加的p元素出现在了header元素的下面---待测试是加上article的原因还是css的原因？
*/

 

 

 

 感悟：
1.体会到回滚的意义了，在测试找原因时，改来改去，很多时候就想只要回到刚刚上面几次改动之前就好，结果却只能整个重写一遍(不过并不知道git该怎么用...)

2.基础是很重要的，还是那些css属性不熟，布局啊，浮动啊，因为这些掉了很多坑...进度也好慢

3.这两次试着记随笔，一下就发现了，一.自己表达能力很差，逻辑简直很不清楚，二、要养成一边遇到问题，一边要把这些问题记录下来以及当时自己是怎么做的记录下来

 

小插曲1：在下午时同学提到过有没有什么技巧能把程序运行过程中的变量值给全部打印出来(c语言)？当时第一反应断点，但要一步一步自己手动跳，不够好，那么直接打印了？同学需求是能一下直观的全部看出来，加打印函数看来也不够好，那么应该加一个将值输出到一个文件的函数应该就好点，其实过程中想过能不能有方法获取变量的地址再在当有操作作用于地址的时候立马记录下值，类似于实时监控，后来一想这何必还深入到那么底层呢？添加一个打印函数的方法都比这要好吧...

小插曲2：晚上同学讨论单片机里面的一句代码，为什么 while (DData[ListLength]>0x19) //若到达字串尾则退出  "\0"  这里面要检测大于25呢？因为ASC||码的控制字符只到了31，而且字符串的结尾ASC码是0啊...

 

最后:明天的任务还很重，希望自己能把页面布局完成，再有时间来回过头把这些问题一一弄清楚