<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>test</title>
<style?type="text/css">
*{margin:0;padding:0;}
body{background:?#C8EDCC;?font-size:?14px;?color:?#333;}
a{text-decoration:?none;}
li{list-style:?none;}
.fl{float:?left;}
.fr{float:?right;}
.clear{clear:both;display:?block;}
.top,.nav,.banner,.content,.g_notice,.foot{width:?960px;?margin:?0?auto;}
.top{height:40px;}
.logo{display:block;width:130px;?height:?40px;}
.top_right{width:?830px;?height:?40px;}
.top_right?a{display:block;?float:?right;?line-height:?40px;?color:#666;?padding-right:8px;}
.nav{height:?30px;background:?#010080;}
.nav?li{float:?left;?display:block;?width:?160px;?height:?30px;?line-height:?30px;}
.nav?li,.nav?li?a{color:?#fff;?display:block;?width:?160px;?height:?30px;?line-height:?30px;text-align:?center;}
.content,.con_part1,.con_part2,.con_part3{height:?300px;}
.con_part1{width:?310px;?margin-right:?10px;}
.con_part2{width:?470px;?margin-right:?10px;}
.con_part3{width:?160px;?}
.con_part1?ul?li,.con_part3?ul?li{height:?28px;?line-height:?28px;padding-left:2px;?}
.con_part1?ul?li?a,.con_part3?ul?li?a{color:?#666;}
.con_part2?p{text-indent:2em;?font-size:?14px;?line-height:?28px;}
.more{color:?#333;}
.g_notice{padding:28px?0;}
.u_colon{width:80px;?color:#777;?font-size:16px;?display:inline-block;?}
#g_scrollNotice{display:inline-block;?width:958px;?height:28px;?line-height:28px;?overflow:hidden;?*position:relative;?*overflow:hidden;?padding-left:34px;?*background-position-y:2px;}
#g_scrollNotice?li{height:28px;?padding-left:10px;?color:#777;?font-size:16px;?}
.foot{text-align:?center;?height:?30px;?line-height:?30px;}
</style>
</head>
<body>
<div?class="top?clear">
<a?class="logo?fl"?href=""?title="logo"><img?src=""?width="130px"?height="40px"?/></a>
<div?class="top_right?fl?">
<div?clas="clear">
<a?href="">聯系我們</a>
<a?href="">加入收藏?|</a>
<a?href="">設為首頁?|</a>
</div>
</div>
</div>
<div?class="nav">
<ul>
<li><a?href="">網站首頁</a></li>
<li><a?href="">新聞動態</a></li>
<li><a?href="">圖片相冊</a></li>
<li><a?href="">精彩活動</a></li>
<li><a?href="">招聘啟事</a></li>
<li><a?href="">聯系我們</a></li>
</ul>
</div>
<div?class="banner">
<a?href=""?title="banner"><img?src=""?width="960px"?height="110px"?/></a>
</div>
<div?class="content?clear">
<div?class="con_part1?fl">
<h2>新聞動態</h2>
<ul>
<li><a?href="">壹條新聞</a></li>
<li><a?href="">壹條新聞</a></li>
<li><a?href="">壹條新聞</a></li>
<li><a?href="">壹條新聞</a></li>
<li><a?href="">壹條新聞</a></li>
<li><a?href="">壹條新聞</a></li>
<li><a?href="">壹條新聞</a></li>
<li><a?href="">壹條新聞</a></li>
</ul>
</div>
<div?class="con_part2?fl">
<h2>公司介紹</h2>
<p>公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹<a?class="more"?href="">更多</a></p>
</div>
<div?class="con_part3?fr">
<h2>聯系我們</h2>
<ul>
<li>QQ:</li>
<li>電話:</li>
<li>官網:<a?href="">www</a></li>
<li>地址:</li>
</ul>
</div>
</div>
<div?class="g_notice">
<div?id="g_scrollNotice"?class="clearfix">
<span?class="u_colon?fl">最新活動：</span>
<ul?class="fl">
<li>滾動新聞1</li>
<li>滾動新聞2</li>
<li>滾動新聞3</li>
<li>滾動新聞4</li>
<li>滾動新聞5</li>
<li>滾動新聞6</li>
<li>滾動新聞7</li>
<li>滾動新聞8</li>
</ul>
</div>
</div>
<div?class="foot">COPYRIGHT2014HUALI</div>
</body>
</html>
<script?type="text/javascript"?src="jquery-1.9.1.min.js"></script>
<script?type="text/javascript">
function?AutoScroll(obj){
$(obj).find("ul:first").animate({
marginTop:"-28px"
},500,function(){
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
});
}
$(document).ready(function(){
setInterval('AutoScroll("#g_scrollNotice")',2000)
});
</script>
具體細節妳自己調壹調吧，寬高，邊框都是隨便寫的
jq文件自己加下