• HTML 三


        【定位:】

        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------滚动延迟

  • 相关阅读:
    自定义word快捷键,设置插入图片快捷键
    python使用ftplib做ftp操作
    各浏览器的userAgent对照表
    python判断字符串
    python判断字符串
    apache日志信息详解
    apache日志信息详解
    apache日志信息详解
    linux 下 读取某个文件的某一行或者某几行
    linux 下 读取某个文件的某一行或者某几行
  • 原文地址:https://www.cnblogs.com/lifushan/p/6493333.html
Copyright © 2020-2023  润新知