<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>netctoss</title>
<meta http-equiv = "content-type" content="text/html;charset=utf-8"/><!--設置編碼集 同時注意設置的編碼集方式要和保存時方式相同 save as -->
<!--引用外部樣式表-->
<link type="text/css" rel="stylesheet" href="demo.css"/>
<style></style>
</head>
<body> <!--整體採用框模型-->
<div id="header"><!--文檔中的特殊部分用id選擇器-->
<img src="images/logo.png"/>
<a href="#">[退出]</a>
</div>
<div id="navi"><!---導航條用列表 因爲可能有下一級列表-->
<ul id="menu"><!--需要取得ul-->
<li> <a class="index" href=""></a></li><!--設置爲背景 不要寫成img便於維護 因爲有許多鏈接的樣式是相同的 所以用class選擇器-->
<li> <a class="role" href=""></a></li><!--選着圖片後 但是鏈接是行內元素 要表位塊級元素-->
<li> <a class ="admin" href=""></a></li>
<li> <a class ="fee" href=""></a></li>
<li> <a class ="account" href=""></a></li>
<li> <a class ="service" href=""></a></li>
<li> <a class ="bill" href=""></a></li>
<li> <a class ="report" href=""></a></li>
<li> <a class ="information" href=""></a></li>
<li> <a class ="password" href=""></a></li>
</ul>
</div>
<div id="main" >
<div id="result" class="success"> <!--選擇是成功還是失敗 可以同時使用兩個選着器-->
<span>操作成功</span><!--因爲需要對 文字 進行css的設置給一個span便於設置-->
<img src="images/close.png"/>
</div>
<div id="result" class="fail"> <!--選擇是成功還是失敗 可以同時使用兩個選着器 id相同 有相同的設置，class不同 通過class得到不同的值 -->
<span>操作失敗</span>
<img src="images/close.png"/>
</div>
<div id="opera"></div>
<div id="data" >
<form>
<table id="dataList"><!--使用ID是因爲 可以與數據庫中的某一個表對應使用-->
<tr class="header">
<td>
<input type="checkbox"/>全選
</td>
<td>管理員ID</td>
<td>姓名</td>
<td>擁有角色</td>
<td></td>
</tr>
<tr >
<td>
<input type="checkbox"/>
</td>
<td>1</td>
<td>張三</td>
<td>超級管理員</td>
<td>
<input class="modify" type="button" value="修改"/>
<input class="delete" type="button" value="***"/>
</td>
</tr>
</table>
</form>
</div>
<div id="pages"></div>
</div>
<div id="footer">
<p>你好</p>
<p>你好</p>
</div>
</body>
</html>
body{
margin:0px;padding:0px;
background-image:url(images/body_bg.png);
background-repeat:repeat-x;
}
div{
border:0px solid black;/*像素可以是小數*/
margin:0px auto;
}
#header,#footer{width:960px;}
#header{
height:61px;
background-image:url(images/top_bg.png);
background-repeat:no-repeat;
text-align:right;/*框中的內容右對齊 text-align設置的是框中文本的位置 不能直接設置文本align*/
}
#navi{
width:100%;
height:91px;
background-image:url(images/navigation.png);
background-repeat:repeat-x;
}
#main{
width:950px;
height:410px;
border:5px solid #8ac1db;
background-color:#e8f3f8;
}
#footer{
height:50px;
}
#data,#opera,#pages{width:910px;}
#data{height:340px;}
#opera{height:30px;}
#pages{height:28px;}
/*定義鏈接文本*/
#header a{
color:white;
font-size:9pt;
text-decoration:none;
margin-right:50px;
line-height:61px;
}
#header a:hover{
font-weight:bold;
text-decoration:underline;/*移動到時顯示 下劃線*/
}
#footer p{
color:white;
/*border:1px solid red;*/
margin:0px;
text-align:center;
line-height:25px;/*有兩行 將50px的寬度填滿*/
}
/*表格樣式*/
#dataList{
background-color:white;
border-collapse:collapse;/*設置單元格和表的邊界*/
width:910px;/*不知道有幾行 則設置td的高*/
font-size:11pt;
}
#dataList td{
border:1px solid #ccc;
height:35px;/*設置每一行的高度*/
text-align:center;
}
#dataList tr.header{ /*設置的是class */
height:40px;
background-color:#fbedce;
font-weight:bold;
}
#dataList tr:hover{/*設置的是僞列*/
background-color:#f7f9fd;
}
input.modify,input.delete{
width:80px;
height:20px;
background-repeat:no-repeat;
background-position:5px 50%;/*設置位置 left top 默認是左上角*/
border:0px;
background-color:white;
}
input.modify{
background-image:url(images/modification.png);
}
input.delete{
background-image:url(images/delete.png);
}
#header img{
float:left; /***採用浮動/
}
#menu{
border:0px;
width:960px;
margin:3px auto;
list-style-type:none;
}
#menu li{
margin-left:14px;
margin-top:1px;
float:left;
}
#menu li a{
/*a是行內元素要使用高寬則要變成塊級元素*/
display:block;
width:68px;
height:77px;
}
a.index{
background-image:url(images/index_out.png);
}
a.role{
background-image:url(images/role_out.png);
}
a.admin{
background-image:url(images/admin_out.png);
}
a.fee{
background-image:url(images/fee_out.png);
}
a.account{
background-image:url(images/account_out.png);
}
a.service{
background-image:url(images/service_out.png);
}
a.bill{
background-image:url(images/bill_out.png);
}
a.report{
background-image:url(images/report_out.png);
}
a.information{
background-image:url(images/information_out.png);
}
a.password{
background-image:url(images/password_out.png);
}
/**/
#main{
position:relative; /*和絕對定位一起用 祖父框架是相對的 當是不需要設置 相對位置 只表示他又定位*/
}
#result{
position:absolute;/*採用絕對定位 記得設置top right等值 一般採用子框架position是絕對的 祖父框架是相對的*/
top:100px;
left:40%;
width:300px;
height:100px;
background-color:#fdecec;
border:1px solid gray;
background-repeat:no-repeat;
background-position:10px 50%;
}
#result span{/*設置 提示文字 */
margin-left:35px;
line-height:100px;/**居中顯示*/
}
#result img{
float:right;
margin:10px 10px 0px 0px;
cursor:pointer;/*設置鼠標的樣式爲手的形狀*/
}
div.success{
color:green;
background-image:url(images/ok.png);
}
div.fail{
color:red;
background-image:url(images/warning.png);
}