【项目练习】遇到的问题和解决方法

2016.1.4日开始做自己的项目进行实际操作练习。这里记录我在练习中遇到的问题和解决方法：

1.首先遇到的问题是：当我给body插入背景图的时候，无法将css与html分离，否则就不显示。这是为什么？

解决：

后来发现，造成这种情况的原因在于，图片的url连接中有中文地址，而.css文件的保存格式不是UTF-8，此时无法正确的识别中文地址，故而会造成插入背景图片无效。

解决方法:此时只要将.css文件用记事本打开，另存为的时候将编码格式改为UTF-8即可。

2.title栏如何加入图标？

解决：

<link rel="shortcut icon" href="WEB-INF/favicon.ico" type="image/x-icon"/>

要生成.ico文件，然后插入在<title>标签上边

3.在input text文本框中，可以用value来加入默认值，但是如何实现那种点击之后默认值自动清零？（用JavaScript绑定onfocus事件，然后提取innerText替换？）

如何把文字放在块元素的正中间？

解决：

text-align：certer; 实现文字的左右居中

line-height=height  他们的值相等，实现文字上下居中。

6.注意：css伪类中,根据顺序不用会影响生效，最好使用link---visited--hover--active.其他几个都知道了，active表示的是鼠标按下链接到松开链接的这段时间所显示的样式。

7.兼容性问题，伪类的颜色显示，目前按照IE11为准，但是在极速和兼容模式下显示有问题。

8.关于定位，absolute定位应该是相对于其父元素进行定位，但如果我把所有的元素定位都设置为absolute，那么大家都相对于body来定位？

9.给section加onclick事件为何无法点击？

10.IE11不支持text-shadow设置阴影？

11.公司新闻部分，我把三个li分别加了a作为连接，但是当我hover的时候，lu的list-style的小方块也跟着变蓝了，而且是所有小方块都变蓝，这是不对的，怎么改？

12.不可以用#ida，#idb div{}   这样把多个id选择器的父子选择器写在一起么？

13.使用transition进行平滑过渡

14.使用算法【n=0；i=((n++%m)+1)】，可以实现i是0到m的循环，即当m=4的时候，i的值为12341234的循环。

      这里的((n++%m)+1)拆成两句相当于：((n%m)+1)；n++；

      要理解这里还有一个细节：n++是n先操作再自加，所以当第一次执行这个算法的时候，i=((0%4)+1),执行之后的结果i=1,n经过自加后也n=1。

15.关于计时器 setInterval()：它是一个时间，无需绑定任何时间，只要写在js文件中，页面加载之后就会自动开始计时，直到被clearTimeout()清除或者窗口关闭。我是这么理解的，但是涛涛说还有问题，多个计时器的时候就不行了。我先做，回头搞清楚再重新笔记一下。

16.方法三：这里没理解，也没能解决，应该是判断鼠标是否在元素内的语句。

这个方法是最简单的实用的。

复制代码 代码如下:

if(myDiv.contains(window.event.srcElement))

即 if(myDiv.contains(鼠标位置的元素对象))

具体情况还是要根据自己需要来选择，我是调试了一下方法三，但是具体也没使用上。 其他方法，继续研究中。

17.在使用innerHTML或者innerText的时候，替换内容为中文的时候，在网页中显示乱码。这是因为html文件的编码格式为UTF-8而js文件不是的，这种情况，只要使用记事本打开js文件，并且另存为UTF-8编码格式的文件，即可正常使用。单独写在博客了。

18.一些代码在IE11浏览器有效，但是360IE11模式却不行。

19.transform

20.#id:hover{}   这里的di和：之间不能有空格，不然会失效。

21.transition：

    transition:background-color .3s ease-in .0s;

该语句的意思是：要渐变的属性为background-color；渐变过程持续3s；渐变的方式为ease-in；延迟0s后开始渐变。

22.在HTML5中，不支持<frameset>标签和<frame>，不能再使用它们来在html中加入html。换做<Iframe>标签。写在单独的博客里了。

23.CSS3中取消了类选择器，所以我在做项目的时候基本都是id选择器，html选择器或者父子选择器相互配合使用的，这样的问题在于，给许许多多的元素起了id，虽然没有用class属性了，但是其实只是换成了id而已，这样是正确的吗？实际上在专业的开发中，应该如何搭配使用选择器呢？

24.没有a标签，但是鼠标hover的时候想改变鼠标图标，可以在css样式中增加

cursor: pointer;

即可达到目的。

25.使用原生JavaScript做动画的时候，用obj.style这种dom方法，可以取得对象的属性，然后修改，从而达到动画效果。但是要注意，这里的dom属性和css对象的属性是不一样的，两者常用的很多是一样的，但是也有不同的。比如：CSS的 font-size 属性对应于 Style 对象的 fontSize 属性，以及其他写法不同的属性。如果遇到某些情况下，需要改变dom不支持的属性的值，可以使用下边的方法来实现，例如下边的例子就是background-position-X：

//var rollx=clientlogo.style.backgroundPositionX;

这样写就无法实现，需要：

var rollx=window.getComputedStyle(clientlogo,null).getPropertyValue("background-Position-X");

这样才可以。