步驟8│商品相關設定

觀看此階段完成的網頁呈現


下載此階段的CSS

※上方按鈕請按右鍵下載


以下為各項目設定方式說明：

商品相關設定 Product Related Classes
TOP
.briefdesc 
{
    padding:10px 0px;    /*內距設定依序為 上下 / 左右*/
}
.pricetag 
{
    width:290px;            /*寬度*/
}
.pricetag ul li 
{
    display:inline;        /*顯示方式*/
    padding-right:5px;    /*右方內距設定*/
}
#product_home 
{
    width:721px;            /*寬度*/
    float:left;            /*浮動靠左*/
}
#product_home table 
{
    margin-top:10px;    /*上方外距*/
    text-align:left;        /*文字齊左*/
}
#product_home .linkbutton 
{
    background:#eee;    /*背景顏色*/
}
#product_home .main-title 
{
    width:315px;            /*寬度*/
}
#product_home .main-subtitle 
{
    width:315px;            /*寬度*/
    min-height:50px;    /*最小高度*/
}
#product_home .main-subtitle ul li 
{
    display:block;        /*顯示方式*/
}
#product_home .briefdesc 
{
    display:none;        /*顯示方式*/
}
.imagecontainer img 
{
    width:150px;            /*寬度*/
}
.product-list-ad 
{
    display:none;        /*顯示方式*/
}
#product_list 
{
    width:721px;            /*寬度*/
    float:left;            /*浮動靠左*/
}
#product_list table 
{
    width:721px;            /*寬度*/
}
#product_list .imagecontainer 
{
    margin:10px 10px 0px 0px;    /*外距設定依序為 上 / 右 / 下 / 左*/
    width:auto;             /*寬度*/
    float:left;            /*浮動靠左*/
}
#product_list .main-title 
{
    margin:10px 0;        /*外距設定依序為 上下 / 左右*/
    border-bottom:1px #0984ac solid;    /*邊框設定依序為 寬度 / 顏色 / 樣式*/
    width:555px;            /*寬度*/
    float:left;            /*浮動靠左*/
}
#product_list .main-subtitle 
{
    margin-left:10px;        /*左方外距設定*/
    min-height:50px;        /*最小高度*/
    width:90%;                /*寬度*/
}
#product_list .main-subtitle ul li 
{
    display:inline;            /*顯示方式*/
    margin-right:15px;        /*右方外距設定*/
}
#product_list .imagecontainer img 
{
    width:150px;                /*寬度*/
}
#product_list .pricetag 
{
    margin-left:10px;        /*左方外距設定*/
    width:500px;                /*寬度*/
}
#product_list .briefdesc 
{
    display:none;            /*顯示方式*/
}
#product_detail 
{
    width:721px;                /*寬度*/
    float:left;                /*浮動靠左*/
}
#product_detail .main-title 
{
    padding-bottom:5px;    /*下方內距設定*/
}
#product_detail .main-body 
{
    padding:10px;            /*內距*/
}
#product_detail .main-subtitle ul li
{
    display:inline;            /*顯示方式*/
    margin-right:15px;        /*右方外距設定*/
}
#product_detail .pricetag ul li
{
    line-height:20px;            /*行高設定*/
}
#product_detail .pricetag form
{
    width:350px;                /*寬度*/
}
#product_detail .shopping-qty
{
    width:40px;                /*寬度*/
}
#product_detail #imagecontainer
{
    width:auto;                /*寬度*/
    float;left;                /*浮動靠左*/
    margin-bottom:10px;    /*下方外距設定*/
}
#product_detail #imagecontainer img
{
    float:left;                /*浮動靠左*/
    width:auto;                /*寬度*/
}
#product_detail .linkbutton
{
    background:#eee;        /*背景顏色*/
    width:100%;                /*寬度*/
    margin:5px 0px;            /*外距設定依序為 上下 / 左右*/
}
#product_detail span
{
    margin-top:5px;            /*上方外距設定*/
}
#product_detail .main-button
{
    width:80px;                /*寬度*/
    height:25px;                /*高度*/
}
#product_detail #extra_images
{
    float:left;                /*浮動靠左*/
    width:350px;                /*寬度*/
    margin-left:10px;        /*左方外距設定*/
}
#product_detail #extra_images img
{
    width:auto;                /*寬度*/
    margin-right:5px;        /*右方外距設定*/
}