CSS样式怎样实现Logo立体盒子效果

html-css06

CSS样式怎样实现Logo立体盒子效果,第1张

CSS样式可能会是这个样子的:body{background:#999}

#container{

width:960px

background:#fff

margin:20px auto

padding:10px

} 下面是一个效果预览: 设置为相对定位,当我们定位logo的时候,我们希望它的位置是相对于容器的,因此使用相对定位:

#container{

width:960px

background:#fff

margin:20px auto

padding:10px

position:relative

} 将它定位到盒子的外面现在你需要做的就仅仅是定位logo,将其水平定位,让它从容器中突出出来。

#logo{position:absolute

用CSS背景和定义。

<div class="logo" title="网站名称"><a href="/"><h1>网站名称</h1></a></div>

<style>

.logo{width:200pxheight:80pxbackground:url(/images/logo.png) no-repeat}

.logo h1{text-indent:-9999pxwidth:200pxheight:80pxoverflow:hidden}

</style>

CSS(层叠样式表)级联样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

一般logo都是设置到logo容器里面的背景。

把承载logo的容器的height值改的和图片的高度一致就可以了。

例如,logo大小为150px * 50px:

<!-- html部分 -->

<h1><a href="http://www.163.com">个人网站</a></h1>

/* CSS 部分 */

h1 { width: 150pxheight:50px}

h1 a { display:blockwidth:150pxheight:50pxtext-indent:-30px}

换成了150px * 65px 的就把CSS 部分h1和h1 a 里面的height改成65px 就可以了。