首页的全屏灯箱效果是怎么写出来的

首页的全屏灯箱效果是怎么写出来的,第1张

不要看到华丽效果就以为html5 css3(在我看来这个效果也不华丽)。html4+css2用好了足以颠覆你对html的认识。你看到的这个是一个居中的div(A),它用了一张图片做背景居中div的父元素(B)是100%宽的,它的背景是一张平铺的图片。B的背景色和A的背景图片边缘颜色一致,看上去是一张图片。图片切换的淡入淡出,动态改变透明度罢了,jQuery的fadeIn fadeOut即可实现。

你试一下,我没看到下面的那个div被影响了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

<head>

<title>新建网页</title>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<style>

*{margin:0px}

body{background-image:url()

   

}

#header{width:990px

height:120px

margin-left:auto

margin-right:auto

background:green

}

#logo{

width:150px

height:100px

margin:10px 0px 0px 10px

float:left

}

#name{

width:820px

height:100px

margin:10px 0px 0px 10px

float:right

}

/*以上是header部分*/

#navigation-bar{

width:auto

height:50px

margin-top:2px

color:black

background-image:url()

}

#center{

width:1000px

height:50px

margin:0px auto

}

ul{

margin:0px 5px

padding:0px

list-style: none

}

#center ul li{

float:left

width:141px

height:48px

line-height:50px

text-align:center

background:yellow 

/*border:1px solid black*/

}

#center ul li:hover{

background-image:url()

}

#center ul li ul li{

position:relative

left:0px top:0px

display:none

}

#center ul li:hover ul li{

display:block

}

/*以上是导航栏*/

#focus-picture{width:990px height:300px

      background:red margin:2px auto

}

</style>

</head>

    <body>

<div id="header">

    <div id="logo"><img src=""></div>

    <div id="name"><img src=""></div>

</div>

<div id="navigation-bar">

<div id="center">

    <ul>

            <li>首页</li>

            <li>简介</li>

            <li>名片

            <ul>

                <li>商务</li>

                    <li>简约</li>

                    <li>创意</li>

                </ul>

            </li>

            <li>灯箱

            <ul>

                <li>落地式</li>

                    <li>挂墙式</li>

                    <li>房顶式</li>

                </ul>

            </li>

            <li>画册</li>

            <li>其它

            <ul>

                <li>海报</li>

                    <li>手提袋</li>

                    <li>动画</li>

                    <li>T恤衫</li>    

                </ul>

            </li>

            <li>联系</li>

        </ul>

    </div>

</div>

<div id="focus-picture">1</div>

<div id="body"></div>

    </body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/8370336.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-15
下一篇 2023-04-15

发表评论

登录后才能评论

评论列表(0条)

保存