電腦配置單表格:淺綠色個性化電腦配置單表格推薦

  DIY組裝電腦新手朋友經常為瞭尋找配置單卻不知道配置單包含哪些硬件,組裝電腦就是將整臺的電腦各個部件先買好,在選硬件時也必須要為硬件之間有高度的兼容性以及必須硬件的完整性,在兼容性方面大傢一定要記住的是主板與處理器之間一定要兼容,並且要盡量均衡不能浪費硬件性能資源嘛,對新手朋友來說,寫配置單必須要瞭解要購買哪些硬件,硬件之間的兼容也是必須註意的,一般通過查找硬件參數即可知道大概瞭,先來看看我們為大傢提供的個性化電腦配置單表格。

  以下配置單比較個性的原因在於可以通過切換頂部的配置方案導航來顯示所對應的配置單,這個在wodr中是無法實現瞭,3套配置單表格同時存在,但卻隻能顯示一個,需要切換頂部導航來選擇所顯示的,是不是很個性呢?

電腦配置單表格效果演示如下: 

DIY攢機臺式機配置單表格推薦--www.pc841.com 友情提供

高度整合型配置 傢用性價比型配置 遊戲發燒型配置 
高度整合型配置總價:元
CPU 單價:
主 板 單價:
顯 卡 單價:
內 存 單價:
顯示器 單價:
硬 盤 單價:
機箱 單價:
電源 單價:
光驅 單價:
鼠鍵套 單價:
傢用性價比娛樂型配置 總價: .元
CPU 單價:
主 板 單價:
顯 卡 單價:
內 存 單價:
顯示器 單價:
硬 盤 單價:
機箱 單價:
電源 單價:
光驅 單價:
鼠鍵套 單價:
遊戲發燒型配置總價:
CPU 單價:
主 板 單價:
顯 卡 單價:
內 存 單價:
顯示器 單價:
硬 盤 單價:
機箱 單價:
電源 單價:
光驅 單價:
鼠鍵套 單價:

電腦配置單html代碼如下:

<div class="con-text">
<p class="STYLE1"><style type="text/css">
#Tab1{width:630px;padding:0px;margin:0 auto;}
.Menubox {width:100%;background: url(/uploads/answer/2018/01/09/33egg24mziv42198.);height:28px;line-height:28px;}
.Menubox ul{margin:0px;padding:0px;}
.Menubox li{float:left;display:block;cursor:pointer;width:210px;text-align:center;color:#949694;font-weight:bold; font-size:12px;}
.Menubox li.hover{padding:0px;background:#fff;width:208px;border-left:1px solid #A8C29F;border-top:1px solid #A8C29F;border-right:1px solid #A8C29F;background:url(/uploads/answer/2018/01/09/lqx1jmb2mek42199.);color:#739242;font-weight:bold;height:27px;line-height:27px;}
.Contentbox{clear:both;margin-top:0px;border-top:none; text-align:center; height:auto;  padding-top:8px; padding-bottom:8px; border-left:1px solid #A8C29F;border-right:1px solid #A8C29F;border-bottom:1px solid #A8C29F}
.ass-td{ background:#d9d9d9;margin-top:10px;}
.ass-td td{ background:#fff; height:36px; line-height:36px; padding-left:10px;padding-right:10px;font-size:12px;}
.ass-td .gbg{ background:#e5f6de; color:#49740b}
.ass-td b{ color:#49740b}
.ass-td .gt{ background:#f7f7f7;}
.more02{width:96%;height:40px;line-height:40px; text-align:right; clear:both;margin:0 0 10px 0;}</style></p>
<p><script>
<!--
/*第一種形式 第二種形式 更換顯示樣式*/
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
//-->
</script></p>
<p>效果演示如下:&nbsp;</p>
<p>DIY攢機臺式機配置推薦--www.pc841.com 友情提供</p>
<div id="Tab1">
<div class="Menubox">
<ul>
    <li id="one1" class="hover" onClick="setTab('one',1,3)">高度整合型配置&nbsp;</li>
    <li id="one2" onClick="setTab('one',2,3)">傢用性價比型配置&nbsp;</li>
    <li id="one3" onClick="setTab('one',3,3)">遊戲發燒型配置&nbsp;</li>
</ul>
</div>
<div class="Contentbox">
<div id="con_one_1" class="hover">
<table class="ass-td" border="0" cellspacing="1" cellpadding="0" width="100%">
    <tbody>
        <tr>
            <td class="gbg" colspan="2"><strong>高度整合型配置</strong></td>
            <td class="gbg" align="left"><strong>總價:元</strong></td>
        </tr>
        <tr>
            <td class="gt" width="21%" align="center"><b>CPU</b></td>
            <td class="gt" width="58%" align="left">&nbsp;</td>
            <td class="gt" width="21%" align="left"><b>單價:</b></td>
        </tr>
        <tr>
            <td align="center"><b>主 板</b></td>
            <td align="left">&nbsp;</td>
            <td align="left"><b>單價:</b></td>
        </tr>
        <tr>
            <td class="gt" align="center"><b>顯 卡</b></td>
            <td class="gt" align="left">&nbsp;</td>
            <td class="gt" align="left"><b>單價:</b></td>
        </tr>
        <tr>
            <td align="center"><b>內 存</b></td>
            <td align="left">&nbsp;</td>
            <td align="left"><b>單價:</b></td>
        </tr>
        <tr>
            <td class="gt" align="center"><b>顯示器</b></td>
            <td class="gt" align="left">&nbsp;</td>
            <td class="gt" align="left"><b>單價:</b></td>
        </tr>
        <tr>
            <td align="center"><b>硬 盤</b></td>
            <td align="left">&nbsp;</td>
            <td align="left"><b>單價:</b></td>
        </tr>
        <tr>
            <td class="gt" align="center"><b>機箱</b></td>
            <td class="gt" align="left">&nbsp;</td>
            <td class="gt" align="left"><b>單價:</b></td>
        </tr>
        <tr>
            <td align="center"><b>電源</b></td>
            <td align="left">&nbsp;</td>
            <td align="left"><b>單價:</b></td>
        </tr>
        <tr>
            <td class="gt" align="center"><b>光驅</b></td>
            <td class="gt" align="left">&nbsp;</td>
            <td class="gt" align="left"><b>單價:</b></td>
        </tr>
        <tr>
            <td align="center"><b>鼠鍵套</b></td>
            <td align="left">&nbsp;</td>
            <td align="left"><b>單價:</b></td>
        </tr>
    </tbody>
</table>
</div>
<div style="display: none" id="con_one_2">
<table class="ass-td" border="0" cellspacing="1" cellpadding="0" width="100%">
    <tbody>
        <tr>
            <td class="gbg" colspan="2"><strong>傢用性價比娛樂型配置&nbsp;</strong></td>
            <td class="gbg" align="left"><strong>總價: .元</strong></td>
        </tr>
        <tr>
            <td class="gt" width="21%" align="center"><b>CPU</b></td>
            <td class="gt" width="58%" align="left">&nbsp;</td>
            <td class="gt" width="21%" align="left"><b>單價:</b></td>
        </tr>
        <tr>
            <td align="center"><b>主 板</b></td>
            <td align="left">&nbsp;</td>
            <td align="left"><b>單價:</b></td>
        </tr>
        <tr>
            <td class="gt" align="center"><b>顯 卡</b></td>
            <td class="gt" align="left">&nbsp;</td>
            <td class="gt" align="left"><b>單價:</b></td>
        </tr>
        <tr>
            <td align="center"><b>內 存</b></td>
            <td align="left">&nbsp;</td>
            <td align="left"><b>單價:</b></td>
        </tr>
        <tr>
            <td class="gt" align="center"><b>顯示器</b></td>
            <td class="gt" align="left">&nbsp;</td>
            <td class="gt" align="left"><b>單價:</b></td>
        </tr>
        <tr>
            <td align="center"><b>硬 盤</b></td>
            <td align="left">&nbsp;</td>
            <td align="left"><b>單價:</b></td>
        </tr>
        <tr>
            <td class="gt" align="center"><b>機箱</b></td>
            <td class="gt" align="left">&nbsp;</td>
            <td class="gt" align="left"><b>單價:</b></td>
        </tr>
        <tr>
            <td align="center"><b>電源</b></td>
            <td align="left">&nbsp;</td>
            <td align="left"><b>單價:</b></td>
        </tr>
        <tr>
            <td class="gt" align="center"><b>光驅</b></td>
            <td class="gt" align="left">&nbsp;</td>
            <td class="gt" align="left"><b>單價:</b></td>
        </tr>
        <tr>
            <td align="center"><b>鼠鍵套</b></td>
            <td align="left">&nbsp;</td>
            <td align="left"><b>單價:</b></td>
        </tr>
    </tbody>
</table>
</div>
<div style="display: none" id="con_one_3">
<table class="ass-td" border="0" cellspacing="1" cellpadding="0" width="100%">
    <tbody>
        <tr>
            <td class="gbg" colspan="2"><strong>遊戲發燒型配置</strong></td>
            <td class="gbg" align="left"><strong>總價:</strong></td>
        </tr>
        <tr>
            <td class="gt" width="21%" align="center"><b>CPU</b></td>
            <td class="gt" width="58%" align="left">&nbsp;</td>
            <td class="gt" width="21%" align="left"><b>單價:</b></td>
        </tr>
        <tr>
            <td align="center"><b>主 板</b></td>
            <td align="left">&nbsp;</td>
            <td align="left"><b>單價:</b></td>
        </tr>
        <tr>
            <td class="gt" align="center"><b>顯 卡</b></td>
            <td class="gt" align="left">&nbsp;</td>
            <td class="gt" align="left"><b>單價:</b></td>
        </tr>
        <tr>
            <td align="center"><b>內 存</b></td>
            <td align="left">&nbsp;</td>
            <td align="left"><b>單價:</b></td>
        </tr>
        <tr>
            <td class="gt" align="center"><b>顯示器</b></td>
            <td class="gt" align="left">&nbsp;</td>
            <td class="gt" align="left"><b>單價:</b></td>
        </tr>
        <tr>
            <td align="center"><b>硬 盤</b></td>
            <td align="left">&nbsp;</td>
            <td align="left"><b>單價:</b></td>
        </tr>
        <tr>
            <td class="gt" align="center"><b>機箱</b></td>
            <td class="gt" align="left">&nbsp;</td>
            <td class="gt" align="left"><b>單價:</b></td>
        </tr>
        <tr>
            <td align="center"><b>電源</b></td>
            <td align="left">&nbsp;</td>
            <td align="left"><b>單價:</b></td>
        </tr>
        <tr>
            <td class="gt" align="center"><b>光驅</b></td>
            <td class="gt" align="left">&nbsp;</td>
            <td class="gt" align="left"><b>單價:</b></td>
        </tr>
        <tr>
            <td align="center"><b>鼠鍵套</b></td>
            <td align="left">
            <div class="f21text1">
            <div class="ft1 a_lan14b">&nbsp;</div>
            </div>
            </td>
            <td align="left"><b>單價:</b></td>
        </tr>
    </tbody>
</table>
</div>
</div>
</div> 

電腦配置單表格說明:

  本配置單表格僅適用於網頁格式,如需要使用大傢隻要進入網頁編輯器內就可以使用,註意粘帖在編輯器時進入代碼模式編輯再將以上代碼復制到編輯器當中,然後切換到高級模式(可見既可編輯模式)就可以看到頂部的樣式效果,這個時候就可以在編輯器裡填寫配置單表格,找不到編輯器的可以使用電腦百事網文章投稿編輯器進行配置單填寫(進入電腦百事網在線編輯器),總之適用於網絡版本,由於是個性話的表格同時包含3套配置單方案,可以自由切換方案,如此功能在word文檔裡是無法正常顯示的,今後我們也會陸續推出大傢比較喜歡的word表格電腦配置單,希望大傢諒解。

相關推薦閱讀:

◆word配置單表格:綠色清新組裝電腦配置單word表格下載

◆綠色清爽電腦配置單模板下載(網頁版)

電腦配置單表格:綠色清新組裝電腦配置單表格推薦

0 個評論

要回覆文章請先登錄註冊