對於DIV+CSS概念上的論述另一片部落格已經寫了很多了：http://blog.csdn.net/cjl5678/article/details/7606229
下面，我自己敲了一個小demo，加強一下對於Div+Css的理解，同時瞭解一下這方面的提示。執行個體主要是用於設定網站的Banner。
html 上面的代碼：
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Banner設計</title><%--加入CSS引用--%><link href="../Banner/Banner.css" rel="stylesheet" type="text/css" /></head><body><div id="banner"><div id="logo"><img src="logo.jpg" /></div><%--功能表列--%><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></ul></div></body></html>
CSS代碼：
body{/*背景效果設定*/background-image:url(backgroundimage.jpg);}#banner{/* banner整體布局 */text-align:center;position:absolute;/*設定網頁置中*/width:700px;margin-left:-350px;left:50%;}ul{list-style:none;margin-top:2px;margin-left:-41px;}li{/* 清除列表格式 */list-style:none;margin:1px;float:left;}a{/* 標籤按鈕樣式設定*//*去除原有格式*/text-decoration:none;/*設定按鈕新樣式*/padding:3px;background-image:url(button.jpg);background-repeat:repeat-x;color:#FFFFFF;}a:hover{/* 滑鼠盤旋事件，標籤實現按鈕效果 */text-decoration:none;background-image:none;background-color:#0099FF;color:#000000;}
：
執行個體中使用到的主要技巧：
（1）將標籤實現按鈕的效果
（2）嵌套ID的使用
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
