Jump to content

[已解决]新进产品页面的CSS 问题


i978
 Share

Recommended Posts

我修改了新进产品的排列,由原来的一行一个,改为一行3个产品,见:http://www.lenewbalance.com/new-products.php,问题是,产品的名字字号太大,而且字数太多时,会溢出,我想的效果是首页推荐产品的效果,见:http://www.lenewbalance.com,该如何更改下面的代码,在/themes/css/global.css

/* product-list.tpl */
ul#product_list{ margin-top:2em; list-style-type:none; }
ul#product_list li {
background: #FFF;
padding: 4px;
height:220px;
clear:both;
margin-bottom:0.3em;
float: left;
width: 29%;
height: 255px;
margin-right: 8px;
clear: none;
margin-left:4px;
margin-top:2px;
}
ul#product_list li a {
text-decoration:none;
color:#000;
}
ul#product_list a.product_img_link{
border: solid 1px #d0d3d8;
float:left;
margin-right:0.6em;
margin-left:15px;
margin-top:30px;
}
ul#product_list li h3{ margin:0.4em 0; width:160px;padding-bottom:2px;height:10px; text-align: center;}
ul#product_list li .new{
background:transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0%;
border:1px solid #488C40;
color:white;
font-size:0.6em;
font-weight:bold;
margin:0pt 1em 0pt 0pt;
padding:0pt 0.4em;
text-transform:;
vertical-align:0.3em;
}
ul#product_list li p.product_desc{ font-size:0.92em; }
ul#product_list li div.center_block{
float:left;
width:100%;
}
ul#product_list li div.right_block{
float:left;
text-align:center;
margin-left:2em;
margin-top:0.5em;
display:inline;
}
ul#product_list li .discount{
color:#da0f00;
text-transform:;
font-weight:bold;
display: block;
}
ul#product_list li .on_sale{
color:#da0f00;
text-transform:;
font-weight:bold;
display: block;
}
ul#product_list li .reduction {
display: block;
margin-bottom: 0.3em;
}
ul#product_list li .price{
display: block;
font-size: 100%;
margin-bottom: 0.2em;
}
ul#product_list li span.availability{
color:#000;
font-size:0.9em;
}
ul#product_list li a.button{ margin-top:0.5em; }


另外,该页面在ie下,排列不齐,如何解决呢?是不是,也是修改上面这段代码?

Share this post


Link to post
Share on other sites

学习一下CSS吧,下面是一些建议:

ul#product_list li a {
text-decoration:none;
color:#000;
font-size: 13px; /* 加上font-size */
}

ul#product_list li {
display: block; /* 加上 */
background: #FFF;
/* padding: 4px; 去掉 */
height:220px;
clear:both;
/* margin-bottom:0.3em; 去掉 */
float: left;
width: 29%;
height: 280px; /* 修改 */
/* margin-right: 8px; 去掉 */
clear: none;
/* margin-left:4px; 去掉 */
/* margin-top:2px; 去掉 */
}

ul#product_list li div.center_block{
float:left;
width:100%;
display: inline; /* 加上 */
margin: 5px; /* 加上 */
padding: 5px; /* 加上 */
}

Share this post


Link to post
Share on other sites

学习一下CSS吧,下面是一些建议:
ul#product_list li a {
text-decoration:none;
color:#000;
font-size: 13px; /* 加上font-size */
}

ul#product_list li {
display: block; /* 加上 */
background: #FFF;
/* padding: 4px; 去掉 */
height:220px;
clear:both;
/* margin-bottom:0.3em; 去掉 */
float: left;
width: 29%;
height: 280px; /* 修改 */
/* margin-right: 8px; 去掉 */
clear: none;
/* margin-left:4px; 去掉 */
/* margin-top:2px; 去掉 */
}

ul#product_list li div.center_block{
float:left;
width:100%;
display: inline; /* 加上 */
margin: 5px; /* 加上 */
padding: 5px; /* 加上 */
}



太难又太懒,谢谢还是要说的。有什么好的工具,可以修改CSS,在线浏览修改效果的。

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More