项目小笔记

1、俩个span之间会有间隙,解决办法,在父类设置font-size:0,或者是:代码里面,俩个span中间的空格删掉

2.

   俩个并列的span有时会出现这种情况,解决办法,给第一个span设置vertical-align:topevent.target

3、event.target 返回事件的目标节点(事件源)

代码

 1 <lu class="left_list">
 2     <li>刘备</li>
 3     <li>关羽</li>
 4     <li>张飞</li>
 5 <ul>
 6 
 7 <script>
 8    window.onload=function(){
 9        var leftList=document.getElementById("left_list")
10        for(var i=0;i<leftList.children.length;i++){
11           leftList.cjildren[i].onclick=function(event){
12              console.log(event.target)
13          }
14      }   
15    }
16 </script>

4、appendChild

把一个列表中的项,移动到另一个列表中,可以用appendChild

 5、http://www.baidu.com?name=zb    一个http请求,域名绑定的ip,通过ip找到相应的服务器,端口号表示服务器的哪个应用,因为一个服务器有可能有多个应用   

 6、jquery里面动态生成,结果

,处理办法:<p title='"+XXX+"'></p>

 7、div在没有设定宽度的时候,默认是100%,如果想让div根据内容自动定义宽度,需要设置float

 8、页面滚动到某个文字,window.scrollTo(X轴,Y轴)

9、

 

页面里面的lang一般设置为zh或zh-CN(简体中文),如果设置成en,表示是英文的,浏览器会进行翻译,如果是盲人的设备,无法正确出现声音

<meta charset="UTF-8">要放在head的最前面,因为如果放在title后面,如果title里面有中文,在老版的浏览器里面,会解码失败,出现空白或者是乱码
<meta http-equiv="x-ua-compatible" content="ie=edge"> 代表IE的文档兼容性,表示强制以最新的IE浏览器模式渲染页面,已经被IE11弃用,因为IE11的兼容性很好
10、

 

 11、

      

           做移动端,或者是响应式布局,最好用em或rem

          

12、

::selection{
color: yellow;
}
表示eleection伪类,鼠标选中页面内容时的效果


13、html默认font-size为10px时
line-height:3rem
line-height:30px 这俩个在谷歌浏览器里面,3rem的高度要比30px大一些,原因是:谷歌浏览器,中文的默认字体最小是12px,如果设置了小于12px的字体,浏览器会自动把字体设置到12px。英文版的默认字体大小是10px或者更小

14、

header .top ul li + li {
border-left: 1px solid #999;
margin-left: -3px;
}
给第一个li的兄弟li设置的样式

15、在setTimeout()和setInterval()方法里面,this属性指向的是window,因为这俩个方法是window的方法,如果要用,可以在这俩个方法外面定义一个变量
    var that=this

16、<a href="javascript::">我是跳转</a> 这个在Ie下正常,不会跳转。

        <a href="javascript::"   target="_blank">我是跳转</a>  加上target,在IE浏览器下面,会打开新的页面

17、absolute的div要想自适应高度,必须给父级的relative设置固定高度height,不能设置100%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .t1{
      width: 100px;
      height: 300px;
      border: 1px solid #ddd;
      position: relative;
    }
    .t2{
      position: absolute;
      width: 100px;
      top: 10px;
      bottom: 30px;
      background-color: aqua;
    }
  </style>
</head>
<body>
  <div class="t1">
    <div class="t2">
      我是测试
    </div>
  </div>
</body>
</html>

 

posted @ 2017-02-21 09:20  zhaobao1830  阅读(182)  评论(0编辑  收藏  举报