页面整体布局思路

最新推荐文章于 2021-08-12 20:54:06 发布

weixin_30672019

最新推荐文章于 2021-08-12 20:54:06 发布

阅读量156

点赞数

原文链接：http://www.cnblogs.com/yuhaoo/p/5022403.html

版权

整体布局

先分析网页是由哪几个部分组成,再依次创建div元素。分清楚那些块分在一起是可以通过float来完成的。
分完块过后可以填充背景颜色来区分，这样方便布局定位，审查元素。

图片透明

img{
　　opacity：0.4
}
opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。

图像透明度 - Hover 效果

img{
　　opacity:0.4;
}
img:hover{
　　opacity:1.0;
}

图片遮盖技术，logo链接

   h1{
        background:url("京东LOGO.png") no-repeat;     logo背景
        width: 168px;                                   宽度  
        height: 81px;                                   高度
        border: 1px solid red;                          边框
    }
    a{
        border: 1px solid #000000;                      边
        display: block;                 将行内元素转换为快元素，使之有宽高
        line-height: 81px;                         和logo一样高度
        text-indent: -1000px;                      缩进，直到看不见
    }
    <h1>
        <a>京东</a>
    </h1>

雪碧图

    div{
        width: 150px;
        height: 120px;
        background: url("sprites2.png");
        background-position: 0 -240px;
    }

        <div> </div>

转载于:https://www.cnblogs.com/yuhaoo/p/5022403.html