<! DOCTYPE html>
<meta charset= "UTF-8" >
<!--three elements of the current page--
<title>html 0 Basic Quick Make page pop-up window </title>
<meta name= ' Keywords ' content= "html, pop-up window" >
<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;}
/* Inline element setting height does not work must become block-level element only use */
. 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}
/* Clear Float
None: Default value. Allow floating objects on both sides
Left: does not allow floating objects
Right: Floating objects are not allowed on the left
Both: Floating objects are not allowed on the left and right sides
*/
. picture {width:100%;height:470px;clear:both;border:1px solid #D8D8D8; Text-align:center}
. menu {border:1px solid #D8D8D80;p osition:relative;}
. QQ span {color: #ff5f25;}
. qq {float:right;}
/* Absolute Positioning */
. menu_list {background: #CCCCFF;p osition:absolute;
/* Transparent technology compatible with all browsers */
Opacity:0.9;filter:alpha (opacity=90);d isplay:none;z-index:99999}
. web{width:800px;height:200px;}
. seo{width:500px;height:300px;}
. sem{width:300px;height:200px;}
/* Parent DIV element to prevent inner elements from wrapping as the browser window shrinks.
. Father {
width:1200px;
height:600px;
margin:0 Auto;
}
</style>
<body>
<a href= "#" </a>
<div class= "adv" id= "MYADV" >
<div class= "Adv_top" >
<div class= "ADV_HD" >
<a href= "#" title= "Close" onclick= "$ (' #adv '). Hide (); $ (' Div#layer '). Remove (); ></a>
</div>
</div>
<div class= "" >
</div>
</div>
<div>
</div>
<!--Navigation--
<div class= "Father" >
<div class= "QQ" >QQ Consulting:<span>934033381</span></div>
<div class= "Menu" >
<ul>
<li><a href= "#" > Home </a></li>
<li><a href= "#" >FLASH</a></li>
<li class= "Flip" >
<a href= "#" > Web Authoring </a>
<div class= "Menu_list Web" > Two-level navigation </div>
</li>
<li class= "Flip" >
<a href= "#" >seo training </a>
<div class= "menu_list seo" > Level two navigation </div>
</li>
<li class= "Flip" >
<a href= "#" > Network Marketing </a>
<div class= "Menu_list sem" > Two-level navigation </div>
</li>
</ul>
</div>
<div class= "Picture" >
</div>
</div >
<!--third-party video HTML code--
<div>
<embed src= "http://player.youku.com/player.php/Type/Folder/Fid/26181344/Ob/1/sid/XMTM2MDI3ODQwOA==/v.swf" quality= "High" width= "480" height= "All" align= "middle" allowscriptaccess= "Always" allowfullscreen= "true" mode= " Transparent "type=" Application/x-shockwave-flash "></embed>
</div>
<!--introduction of 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>
This article is from the "Nothing qq:934033381" blog, please be sure to keep this source http://tianxingzhe.blog.51cto.com/3390077/1708423
Navigation layout and video pop-up box making