?html中的內容
/div>
????????<div?class="news">
????????????<div>
????????????????<ul>
????????????????????<li?class="news-bar">滾動新聞<>
????????????????????<li?>這是滾動新聞<>
????????????????</ul>
????????????</div>
????????????<div></div>
????????????<div></div>
????</div>
css樣式：

.nav-bar
????{
????????width:1000px;
????????height:40px;
???????margin:0?auto;
????}
???.nav-bar-pic?img
???{
???????float:?left;
??????width:200px;?
??????height:40px;

???}
???.nav-bar-list
???{
????????width:800px;
????????height:40px;
????????line-height:40px;
???}
????.nav-bar-list?ul?li
????{
????????float:?left;
????????list-style-type:none;
????????width:80px;
????????text-align:center;
????}
????.nav-bar-list?ul?li?a
????{
????????text-decoration:none;
????????color:#000;
????}
?????.nav-bar-list?ul?li?a:hover,?.nav-bar-list?ul?li?a:active
?????{
?????????background-color:red;
????????
?????}
?????.pic
?????{
???????background-color:red;
???????width:1000px;
?????}
????.news
????{
????????background-color:#333;
????????width:1000px;
????????height:40px;
????????
????}
????.news?li
????{
????????list-style-type:none;
????????float:left;
????????text-align:center;
????????line-height:40px;
????????color:#fff;
?????
????}
????.news-bar
????{
?????????background-color:red;
?????????line-height:40px;
?????????margin:0px;
??????
????}

?我做出的效果

需要的效果
?