整体布局
先分析网页是由哪几个部分组成,再依次创建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背景
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{
150px;
height: 120px;
background: url("sprites2.png");
background-position: 0 -240px;
}
<div> </div>