Jump to content

separation of code into a new CSS file


vask0

Recommended Posts

Hello people will help me to divide the css code of html file, I css file is in Odell

 

Html css JS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Yahoo Dynamic HTML Banner Example</title>
 <link rel="stylesheet" href="style.css">

<!-- update the paths to the Greensock source -->

</head>
<body>
<style type="text/css">
.a {position:absolute;}
.o {overflow:hidden;}
.f {font-family:Arial, Helvetica, sans-serif; font-weight:bold;}
</style>
<div id="yahoo_bannerContainer" class="a o" style="width:300px; height:250px; border-color:#666; border-style:solid; border-width:thin">
	<div id="bg1" class="a" style="width:300px; height:250px; background-image:url(bg1.jpg); z-index:1;"></div>
	<div id="www" class="a" style="width:117px; height:74px; background-image:url(www.png); z-index:2; top: 11px; left: 5px;"></div>
	<div id="com" class="a" <p>ddsadasda </p> </div>
	<div id="title" class="a f" style="z-index:3; top: 90px; left: 0px; font-size:26px; color:#fff; width:300px;; text-align:center;">Здравейте<br />КА СТЕ </div>
	<div id="bg2" class="a" style="width:300px; height:250px; background-image:url(bg1.jpg); z-index:5;"></div>
	<div id="tag" class="a f"style="z-index:6; left:18px; top:10px; line-height:1.2em; font-size:24px; color:#7c019a;">ДСАФСДАФДСА<br />Добре дошли&mdash;<br />Заповядайте при нас</div>
	
	<div id="ysb" class="a" style="z-index:7; background-image:url(ysb.jpg); width:300px; height:59px; left: 0px; top: 191px;"></div>
</div>
<script type="text/javascript">
function getElem(id){ return document.getElementById(id); }
var scon = getElem('bg1');
var stars = [];
var sCnt = 0;
function star(x,y){
	scon.innerHTML += '<img id="star'+sCnt+'" src="star.png" style="position:absolute; left:'+x+'px; top:'+y+'px;" />';
	sCnt++;
	stars.push('star'+sCnt);
}
function makeStars(){
	var i = 0;
	var max = 40;
	for(i = 0; i < max; i++){
		star( Math.floor(Math.random()*300) , Math.floor(Math.random()*140) ) ;
	}
	setTimeout('tweenStars()', 200);
}
function tweenStars(){
	var i = 0;
	var max = stars.length - 1;
	var dur = 8;
	var tog = true;
	var s = null;
	for(i = 0; i < max; i++){
		tog = !tog;
		TweenLite.to(getElem(stars[i]), (dur + Math.floor(Math.random()*12)), { css:{rotation:(tog == true ? 720 : -720)} });
	}
}
makeStars();
var seq = new TimelineLite();
seq.append( TweenLite.from(getElem('bg1'), 1, {css:{alpha:0}}) );
seq.append( TweenLite.from(getElem('www'), 0.8, {css:{alpha:0}}) );
seq.append( TweenLite.from(getElem('com'), 0.8, {css:{alpha:0}}) );
seq.append( TweenLite.from(getElem('title'), 0.7, {delay:0.4, css:{alpha:0}}) );
seq.append( TweenLite.from(getElem('bg2'), 1.1, {delay:1.5, css:{top:310}}) );
seq.append( TweenLite.from(getElem('tag'), 0.7, {css:{left:-310}}) );
seq.append( TweenLite.from(getElem('ysb'), 0.6, {css:{top:310}}) );
seq.append( TweenLite.from(getElem('reg'), 0.7, {css:{top:310}}) );
seq.play();
</script>
</body>
</html>

10X 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...