這個就更簡單了，有兩種方法
第一種：將圖片作為<divid="Banner"></div>背景
第二種：直接將圖片插入<divid="Banner"></div>之間，代碼：<divid="Banner"><imgsrc=""/></div>
大家可以根據需求和實際情況選擇用哪一種，在這裡我們用第一種
Html代碼沒有什麼變化，只需要在CSS裡面定義一下就OK了
CSS代碼：
- #Banner{
- height:290px;
- background:url(../Images/banner.jpg)no-repeat;
- }
做出來了嗎？做不出跟下面的源代碼比較一下吧~
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHtml1.0Transitional//EN""http://www.w3.org/TR/
- xhtml1/DTD/xHtml1-transitional.dtd">
- <HtmlXMLnsHtmlXMLns="http://www.w3.org/1999/xHtml">
- <head>
- <metahttp-equivmetahttp-equiv="Content-Type"content="text/Html;charset=gb2312"/>
- <linkrellinkrel="stylesheet"type="text/CSS"href="CSS/css.CSS"/>
- <title>浮動(float)頁面布局（上）alixixi.com整理</title>
- </head>
- <body>
- <dividdivid="Logo">
- <ahrefahref="#"id="logoLink"></a>
- </div>
- <dividdivid="Nav">
- <ul>
- <li><ahrefahref="#">HOME</a></li>
- <li><ahrefahref="#">PHOTOS</a></li>
- <li><ahrefahref="#">ABOUT</a></li>
- <li><ahrefahref="#">LINKS</a></li>
- <li><ahrefahref="#">CONTACT</a></li>
- </ul>
- </div>
- <dividdivid="Banner"></div>
- <dividdivid="Content"></div>
- <dividdivid="Footer"></div>
- </body>
- </Html>
- body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl{margin:0;padding:0;}
- #Logo,#Nav,#Banner,#Content,#Footer{width:900px;margin:0auto;}
- #Logo{
- height:80px;
- }
- #logoLink{
- display:block;
- width:173px;
- height:46px;
- background:url(../Images/logo.gif)no-repeat;
- float:left;
- margin-top:20px;
- }
- #Nav{height:42px;}
- #Navul{
- height:42px;
- list-style:none;
- background:#56990c;
- }
- #Navulli{height:42px;float:left;}
- #Navullia{
- display:block;
- height:42px;
- color:#FFF;
- padding:010px;
- line-height:42px;
- font-size:14px;
- font-weight:bold;
- font-family:Arial;
- text-decoration:none;
- float:left;
- }
- #Navullia:hover{background:#68acd3;}
- #Banner{
- height:290px;
- background:url(../Images/banner.jpg)no-repeat;
- }