滚动广告+CSS布局

研究了一下CSS布局以及CSS固定窗口，在此基础上设计了滚动广告。

先附上代码：（使用jquery-1.7-min）

<html>
<head>
<title>CSS布局及滚动广告</title>

<style>
#my_windows{
margin-left:2%;
margin-top:20%;
width:6%;
height:20%;
position:fixed;
background-color:yellow;
}

#container{
width:80%;
height:200%;
margin:0 auto;/*设置整个容器在浏览器中水平居中*/
background-color:yellow;
}

#header{
height:20%;
background-color:blue;
}

#content{
height:60%;
background:#0FF;
margin-top:20px;
}

#content_left{
height:80%;
width:25%;
margin:3%;
background:#90C;
float:left;
}
#content_right{
height:80%;
width:63%;
margin:3%;
background:#90C;
float:left;
}

#Footer{
    height:16%;
    background:#90C;
    margin-top:20px;
}

.clear{
clear:both;
}
</style>

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

<script>
$(document).ready(function(){
    $("#adds").css({"margin-top":"140px"});
    setInterval("manytime()",2000);
});
function manytime(){
    var mytest=$("#adds");
    mytest.show();
    mytest.css({"margin-top":"140px"});
    mytest.animate({"margin-top":"0px"},1000,function(){mytest.hide()});
}
</script>
</head>

<body>

<div id="my_windows">
<p id="adds">广告</p>
</div>
<div id="container">
    <div id="header">头部
    </div>
    
    <div id="content">
    <div id="content_left">左侧</div>
    <div id="content_right">右侧</div>
    </div>
    
    <div class="Clear"></div>
    <div id="footer">脚本</div>

</div>

</body>
</html>

感谢博文  http://www.kwstu.com/ArticleView/divcss_2013929173533658 的CSS布局技术支持

posted @ 2015-08-11 00:02  谷粉  阅读(1365)  评论(0)  编辑  收藏  举报