做影城网站项目过程中遇到的难点

一、网页布局中的属性

1.text-decoration 规定添加到文本的修饰（例如加下划线）。

　　　　none:默认。定义标准的文本。

　　underline:定义文本下的一条线。

　　  overline:定义文本上的一条线。

 line-through:定义穿过文本下的一条线。

　　　　blink:定义闪烁的文本。

　　　inherit:规定应该从父元素继承 text-decoration 属性的值。

2.设置鼠标放上背景颜色改变，但是放上后颜色没有改变，要注意格式控制的优先级，内嵌大于内联。

3.<input />文本框中也有style属性magin、padding、border-radius等。

4.网页上点击时取消选中用-wekit-user-select:none。

5.透明度：opactity值为0-1之间。

6.旋转角度：-webkit-transtion:roate(30deg)代表顺时针旋转30度。

7.渐变时间：-webkit-transition-duration：5s表示渐变时间5秒。

8.目标效果：横向页面中有不止一张图片，每次向左或者向右移动一张图片。

        方法：设置一个div，需要显示几张图片div的宽度就是显示的图片的宽度的和，此div的属性设置超出隐藏。再在这个div里面放一个大的div，大的div放置所有需要轮播的图片。设置大的div的边距离小div边距的距离来控制显示的图片。示例如下：div中显示2张图片，需要轮播的有6张。

<div id="lunbo1" style="width:1160px; height:280px; position:relative; overflow:hidden; margin-top:30px; margin-left:-20px">
　　<div id="datuwai1" style="float:left; width:3480px; height:280px; margin-left:0px">
　　　　<img class="list8" src="../电影海报/大话西游3/大话西游3.jpg" width="550" height="280" />
　　　　<img class="list8" src="../电影海报/我的战争/p2378524889.jpg" width="550" height="280" />
　　　　<img class="list8" src="../电影海报/从你的全世界路过/p2382063063.jpg" width="550" height="280" />
　　　　<img class="list8" src="../电影海报/爵迹/p2375858626.jpg" width="550" height="280" />
　　　　<img class="list8" src="../电影海报/反贪风暴2/p2377447497.jpg" width="550" height="280" />
　　　　<img class="list8" src="../电影海报/鲨滩/p2377520327.jpg" width="550" height="280" />
　　</div>
</div>

window.setInterval("Huan1()",5000);//5秒轮播一次

var d = 0//大div的边距和小div的边距距离为0

function Huan1()//调用函数

　　{
　　　　d = d-580;//大div每次向左移动580px
　　　　if(d < -2320)//如果显示最后2张图片，就把边距规定为0
　　　　{
　　　　　　d = 0;
　　　　}
　　　　var c = ""+d+"px";//把数字变成字符串
　　　　document.getElementById("datuwai1").style.marginLeft = c;//改变边距
}