爱上css

以前很不重视css,老板要做静态页面,时间空闲搞java开发的我胜任了,废话不多说了,看例子:
css-common.css
/*
标题设置
*/
#tr-bg{
background-image:url(../images/shoes-title-bg.jpg);
font-size:14px;
font-weight:bold;
}
tr.font{
font-size:12px;
background-color:#E2EFF6;
}
/*
表格设置
*/
table.tbcss1 {
border-collapse:collapse; /* 关键属性:合并表格内外边框(其实表格边框有2px,外面1px,里面还有1px哦) */
border:solid #85D2FC; /* 设置边框属性;样式(solid=实线)、颜色(#999=灰) */
border-width:1px 0 0 1px; /* 设置边框状粗细:上 右 下 左 = 对应:1px 0 0 1px */
}
table.tbcss1 caption {font-size:14px;font-weight:bolder;}
table.tbcss1 tr {
font-size:12px;
background-color:#E2EFF6;
}
table.tbcss1 th,table.tbcss1 td {border:solid #85D2FC;border-width:0 1px 1px 0;padding:2px;}
tfoot.tbcss1 td {text-align:center;}

/*
超链设置
*/
a:visited{text-decoration:none}


content-1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/css-common.css" rel="stylesheet" type="text/css">
</HEAD>

<BODY>
  <table>
   <tr>
   <td>
   <iframe src="top.html" align="middle" scrolling="no" frameborder="0" width="800" height="50"></iframe>
   <hr>   </td>
   </tr>

<tr>
   <td>
<a href="images/shoes-1.jpg"><img src="images/shoes-1.jpg" alt="No.1Cスプリットソール  (キャンバス)" width="150" height="150" border="0"></a>   </td>
   </tr>
  
   <tr>
   <td>
<strong>商品名称:</strong>No.1Cスプリットソール (キャンバス)   </td>
   </tr>
<tr>
   <td>
<strong>商品种类:</strong><br>
<table>
<tr> </tr>
</table>   </td>
   </tr>

    <tr>
   <td><table width="50%" class="tbcss1">
     <tr align="center" id="tr-bg">
       <td>色</td>
       <td>尺寸・幅</td>
       <td>センチ</td>
       <td>セール</td>
     </tr>
     <tr  class="font">
       <td height="19" align="center" >サーモンピンク</td>
       <td align="center">12M・W</td>
       <td align="center">26</td>
       <td align="center">¥525</td>
     </tr>
     <tr class="font"height="19">
       <td height="19" align="center">サーモンピンク</td>
       <td align="center">13M・W</td>
       <td align="center">26.5</td>
       <td align="center">¥525</td>
     </tr>
     <tr class="font"height="19">
       <td height="19" align="center">サーモンピンク</td>
       <td align="center">14M・W</td>
       <td align="center">27</td>
       <td align="center">¥525</td>
     </tr>
     <tr class="font"height="19">
       <td height="19" align="center">サーモンピンク</td>
       <td align="center">15M・W</td>
       <td align="center">27.5</td>
       <td align="center">¥525</td>
     </tr>
     <tr class="font"height="19">
       <td height="19" align="center">サーモンピンク</td>
       <td align="center">16M・W</td>
       <td align="center">28</td>
       <td align="center">¥525</td>
     </tr>
     <tr class="font"height="19">
       <td height="19" align="center">白</td>
       <td align="center">4W</td>
       <td align="center">22</td>
       <td align="center">¥525</td>
     </tr>
     <tr class="font"height="19">
       <td height="19" align="center">白</td>
       <td align="center">5M・W</td>
       <td align="center">22.5</td>
       <td align="center">¥525</td>
     </tr>
     <tr class="font"height="19">
       <td height="19" align="center">白</td>
       <td align="center">15W</td>
       <td align="center">27.5</td>
       <td align="center">¥525</td>
     </tr>
     <tr class="font"height="19">
       <td height="19" align="center">白</td>
       <td align="center">16M</td>
       <td align="center">28</td>
       <td align="center">¥525</td>
     </tr>
     <tr class="font"height="19">
       <td height="19" align="center">黒</td>
       <td align="center">3W</td>
       <td align="center">21.5</td>
       <td align="center">¥525</td>
     </tr>
     <tr class="font"height="19">
       <td height="19" align="center">黒</td>
       <td align="center">15W</td>
       <td align="center">27.5</td>
       <td align="center">¥525</td>
     </tr>
     <tr class="font"height="19">
       <td height="19" align="center">黒</td>
       <td align="center">16M</td>
       <td align="center">28</td>
       <td align="center">¥525</td>
     </tr>
   </table>
   <hr>
   <iframe src="foot.html" align="middle" scrolling="no" frameborder="0" width="800" height="50"></iframe>   </td>
   </tr>
</table>
</BODY>
</HTML>



附件为例子!

你可能感兴趣的:(html,css)