<! DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" >
<HTML>
<HEAD>
<TITLE>news</TITLE>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta name= "Author" content= "" >
<meta name= "Keywords" content= "" >
<meta name= "Description" content= "" >
<link href= "Css/base.css" type= "Text/css" rel= "stylesheet"/>
<link href= "Css/public.css" type= "Text/css" rel= "stylesheet"/>
<script src= "Js/jquery-1.7.1.min.js" ></script>
<script src= "Js/pop.js" ></script>
</HEAD>
<BODY>
<div class= "Bottom" >
<div class= "Bottom-nav" >
<a href= "#" class= "Gyhj" > About Us </a>
<ul class= "About-pop" >
<li><a href= "" > Company Profile </a>
</li>
<li><a href= "" > Organizational Structure </a>
</li>
<li><a href= "" > Company qualification </a>
</li>
<li><a href= "> Chairman's Speech </a>
</li>
</ul>
<a href= "" class= "HZHB" > Partners </a>
<a href= "" class= "XMJS" > Project Introduction </a>
<a href= "" class= "Tdjs" > Team Introduction </a>
<a href= "" class= "GSFC" > Company style </a>
<a href= "" class= "XWZX" > News Center </a>
<a href= "" class= "Zxns" > Careers </a>
<a href= "" class= "LXWM" > Contact Us </a>
</div>
</div>
<!----bottom------>
</BODY>
</HTML>
===================
. Bottom {
width:100%;
height:200px;
Background-color: #E8E8E8;
border-top:5px #861F99 Solid;
padding-top:5px;
margin:200px Auto;
}
. Bottom. bottom-nav {
width:1200px;
height:200px;
margin:50px Auto 0;
position:relative;
}
. Bottom-nav. gyhj {
Background:url (.. /images/gyhj-logo.png) 0 no-repeat;
background-size:36%;
}
. Bottom-nav. gyhj:hover {
Background:url (.. /images/gyhj-logo-hover.png) 0 no-repeat;
background-size:36%;
}
. Bottom-nav. HZHB {
Background:url (.. /images/hzhb-logo.png) 0 no-repeat;
background-size:36%;
}
. Bottom-nav. hzhb:hover {
Background:url (.. /images/hzhb-logo-hover.png) 0 no-repeat;
background-size:36%;
}
. Bottom-nav. Xmjs {
Background:url (.. /images/xmjs-logo.png) 0 no-repeat;
background-size:25%;
}
. Bottom-nav. xmjs:hover {
Background:url (.. /images/xmjs-logo-hover.png) 0 no-repeat;
background-size:25%;
}
. Bottom-nav. Tdjs {
Background:url (.. /images/tdjs-logo.png) 0 no-repeat;
background-size:28%;
}
. Bottom-nav. tdjs:hover {
Background:url (.. /images/tdjs-logo-hover.png) 0 no-repeat;
background-size:28%;
}
. Bottom-nav. GSFC {
Background:url (.. /images/gsfc-logo.png) 0 no-repeat;
background-size:30%;
}
. Bottom-nav. gsfc:hover {
Background:url (.. /images/gsfc-logo-hover.png) 0 no-repeat;
background-size:30%;
}
. Bottom-nav. xwzx {
Background:url (.. /images/xwzx-logo.png) 0 no-repeat;
background-size:30%;
}
. Bottom-nav. xwzx:hover {
Background:url (.. /images/xwzx-logo-hover.png) 0 no-repeat;
background-size:30%;
}
. Bottom-nav. Zxns {
Background:url (.. /images/zxns-logo.png) 0 no-repeat;
background-size:43%;
}
. Bottom-nav. zxns:hover {
Background:url (.. /images/zxns-logo-hover.png) 0 no-repeat;
background-size:43%;
}
. Bottom-nav. LXWM {
Background:url (.. /images/lxwm-logo.png) 0 no-repeat;
background-size:28%;
}
. Bottom-nav. lxwm:hover {
Background:url (.. /images/lxwm-logo-hover.png) 0 no-repeat;
background-size:28%;
}
. Bottom-nav a {
font-size:14px;
Font-weight:bold;
Color: #000;
width:110px;
height:50px;
line-height:50px;
Display:inline-block;
text-indent:50px;
margin-left:22px;
margin-right:12px;
position:relative;
z-index:999;
}
. bottom-nav A:hover {
Color: #87209A;
}
. Bottom-nav P {
font-size:16px;
Text-align:center;
margin-top:30px;
Color: #9C9C9C;
}
/* Above is the contact Us section */
/* Bottom Suspension popup small layer */
. about-pop {
width:110px;
height:245px;
Text-align:center;
Position:absolute;
z-index:90;
left:18px;
Top: -180px;
Background-color: #E8E8E8;
Display:none;
}
. about-pop Li {
height:30px;
width:100%;
line-height:30px;
Text-align:center;
Margin-left: -22px;
}
. About-pop Li a {
width:110px;
height:30px;
line-height:30px;
Display:inline-block;
Text-indent:0px!important;
}
. About-pop Li:hover a {
Color: #ffffff;
Background-color: #88209B;
}
. gyhj:hover. About-pop {
Display:block;
}
/* Bottom Suspension popup small layer */
. color-red{
Color: #E53333;
}
==========================
function gethtml (URL) {
var h = $ (' #boot '). Height ();
$ (' #sonWp '). Load (Url,function () {
$ (' #moku '). Animate ({' top ':-h},500);
});
}
function Goboot () {
$ (' #moku '). Animate ({' Top ': 0},500,function () {
$ (' #sonWp '). html (');
});
}
/* This section is click on the suspended layer we appear */
$ (function () {
$ (' #boot '). Height ($ (window). Height ());
$ (". Gyhj"). MouseOver (function () {
$ (". About-pop"). Show ();
});
$ (". About-pop"). MouseLeave (function () {
$ (". About-pop"). Hide ();
});
});
/* This section is click on the suspended layer we appear */
=====================
Mouse hover, drop down menu, distance from a certain distance