日期:2014-05-17  浏览次数:20845 次

css页面布局--向左浮动

CSS code
/*=Library*/
.GoodsSearchWarp{/*外层*/
    width:98%;
    text-align:left;
    clear:both;
    margin:15px auto;
}
.GoodsSearchWarp .title{/*头部*/
    border:1px solid #f2f2f2;
    padding:1px;
    border-left:3px solid #f90;
    border-bottom:3px solid #f2f2f2;
    height:30px;

}
.GoodsSearchWarp .title .path{/*显示路径*/

    padding-left:5px;
    padding-top:5px;
    float:left;
}
.GoodsSearchWarp .title .listmode{/*搜索列表排序方式*/
    padding-top:3px;
    display:inline;
    float:right;
}
.GoodsSearchWarp .title .listmode select{/*搜索列表排序方式*/
    background:#f2f2f2;
    font-size:12px;
    color:#000;
}
.GoodsSearchWarp .ItemsWarp {/*商品条目循环项外层*/
    width:100%;

}
.GoodsSearchWarp .items {/*商品条目循环项*/
    width:210px;
    padding:10px;
   
    border-bottom:1px dotted #ccc;
}

.GoodsSearchWarp .items .goodpic{/*商品图片*/
    float:left;
}
.GoodsSearchWarp .items .goodpic a {/*商品图片*/
    padding:3px;
    border:1px solid #ccc;
    margin:0 5px;
    display:block;
    width:200px;
    height:200px;
    overflow:hidden;
    vertical-align:middle
}
.GoodsSearchWarp .items .goodpic a img{/*商品图片*/
    margin:0 auto;
    display:block;
    
}
.GoodsSearchWarp .items .goodpic a:hover {/*商品图片-MouseOver*/
    border:2px solid #369;
    padding:2px;
}
.GoodsSearchWarp .items .goodinfo{
    
    width:80%;
}
.GoodsSearchWarp .items h1 a{
    font-weight:bold;
    color:#000;
    margin-bottom:10px;
    font-size:14px;
}
.GoodsSearchWarp .items ul{
display:block;
}
.GoodsSearchWarp .items ul li{
    color:#000;
    float:none;
}
.GoodsSearchWarp .items .intro{
    color:#369;
}
.GoodsSearchWarp .items .button{
    margin:4px 0;
    float:right;
    
}



HTML code


<div class="GoodsSearchWarp">
  <form name="FORM_TPL_GOODSSEARCHLIST" action="index.php" method="get">
    {form_hidden_value}
    <div class="title">
      <div class="path"><a href="shop.dwt">Home</a> {goods_catmenu}</div>
      <div class="listmode">Sort by-{goodslist_order} {brandlist}</div>
      <div class="clear"></div>
    </div>
    <div class="ItemsWarp clearfix">
      <!-- BEGIN goodslist_row 0,1,2 -->
      <div class="items">
        <div class="goodpic"><a href="goods_details.dwt?goodsid={goods_id}&productname={goods_seoname}" target="_blank" onmouseover="if(document.readyState=='complete') listPicLib.show(this,[{goods_images}]);" onmouseout="listPicLib.out();" >{goods_small_image}</a></div>
        <div class="goodinfo">
          <h1><a href="goods_details.dwt?goodsid={goods_id}&productname={goods_seoname}" target="_blank">{goods_name}</a></h1>
          </li>
          <!-- CTRLBEGIN marketpriceshow -->
          <li>List Price:{goods_price1}</li>
          <!-- CTRLEND marketpriceshow -->
          <li>Price:<span class="p14redb">{goods_price2}</span></li>
          <!-- CTRLBEGIN savepriceshow -->
          <li>{goods_savetitle}{goods_saveprice}</li>
          <!-- CTRLEND savepriceshow -->
          <!-- CTRLBEGIN pointshow -->
          <li>Score:{goods_point}</li>
          <!-- CTRLEND pointshow -->
          <li class="intro">{goods_intro}</li>
          <li class="intro">{goods_paybutton}</li>
          <li class="button">{goods_buybutton} <a hr