2011年10月5日 星期三

HTML表格table邊框1px


在程式碼中貼入以下語法,再其更改各人需求

<title>HTML讓table邊框變1px</title>
<style type="text/css">
<!--
.entry_t table{border-collapse:collapse;border-spacing:0;border-left:1px solid #d2d2d2;border-top:1px solid #d2d2d2;}
.entry_t th, .entry_t td{border-right:1px solid #d2d2d2;border-bottom:1px solid #d2d2d2;padding:5px 15px;}
.entry_t th{font-weight:bold;}
-->
</style>

</head>

****************************************  CSS貼在 </head> 之上

<body>
<div class="entry_t">
  <table width="550" cellpadding="4" class="w_6">
    <tr>
      <td width="87" bgcolor="#E6FFD9">設備尺寸</td>
      <td width="429" bgcolor="#E6FFD9">W:1100mm x L:1000mm x H:1700mm</td>
      </tr>

    <tr>
      <td>設備重量</td>
      <td>760kg</td>
    </tr>
    <tr>
      <td bgcolor="#E6FFD9">點膠控制器</td>
      <td bgcolor="#E6FFD9">可連結各式控制器(廠商指定) / 注膠時間控制精度±1ms內</td>
      </tr>
  </table>
</div>

</body>

****************************************   貼在 <body> <table> </body> 中間

以上這是為這個 <table> 單獨設邊框1px,不會動到其它 <table>
若要網頁裡所有邊框都為1px
就不用<div>另外去包

範例

CSS
<style type="text/css">
<!--
t table{border-collapse:collapse;border-spacing:0;border-left:1px solid #d2d2d2;border-top:1px solid #d2d2d2;}
t th, .t td{border-right:1px solid #d2d2d2;border-bottom:1px solid #d2d2d2;padding:5px 15px;}
t th{font-weight:bold;}
-->
</style>


HTML 
<table width="550" cellpadding="4" class="w_6">
    <tr>
      <td width="87" bgcolor="#E6FFD9">設備尺寸</td>
      <td width="429" bgcolor="#E6FFD9">W:1100mm x L:1000mm x H:1700mm</td>
      </tr>
    <tr>
      <td>設備重量</td>
      <td>760kg</td>
    </tr>
    <tr>
      <td bgcolor="#E6FFD9">點膠控制器</td>
      <td bgcolor="#E6FFD9">可連結各式控制器(廠商指定) / 注膠時間控制精度±1ms內</td>
      </tr>
  </table>


網路適用字型大小

新細明體
11  12  13  16  20

再上去的話基本上看的順眼就好!
因為字夠大都看的清楚 XD

2011年10月4日 星期二

iframe 應用

網路上找的語
<iframe src="html_intro.asp" width="100%" height="300">
<p>Your browser does not support iframes.</p>
</iframe>

創視紀用的語法
<iframe src="header.htm" frameborder="0" height="436" width="980"></iframe>

註:
其中讓  frameborder="0" iframe 外框為 "0"
連結 目標:_parent

iframe 可用 CSS 包
若要置中,則用 <table> 包起來

範例:
<table width="980" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><iframe src="header.htm" width="980px" height="436px" frameborder="0"></iframe></td>
</tr>
</table>


註:
align="center"  置中




2011年9月23日 星期五

[CSS]利用css解決Chrome中最小字級12px的問題

設計網頁時,以中文網頁來說,其實往往會混雜著英文在內,有時候若是不將文字轉成圖片,又採用低於12px的字級,這種大小的字級在Chrome中都會強制變成12px。
這是因為Chrome為了避免字體太小看不清楚,所以便在軟體中設定凡是低於12px的文字,就強制設定為12px,以便瀏覽者能清楚的看到內容,這本是一種貼心的設計,但是對設計者來說,反倒會成為一種困擾阿~
上述的問題,壞掉的印表機曾經嘗試在css中設定該字級為font-size:10px;或是用font-size:10px!important來設定,都是無法改變Chrome軟體中字級的強制性,這問題實在讓人頭大。
後來,壞掉的印表機為了解決這個問題,發現只要利用webkit(Chrome的核心),的私有css屬性來解決,我們只要加上下面第一行css碼後設定字級大小,就能解決這個問題了~



在 <body> 的CSS 裡加上這一行即可!

-webkit-text-size-adjust:none;

by 壞掉的印表機 - 設計、生活、態度