<!DOCTYPE html>
<!-- 上面的dtd 聲明是簡寫，全寫請從模板文件複製 -->
<html>
<head>
<title>css例子基礎整理</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style> /*寫入樣式*/
ul {
list-style-type: none;
padding-left:0;
margin-left: 0;
font-size: 14px;
}
ul a {
border: 1px solid #99f;
display: block; /* 行內元素設置爲塊級元素 */
margin:2px 0;
width: 180px;
padding: 5px;
text-decoration: none;
}
ul a:link {color: #00f;}
ul a:visited {color: #99f;}
ul a:hover {
color: #00f;
background-color: #ff9;
}
dl {
list-style-type: none;
padding-left:0;
margin-left: 0;
font-size: 14px;
width: 760px; /* 800x600 */
border: 4px solid #ccc;
padding-top: 90px;
height: 50px;
}
dl a {
border: 1px solid #99f;
display: block; /* 行內元素設置爲塊級元素 */
margin:2px 0 2px -1px;
padding: 5px;
text-decoration: none;
padding-left: 20px;
padding-right: 20px;
}
dl a:link {color: #00f;}
dl a:visited {color: #99f;}
dl a:hover {
color: #00f;
background-color: #ff9;
}
dl dt {
float: left;
}
body {
font-family: Arial, "Arial Black", "宋體";
font-size: 15px; /*px 像素, em 以普通字號爲一個單位, 百分比, pt 打印點, cm 釐米*/
color: #0000ff; /*rgb(255,255,0);*/
}
h1, h2 {
font-size: 25px;
color: #f00;
font-weight: bold;
}
p {
color: #666;
width: 400px;
}
p.myP { /* 聲明css類 */
font-size: 12px;
font-weight: bold;
}
h1 span { /* 選擇h1的子孫元素span */
color: #fff;
background-color: #999;
}
p span {
text-decoration: underline;
}
#person {
background-color: #ccccff;
}
#wrapper1 {
margin: 0 auto 0 auto; /* 上右下左 */
padding: 5px; /* 內部填充5px */
border: 2px solid #000;/*邊框2像素實線黑色*/
width: 600px;
height: 300px;
}
div {
border: 2px solid #f00;
height: 30px;
}
#wrapper1 #div1 {
border: 2px solid #f00;
width: 200px;
height:300px;
float: left;
}
#wrapper1 #div2 {
border: 2px solid #f00;
width: 200px;
float: left;
}
#wrapper1 #div3 {
border: 2px solid #f00;
width: 200px;
float: right;
clear: left;
}
#table2 td {
border: 1px solid #000;
width: 500px;
height: 100px;
margin: 10px auto;
}
#td1 {
background: url(images/star.gif);
}
#td2 {
background: url(images/bg_link.gif) repeat-x;
}
#td3 {
background: #ff9 url(images/column_bg.png) repeat-y;
}
#td4 {
background: url(images/bg_story_high.png) repeat-y right top;
}
#td5{
height: 300px;
background: url(images/cosmo.png) no-repeat 50% 50%;
}
#td6 {
height: 300px;
background: url(images/cosmo.png) no-repeat -20px 50%;
}
#link1 {
display: block;
width: 100px;
height: 26px;
line-height: 26px;
border: 1px solid #000;
font-size: 14px;
background: rgb(231,231,231) url(images/nav.png) no-repeat right 2px;
font-size: 14px;
text-decoration: none;
color: #000;
font-weight: bold;
padding-left: 10px;
}
#link1:hover {
background-position: right 50%;
background-color: rgb(178,245,17);
}
</style>
</head>
<body>
<h1>手冊服務對<span>象爲網</span>頁前臺設</h1>
<p class="myP">本參考<span>手冊</span>是在《完美網頁設計CSS快速參考》基礎上進行的第3次重要升級 </p>
<h2>升級理由</h2>
<p>以<span id="person">蘇昱</span>的《樣式表中文手冊》爲代表的<span>CSS</span>參考資料影響了</p>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">博客</a></li>
</ul>
<dl>
<dt><a href="#">首頁</a></dt>
<dt><a href="#">博客</a></dt>
</dl>
<div id="wrapper1">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
<a href="#" id="link1">Link 1</a>
<table id="table2">
<tr>
<td id="td1">1</td>
</tr>
<tr>
<td id="td2">2</td>
</tr>
<tr>
<td id="td3">3</td>
</tr>
<tr>
<td id="td4">4</td>
</tr>
<tr>
<td id="td5">5</td>
</tr>
<tr>
<td id="td6">6</td>
</tr>
</table>
</body>
</html>
以下爲效果圖
本來想直接上傳代碼的，結果整個頁面被改成這樣了，555
