CSS案例

時間 2020-02-22

標籤 css 案例欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">css

<html>html

<head>數據庫

<title>netctoss</title>框架

ui

<style></style>url

</head>spa

<body> orm

</div>

</ul>

</div>

</div>

</div>

<form>

<td>

<input type="checkbox"/>全選

</td>

<td>管理員ID</td>

</tr>

<tr >

<td>

</td>

<td>超級管理員</td>

<td>

</td>

</tr>

</table>

</form>

</div>

</div>

</div>

</body>

</html>

body{

margin:0px;padding:0px;

background-p_w_picpath:url(p_w_picpaths/body_bg.png);

background-repeat:repeat-x;

}

div{

border:0px solid black;/*像素能夠是小數*/

margin:0px auto;

}

#header,#footer{width:960px;}

#header{

height:61px;

background-p_w_picpath:url(p_w_picpaths/top_bg.png);

background-repeat:no-repeat;

text-align:right;/*框中的內容右對齊 text-align設置的是框中文本的位置不能直接設置文本align*/

}

#navi{

width:100%;

height:91px;

background-p_w_picpath:url(p_w_picpaths/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-p_w_picpath:url(p_w_picpaths/modification.png);

}

input.delete{

background-p_w_picpath:url(p_w_picpaths/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-p_w_picpath:url(p_w_picpaths/index_out.png);

}

a.role{

background-p_w_picpath:url(p_w_picpaths/role_out.png);

}

a.admin{

background-p_w_picpath:url(p_w_picpaths/admin_out.png);

}

a.fee{

background-p_w_picpath:url(p_w_picpaths/fee_out.png);

}

a.account{

background-p_w_picpath:url(p_w_picpaths/account_out.png);

}

a.service{

background-p_w_picpath:url(p_w_picpaths/service_out.png);

}

a.bill{

background-p_w_picpath:url(p_w_picpaths/bill_out.png);

}

a.report{

background-p_w_picpath:url(p_w_picpaths/report_out.png);

}

a.information{

background-p_w_picpath:url(p_w_picpaths/information_out.png);

}

a.password{

background-p_w_picpath:url(p_w_picpaths/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-p_w_picpath:url(p_w_picpaths/ok.png);

}

div.fail{

color:red;

background-p_w_picpath:url(p_w_picpaths/warning.png);

}

1. CSS的案例
2. css浮動案例
3. 14-HTML-CSS案例
4. CSS浮動案例
5. CSS經典案例
6. css筆記及案例(全)
7. CSS浮動佈局案例
8. Css Secret 案例全套
9. css-Sprites使用案例
10. Css Secret 案例Demo全套
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• PHP Ajax 跨域問題最佳解決方案
• 常用的分佈式事務解決方案

相關標籤/搜索