DIY组装电脑新手朋友经常为了寻找配置单却不知道配置单包含哪些硬件，组装电脑就是将整台的电脑各个部件先买好，在选硬件时也必须要为硬件之间有高度的兼容性以及必须硬件的完整性，在兼容性方面大家一定要记住的是主板与处理器之间一定要兼容，并且要尽量均衡不能浪费硬件性能资源嘛，对新手朋友来说，写配置单必须要了解要购买哪些硬件，硬件之间的兼容也是必须注意的，一般通过查找硬件参数即可知道大概了，先来看看我们为大家提供的个性化电脑配置单表格。
以下配置单比较个性的原因在于可以通过切换顶部的配置方案导航来显示所对应的配置单，这个在wodr中是无法实现了，3套配置单表格同时存在，但却只能显示一个，需要切换顶部导航来选择所显示的，是不是很个性呢？
电脑配置单表格效果演示如下：
DIY攒机台式机配置单表格推荐--www.pc841.com 友情提供
- 高度整合型配置
- 家用性价比型配置
- 游戏发烧型配置
| 高度整合型配置 | 总价：元 | |
| 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(http://www.pc841.com/images/biaoge_bg.gif);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(http://www.pc841.com/images/peizhidan_top.gif);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>效果演示如下： </p>
<p>DIY攒机台式机配置推荐--www.pc841.com 友情提供</p>
<div id="Tab1">
<div class="Menubox">
<ul>
<li id="one1" class="hover" onClick="setTab('one',1,3)">高度整合型配置 </li>
<li id="one2" onClick="setTab('one',2,3)">家用性价比型配置 </li>
<li id="one3" onClick="setTab('one',3,3)">游戏发烧型配置 </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"> </td>
<td class="gt" width="21%" align="left"><b>单价：</b></td>
</tr>
<tr>
<td align="center"><b>主 板</b></td>
<td align="left"> </td>
<td align="left"><b>单价：</b></td>
</tr>
<tr>
<td class="gt" align="center"><b>显 卡</b></td>
<td class="gt" align="left"> </td>
<td class="gt" align="left"><b>单价：</b></td>
</tr>
<tr>
<td align="center"><b>内 存</b></td>
<td align="left"> </td>
<td align="left"><b>单价：</b></td>
</tr>
<tr>
<td class="gt" align="center"><b>显示器</b></td>
<td class="gt" align="left"> </td>
<td class="gt" align="left"><b>单价：</b></td>
</tr>
<tr>
<td align="center"><b>硬 盘</b></td>
<td align="left"> </td>
<td align="left"><b>单价：</b></td>
</tr>
<tr>
<td class="gt" align="center"><b>机箱</b></td>
<td class="gt" align="left"> </td>
<td class="gt" align="left"><b>单价：</b></td>
</tr>
<tr>
<td align="center"><b>电源</b></td>
<td align="left"> </td>
<td align="left"><b>单价：</b></td>
</tr>
<tr>
<td class="gt" align="center"><b>光驱</b></td>
<td class="gt" align="left"> </td>
<td class="gt" align="left"><b>单价：</b></td>
</tr>
<tr>
<td align="center"><b>鼠键套</b></td>
<td align="left"> </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>家用性价比娱乐型配置 </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"> </td>
<td class="gt" width="21%" align="left"><b>单价：</b></td>
</tr>
<tr>
<td align="center"><b>主 板</b></td>
<td align="left"> </td>
<td align="left"><b>单价：</b></td>
</tr>
<tr>
<td class="gt" align="center"><b>显 卡</b></td>
<td class="gt" align="left"> </td>
<td class="gt" align="left"><b>单价：</b></td>
</tr>
<tr>
<td align="center"><b>内 存</b></td>
<td align="left"> </td>
<td align="left"><b>单价：</b></td>
</tr>
<tr>
<td class="gt" align="center"><b>显示器</b></td>
<td class="gt" align="left"> </td>
<td class="gt" align="left"><b>单价：</b></td>
</tr>
<tr>
<td align="center"><b>硬 盘</b></td>
<td align="left"> </td>
<td align="left"><b>单价：</b></td>
</tr>
<tr>
<td class="gt" align="center"><b>机箱</b></td>
<td class="gt" align="left"> </td>
<td class="gt" align="left"><b>单价：</b></td>
</tr>
<tr>
<td align="center"><b>电源</b></td>
<td align="left"> </td>
<td align="left"><b>单价：</b></td>
</tr>
<tr>
<td class="gt" align="center"><b>光驱</b></td>
<td class="gt" align="left"> </td>
<td class="gt" align="left"><b>单价：</b></td>
</tr>
<tr>
<td align="center"><b>鼠键套</b></td>
<td align="left"> </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"> </td>
<td class="gt" width="21%" align="left"><b>单价：</b></td>
</tr>
<tr>
<td align="center"><b>主 板</b></td>
<td align="left"> </td>
<td align="left"><b>单价：</b></td>
</tr>
<tr>
<td class="gt" align="center"><b>显 卡</b></td>
<td class="gt" align="left"> </td>
<td class="gt" align="left"><b>单价：</b></td>
</tr>
<tr>
<td align="center"><b>内 存</b></td>
<td align="left"> </td>
<td align="left"><b>单价：</b></td>
</tr>
<tr>
<td class="gt" align="center"><b>显示器</b></td>
<td class="gt" align="left"> </td>
<td class="gt" align="left"><b>单价：</b></td>
</tr>
<tr>
<td align="center"><b>硬 盘</b></td>
<td align="left"> </td>
<td align="left"><b>单价：</b></td>
</tr>
<tr>
<td class="gt" align="center"><b>机箱</b></td>
<td class="gt" align="left"> </td>
<td class="gt" align="left"><b>单价：</b></td>
</tr>
<tr>
<td align="center"><b>电源</b></td>
<td align="left"> </td>
<td align="left"><b>单价：</b></td>
</tr>
<tr>
<td class="gt" align="center"><b>光驱</b></td>
<td class="gt" align="left"> </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"> </div>
</div>
</td>
<td align="left"><b>单价：</b></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
电脑配置单表格说明：
本配置单表格仅适用于网页格式，如需要使用大家只要进入网页编辑器内就可以使用，注意粘帖在编辑器时进入代码模式编辑再将以上代码复制到编辑器当中，然后切换到高级模式（可见既可编辑模式）就可以看到顶部的样式效果，这个时候就可以在编辑器里填写配置单表格，找不到编辑器的可以使用电脑百事网文章投稿编辑器进行配置单填写（进入电脑百事网在线编辑器），总之适用于网络版本，由于是个性话的表格同时包含3套配置单方案，可以自由切换方案，如此功能在word文档里是无法正常显示的，今后我们也会陆续推出大家比较喜欢的word表格电脑配置单，希望大家谅解。
相关推荐阅读：
◆word配置单表格：绿色清新组装电脑配置单word表格下载
◆绿色清爽电脑配置单模板下载（网页版）
;height:28px;line-height:28px){kind=link}
;color:#739242;font-weight:bold;height:27px;line-height:27px){kind=link}