Logo内容移除
像小米，百度，京东，淘宝都有自己的Logo(网页的标志),
1.将a标签的背景background作为logo使用，所以点击图片也可以跳转。
2. 可以在logo中设置文字，但是要将文字移除给用户更好的体验。
3. （1）使用text-ident设置一个负值来移除logo中的内容
看下小米官网的logo
使用em也可以。
（2）字体大小调为0 font-size:0px;
（3）文字设置为透明色color:transparent;
盒子阴影
盒子加box-shadow 这个属性:值
box shadow:insert 值（表示内阴影）
例如：
box-shadow: 1px 1px 1px red;
多个阴影用逗号隔开
精灵图
首先精灵图是一张普通的图片,并且图片上包含了若干张背景图片
作用：
设置元素的背景图片,为了减少网络(http)请求图片的次数
使用：
1、先将精灵图作为盒子的背景图片
2、通过background-position 在水平方向和垂直方向移动背景图片（移动距离可以用ps测（推荐），QQ截图也可以等）
3、水平方向移动的距离=要显示的图片在精灵图中的横坐标
4、垂直方向移动的距离=要显示的图片在精灵图中的纵坐标
滑动门
可以制作导航（使用背景图片制作）
注意：使用背景图片导航的内容区域不能设置固定宽度，不然无法随内容变化。一定要使用内容将导航撑开
网上找的素材
bg1:
bg2:
分析：
使用ul >li自作导航栏，导航栏还有a标签，变化的是bg2，随文字（多少）变化（长短），所以想法是在a标签（背景图片bg1）里面加span标签（背景图片bg2）
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.nav{
width: 980px;
height: 35px;/*这里高度要和图片的一样*/
margin: 0 auto;/*使导航栏居中*/
}
.nav li{
float: left;/*使li标签排成一行*/
list-style: none;/*去除li的圆点*/
}
.nav li a{
text-decoration: none;/*去除a标签文本修饰的下划线*/
display: inline-block;/*转化为行内快，高生效*/
height: 35px;/*不能设置固定宽度，如果设置固定的话，就不会随内容变化*/
padding-left: 7px; /*内容与边框的距离*/
background:url(image/bg1.png) no-repeat;/*背景图片不重复*/
}
.nav li a span{
display: inline-block;
height: 35px;
background: url(image/bg2.png) no-repeat right;/*注意不加rigth的话默认显示图片左边*/
padding-right: 20px;
line-height: 35px;
}
</style>
</head>
<body>
<div class="nav">
<ul >
<li>
<a href="javascript:void(0)"><span>首页</span></a>
</li>
<li>
<a href="javascript:void(0)"><span>导航导航导航导航导航</span></a>
</li>
<li>
<a href="javascript:void(0)"><span>导航导航</span></a>
</li>
</ul>
</div>
</body>
</html>
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » Logo内容移除、盒子阴影、精灵图、滑动门
发表评论 取消回复