web页面排班错乱，求指导？

Question

<div class="banner comWidth clearfix" >
    <div class="banner_bar banner_big"
        <ul class="imgBox">
            <li> <a href="#" ><img src="/Users/liudarcy/Documents/code/电商网站实战/img/Screen Shot 2017-10-23 at 10.16.27 AM.png" alt="banner"></a></li>
            <li> <a href="#" ><img src="/Users/liudarcy/Documents/code/电商网站实战/img/Screen Shot 2017-10-23 at 10.16.27 AM.png" alt="banner"></a></li>
        </ul>
        <div class="imgNum">
            <a href="#" class="active"></a>
            <a href="#"></a>
        </div>
    </div>
</div>
<div class="ShopTit comWidth">
    <span class="icon"> </span><h3 style="font-size:24px;float:left;font-weight:normal;padding-left:15px;">手机电脑</h3>
    <a class="more" href="#">更多&gt;&gt;</a>
</div>
<div class="shopList comWidth clearfix">
    <div class="leftArea">
        <div class="banner_bar banner_sm">
            <ul class="imgBox">
                <li> <a href="#"><img src="/Users/liudarcy/Documents/code/电商网站实战/    images/banner/banner_sm_01.jpg" alt="banner"></a></li>
                <li> <a href="#"><img src="//Users/liudarcy/Documents/code/电商网站实战/images/banner/banner_sm_02.jpg" alt="banner"></a></li>
            </ul>
        <div class="imgNum">
                <a href="#" class="active"></a><a href="#"></a><a href="#"></a><a href="#"></a>
        </div>
    </div>
</div>
<div class="rigthArea">
        2
    </div>
</div>

/* Public partment*/
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{
  margin:0;adding:0;}
body{font-size:12px;}
img{border:none;}
li{list-style:none;}
input,select,textarea{outline:none;border:none;}
textarea{resize:none;}
a{text-decoration:none; color: #656565;}

/*清除浮动*/
.clearfix:after{content:"";display:block;clear:both;}
.clearfix{zoom:1;}
.fl{float: left;}
.fr{float: right;}

/*公用*/
.comWidth{width: 1000px;margin-left:auto;margin-right: auto;}
.leftArea{float:left;}
.rightArea{float: right;}
.hide{display: none;}
.show{display: block;}

/*topBar*/ 
.topBar{height: 31px;background-color: #F7F7F7;line-height: 31px;}
.collection{background: url(#) left center no-repeat;padding-left: 19px;font-weight: bold;}
.topBar a:hover{color: red;}

/*logo*/
.logoBar{height: 85px;background-color: #1d7aD9;}
.logo{padding-left: 41px;padding-top:13px;}

/*search*/
.search_box{width:430px;padding-top:23px;padding-left: 185px;}
.search_text{width:350px;height: 35px;padding: 0 5px;}
.search_btn{width: 70px; height: 35px;font-size: 14px;font-family: "Microsoft Yahei","微软雅黑";background-color: #FF8C00;color: #fff;}

/*shopbox*/
.shopCar{width: 145px;height: 35px;background-color: #FF8C00;margin-top:23px;font:14px/35px "Microsoft Yahei","微软雅黑";color: #FFF;margin-right:59px;}
.shopText{height:100%;width: 87px;border-right: #E27A00 solid 1px;text-indent:40px;}
.shopNum{width:27px;height: 35px;border-left: #FF9C01 solid 1px;text-align:right;padding-right:29px;}

/* Nav */
.navBox{height: 35px;background-color: #1369C0;color:#fff;}
.shopClass{width: 190px;position: relative;}
.shopClass h3{line-height: 35px; text-align: center;}
/*.shopClass i{width: 11px;height: 7px;overflow: hidden;display: inline-block;} */
.nav,.shopClass h3{font-family: "Microsoft Yahei", "微软雅黑";}
.nav{line-height: 35px;}
.nav li{float: left;}
.nav a{height: 35px; display: inline-block;padding:0 35px;color: #FFF;}
.nav .active{background-color: #4593FD;}
.shopClass_item{text-align:center;line-height: 1；}

/* 产品弹出列表*/
.shopClass_show{background-color: #4593FD;position: absolute;left:0;top:35px;width: 100%;}
.shopClass_item{padding: 14px 10px;border-bottom: #3487F2 solid 1px;border-top: #5AA1FE solid 1px;}
.shopClass_item dt{height: 22px;}
.shopClass_item .b{font:14px/1 "Microsoft Yahei", "微软雅黑"; }
.shopClass_item a{color:#FFF;}
.shopClass_item .alink{font:14px/1 "Microsoft Yahei", "微软雅黑";  width:48px; height:20px;background:url(/Users/liudarcy/Documents/code/电商网站实战/icon/bcg1.png) center no-repeat;display: inline-block;text-align:;line-height:20px;text-decoration: underline;}

/*shopClass_item* active status*/
.shopClass_active{background-color: #FFF;}
.shopClass_active dt{background:none;}
.shopClass_active a{color:#000;}
.shopClass_active .alink{color: #FFF;text-decoration: none;}

/*弹出的菜单*/
.shopClass_list {width: 568px;position: absolute;left:190px;top:0px;}
}
.shopList_item {padding: 10px 0;border-bottom: #CCC solid 1px;}
.shopList_item dt{color:#4B87D9;line-height:25px;font-weight:bold;height:24px;}
.shopList_item dd{padding-left: 68px;line-height: 25px;margin-top:-24px;}
.shopList_item dd a{margin-right: 12px; }
.shopList_cont {margin:5px 20px;}
.shopList_links {padding:15px;}
.shopList_links a{color:#F7F7F7;background-color: #2785E6;height: 26px;line-height: 26px;font-size:12px;display: inline-block;padding: 0 14px 0 8px;margin-right: 10px;}

/*banner部分*/

.banner{margin-bottom:15px;}
.banner_bar{float:right; position:relative; overflow:hidden;}
.imgBox{position:absolute; left:0; top:0;}
.imgBox li{float:left;}
.imgBox img{display:block;}
.imgNum{position:absolute; left:0; bottom:15px; width:100%; text-align:center;}
.imgNum a{width:20px; height:5px; overflow:hidden; background-color:#FFF; display:inline-block; margin:0 3px;}
.imgNum .active{background-color:#FF7700;}
.banner_big,
.banner_big  img{width:810px; height:326px;}
.banner_big .imgBox{width:1620px; height:326px;}
.banner_sm,
.banner_sm img{width:190px; height:400px;}
.banner_sm .imgBox{width:380px; height:400px;}

/*商品标题*/
.shopTit{height:44px;font-family:"Microsoft Yahei", "微软雅黑";line-height:44px;margin-bottom:15px;}
.shopTit h3{font-size:24px;float:left;font-weight:normal;padding-left:15px;}
.icon{width:44px;height:44px;background:url("/Users/liudarcy/Documents/code/电商网站实战/源代码/ds/images/icon/shopIcon.jpg") left top no-repeat;float:left;}
.more{float:right;}
.more:hover{text-decoration: underline;}
/*商品列表*/
.shopList .leftArea{width:190px;height: 400px;}
.shopList .rightArea{width:808px; border:#999 solid 1px; border-bottom:#FF7201 solid 3px; height:396px; overflow:hidden;}

Answer 1

那你需要的样式是什么样的呢？