Heim > Web-Frontend > HTML-Tutorial > 滚动广告+CSS布局_html/css_WEB-ITnose

滚动广告+CSS布局_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:39:03
Original
1302 Leute haben es durchsucht

研究了一下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>
Nach dem Login kopieren

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage