Home >Web Front-end >HTML Tutorial >Rolling ad CSS layout_html/css_WEB-ITnose
Rolling ad CSS layout_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:39:031342browse
Studyed CSS layout and CSS fixed window, and designed a scrolling advertisement on this basis.
Attach the code first: (using 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> Thanks for the blog post http://www.kwstu.com/ArticleView/divcss_2013929173533658 CSS layout technology support
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn