您的位置: 首页  >  文章  >  项目小笔记

项目小笔记

分类: 文章 • 2024-02-06 17:48:40

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>

 

相关推荐