导航布局和视频弹出框制作-阿里云开发者社区

开发者社区> 开发与运维> 正文

导航布局和视频弹出框制作

简介: <!DOCTYPE html><html><head><meta charset="UTF-8"><!-- 当前页面的三要素 --><title>html零基础快速制作网页弹出窗口</title><meta name='Keywords' content="html,弹出窗口"><meta


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 当前页面的三要素 -->
<title>html零基础快速制作网页弹出窗口</title>
<meta name='Keywords' content="html,弹出窗口">
<meta name='description' content="">

<style type="text/css">
 * {margin:0;padding 0}
img {border:0;}
.adv{width:460px;height:314px;border:1px solid #D8D8D8;margin:0 auto;display:none;border-radius:6px}
.adv_top{width:460px;height:56px;background:url('images/1.jpg')}
.adv_hd{width:460px;height:56px;line-height:56px;padding-top:15px;padding-right:5px}
.adv_hd a {font-size:12px;color:#000000 ;background:url('images/2.jpg') no-repeat;width:29px;
           height:24px;float:right;text-decoration:none;}
           
.adv_hd a:hover{width:29px;height:24px;background:url('images/3.jpg') no-repeat; }
.menu ul li{list-style:none;float:left;}

/* 行内元素设置高度不起作用必须变为块级元素才有用 */
.menu ul li a {display:block;height:67px;line-height:67px;text-decoration:none;padding:0 25px 0 25px;color:#222;}
.menu ul li a:hover{background:#2578d8}

/*  清除浮动
none:默认值。允许两边有浮动对象
left:不允许左边有浮动对象
right:不允许左边有浮动对象
both:左右两侧不允许有浮动对象
*/
.picture { width:100%;height:470px;clear:both;border:1px solid #D8D8D8;text-align:center}

.menu {border:1px solid #D8D8D80;position:relative;}
.qq span {color:#ff5f25;}
.qq  {float:right;}

 /*绝对定位 */
.menu_list {background:#CCCCFF;position:absolute;
                 /*透明技术兼容所有浏览器 */
                 opacity:0.9;filter:alpha(opacity=90);display:none;z-index:99999}
.web{width:800px;height:200px;}
.seo{width:500px;height:300px;}
.sem{width:300px;height:200px;}

 /*父div元素,防止内部元素因浏览器窗口缩小而换行*/
.father {
width:1200px;
height:600px;
margin:0 auto;
}
</style>
</head>
<body>
<a href="#" </a>
<div class="adv" id="myadv">
    <div class="adv_top">
        <div class="adv_hd">
        <a href="#" title="关闭" onclick="$('#adv').hide();$('div#layer').remove();"></a>
        </div>
    </div>
    
    <div class="">
    <img alt="登录" src="images/4.jpg" height="463px" width="525px">
    </div>
</div>
<div>


</div>

<!--导航-->
<div class="father">
<div class="qq">qq咨询:<span>934033381</span></div>

<div class="menu">
<ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">FLASH</a></li>
    <li class="flip">
    <a href="#">网页制作</a>
    <div class="menu_list web">二级导航</div>
    </li>
    <li class="flip">
    <a href="#">SEO培训</a>
    <div class="menu_list seo">二级导航</div>
    </li>
    <li class="flip">
    <a href="#">网络营销</a>
    <div class="menu_list sem">二级导航</div>
    </li>
</ul>
</div>

<div class="picture">
<img src="js/1.jpg" />
</div>
</div >
<!--第三方视频html代码 -->
<div>
<embed src="http://player.youku.com/player.php/Type/Folder/Fid/26181344/Ob/1/sid/XMTM2MDI3ODQwOA==/v.swf" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" allowFullScreen="true" mode="transparent" type="application/x-shockwave-flash"></embed>
</div>


<!--  引入Jquery-->
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>

<script type="text/javascript" >

$(function(){

$(".menu .flip").hover(function(){
$(this).children(".menu_list").slideDown();}
,function(){
$(this).children(".menu_list").slideUp();
});
});

</script>
</body>
</html>

本文出自 “点滴积累” 博客,请务必保留此出处http://tianxingzhe.blog.51cto.com/3390077/1708423

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章