【定位:】
1,如果盒子加了定位,默认后写的div在上面
2,z-index:1----叠放次序 值越大越在上面。默认值是0
3,dw里面如果定位,插入---布局对象--apdiv它的名字我们一般叫做层
【上合网底部】
1,background:#2d2d2d url(../images/footer-bg.png) repeat-x;背景图和背景色同时放在一起的写法
2,背景色 背景图 平铺 定位 固定定位
3,高度剩余法,这个效果在网站里面很常用,就不用内边距或者外边距也能控制文字之间的距离
需求:从1输出到100
【关于隐藏的问题】
1,overflow:hidden;-----裁剪多余的部分
2,visibility:hidden;---隐藏对象,它就是真正的把我们的盒子给隐藏了。
3,display:none;-----隐藏,在js里面用的特别的多,不占位隐藏
【css精灵---雪碧图】----为了减轻服务器的压力
1,css精灵,即CSS Sprite,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
2,css精灵图必须是背景图,一般在200k左右
3,css精灵图一般是透明的png格式的图片
4,它以浏览器左上角为原点,0,0坐标 background-position:负值
【*****绝对定位】
1,position:absolute;----如果是行内元素有宽和高,只要加了绝对定位就不再用转换了。一般我们都要display:block 转换下,现在就可以不转换了
【*****浮动】
1,float浮动------如果是行内元素有宽和高,只要加了浮动就不用转换了,一般我们都要display:block 转换下,现在就可以不转换了
【ps如何制作精灵图】
1,首先精灵图一定要透明,大小一般以那个最大的精灵图来计算。
2,相同类别的图片放在一起,不是你想怎么放就怎么放。
3,每张图片间隔一般5个像素左右
4,文件另存为psd格式,方便以后改动
5,存储为WEB的格式 ---》PNG24的
【优化上合用css精灵】
1,fw可以直接打开ps的源文件格式psd的文件,打开只有锁定你的图层文件,防止一不小心碰了一下错位了。
【fw制作精灵图】
1,文件--新建---选择透明、或者先用白色画布,然后选择下面的画布把颜色去掉就可以了
2,ctrl+r---导入图片,当光标出现三角的时候直接点击就可以了
3,先让图片对齐
4,图片可以让他符合画布自动排列
*****平铺1个像素的精灵图一定是1个像素的宽,一定是垂直做的,从上往下排列。
【IE6的双倍边距问题】
1,最难调兼容的就是IE6,最稳定的最安全就是火狐浏览器
*****经典的IE6双倍边距问题,一旦盒子有了浮动并且还有外边距(left/right)那么在IE6下面一定会出现双倍边距
测IE6点击刷新下面的强制刷新(清除缓存)
_display:inline;---IE6的专用属性,解决IE6的双倍边距
2,【谷歌文本框出现边框的bug】
解决办法: outline:none;-----解决input出现边框的问题
3,【图片链接的bug】
解决办法:img{ border:none;}和img{ border:0;}-----都行--加了链接出现边框的bug
4,【图片缝隙的bug,如果链接里面有很多图片】
<div>
<a href="#">
<img src="images/banner.png" width="980" height="597" />
<img src="images/banner.png" width="980" height="597" />
<img src="images/banner.png" width="980" height="597" />
</a>
</div>-----这样的结构图片下面就会出现5个像素左右的缝隙
****如果你就算不换行写图片,在IE6下面也会出现5个像素左右的bug
解决办法:
1):可以直接给图片加高度height:597px;和 overflow:hidden; 直接减去多余的高度
2):图片img是行内元素 然后要把它转换为display:block;---这个就解决了图片下面出现5个像素的bug
【滑动门事件】
1,导航图片是圆角,两边图片不一样,中间是一个图片的效果。滑动门一般都用在导航上面。也有可能用在table栏上面。
【如果是两张图】
*****左面一个圆角,剩下的都是右面的
*****背景图不能给宽度
【模板】
1,制作网页的公用文件的方法就叫做模板
作用:模板的好处可以一次性更新很多页面,页面越多越能显示模板的重要性。
步骤:
1)制作公用文件,但是不保存
2)插入可编辑区域---一直确定,第二行英文删掉
3)文件另存为模板
4)调用模板---点击更多----模板中的页----创建
5)更新模板
*****第一:模板的扩展名是.dwt,它会生成一个Templates的模板文件夹
【导航优化】
1,ctrl+shift+g---取消组合
2,ctrl+g---组合
3,网站导航 首页是静态的。后面频道、文字、列表都是动态的
4,高度剩余法
【淘宝网开始】
1,在线淘宝网
2,一般把一些相关性的代码会放在一个盒子里面
3,!important--权重最高
4,ctrl+alt+0----平铺整个画布
5,.hhs:hover----这个IE6不兼容
6,.site-nav-hd .hhs a:hover .hs-----这个是兼容IE6的
【ico小图标】
1,网站域名后面加favicon.ico-----获取它的ico小图标
2,http://www.ico.la----在线制作ico小图标
3,一般这个图尽量用logo,网站用的ico图标大小16*16
4,桌面的ico小图标一般大小是32*32的
5,<link rel="shortcut icon" href="favicon.ico">---链接ico小图标
【利用浮动调滑动门bug】
1,如果盒子大小被撑开了,就加float:left;
2,淘宝logo优化的第二种方法
【滚动文字标签】
1,<marquee></marquee>---滚动标签
2,direction---滚动方向(left/right/up/down---左右上下)
3,scrollamount="100"---滚动速度---值越大越快,越小越慢。默认值2---3
4,鼠标事件:onmouseover="this.stop()---鼠标经过onmouseover this--自身
5,onmouseout="this.start()"---鼠标离开onmouseout
6,behavior--》滚动文字的方式3种behavior="alternate--来回滚动"、scroll--一圈一圈的走、slide----只走一次停在页面。
7,loop---控制文字滚动次数,-1代表无数次,2滚动两次
8,scrolldelay------滚动延迟