品優(yōu)購 樓層區(qū) floor

設(shè)計

floor.png

注意這個floor,不能給高度篷朵,內(nèi)容有多少哗戈,算多少

  • 上模塊 box_hd
  • 下模塊 box_bd
<div class="floor">
  <div class="w jiadian">
    <div class="box_hd">頭部</div>
    <div class="box_bd">主體</div>
  </div>
</div>
.floor {
  margin-top: 25px;
}
.box_hd {
  height: 30px;
  border-bottom: 2px solid #c81623;
}

box_hd

  • 有高度可以不用清除浮動
  • 左邊h3,盒子左浮動
  • 右邊tab-list玻佩,右浮動出嘹,因為用到tab切換效果,所以里面要用ul和li來做
      <div class="box_hd">
        <h3>家用電器</h3>
        <div class="tab_list">
          <ul>
            <li><a class="style_red" href="#">熱門</a>|</li>
            <li><a href="#">大家電</a>|</li>
            <li><a href="#">生活電器</a>|</li>
            <li><a href="#">廚房電器</a>|</li>
            <li><a href="#">個護健康</a>|</li>
            <li><a href="#">應(yīng)季電器</a>|</li>
            <li><a href="#">空氣/凈水</a>|</li>
            <li><a href="#">新奇特</a>|</li>
            <li><a href="#">高端電器</a></li>
          </ul>
        </div>
      </div>
.box_hd {
  height: 30px;
  border-bottom: 2px solid #c81623;
}
.box_hd h3 {
  float: left;
  font-weight: 400;
  font-size: 18px;
  color: #c81623;
}
.box_hd .tab_list {
  float: right;
  line-height: 30px;
}
.box_hd .tab_list ul li{
  float: left;
}
.box_hd .tab_list ul li a {
  margin: 0 15px
}

box_bd

  • 左邊分為兩部分咬崔,上面用ul li税稼,下面插入圖片,總體居中對齊
  • 右邊都是圖片鏈接垮斯,將寬度單獨設(shè)為類郎仆,再將部分鏈接設(shè)為block,加入底邊框
      <div class="box_bd">
        <div class="tab_content">
          <div class="tab_list_item">
            <div class="col_210">
              <ul>
                <li><a href="#">節(jié)能補貼</a></li>
                <li><a href="#">4K電視</a></li>
                <li><a href="#">空氣凈化器</a></li>
                <li><a href="#">IH電飯煲</a></li>
                <li><a href="#">滾筒洗衣機</a></li>
                <li><a href="#">電熱水器</a></li>
              </ul>
              <a href="#">
                <img src="./upload/floor-1-1.png" alt="">
              </a>
            </div>
            <div class="col_320">
              <a href="#">
                <img src="./upload/pic1.jpg" alt="">
              </a>
            </div>
            <div class="col_221">
              <a href="#" class="border_bottom">
                <img src="./upload/floor-1-2.png" alt="">
              </a>
              <a href="#">
                <img src="./upload/floor-1-3.png" alt="">
              </a>
            </div>
            <div class="col_221">
              <a href="#">
                <img src="./upload/floor-1-4.png" alt="">
              </a>
            </div>
            <div class="col_219">
              <a href="#" class="border_bottom">
                <img src="./upload/floor-1-5.png" alt="">
              </a>
              <a href="#">
                <img src="./upload/floor-1-6.png" alt="">
              </a>
            </div>
          </div>
        </div>
      </div>
.tab_list_item>div {
  height: 361px;
  float: left;
}
.col_210 {
  width: 210px;
  text-align: center;
  background-color: #f9f9f9;
}
.col_210 ul {
  padding-left: 12px;
}
.col_210 ul li {
  margin-right: 10px;
  float: left;
  width: 85px;
  height: 34px;
  text-align: center;
  line-height: 34px;
  border-bottom: 1px solid #ccc;
}
.col_320 {
  width: 320px;
}
.col_221 {
  width: 221px;
  border-right: 1px solid #ccc;
}
.col_219 {
  width: 219px;
}
.border_bottom {
  display: block;
  border-bottom: 1px solid #ccc;
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末兜蠕,一起剝皮案震驚了整個濱河市丸升,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌牺氨,老刑警劉巖,帶你破解...
    沈念sama閱讀 210,914評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件墩剖,死亡現(xiàn)場離奇詭異猴凹,居然都是意外死亡,警方通過查閱死者的電腦和手機岭皂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評論 2 383
  • 文/潘曉璐 我一進店門郊霎,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人爷绘,你說我怎么就攤上這事书劝。” “怎么了土至?”我有些...
    開封第一講書人閱讀 156,531評論 0 345
  • 文/不壞的土叔 我叫張陵购对,是天一觀的道長。 經(jīng)常有香客問我陶因,道長骡苞,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,309評論 1 282
  • 正文 為了忘掉前任,我火速辦了婚禮解幽,結(jié)果婚禮上贴见,老公的妹妹穿的比我還像新娘。我一直安慰自己躲株,他們只是感情好片部,可當我...
    茶點故事閱讀 65,381評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著霜定,像睡著了一般档悠。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上然爆,一...
    開封第一講書人閱讀 49,730評論 1 289
  • 那天站粟,我揣著相機與錄音,去河邊找鬼曾雕。 笑死奴烙,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的剖张。 我是一名探鬼主播切诀,決...
    沈念sama閱讀 38,882評論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼搔弄!你這毒婦竟也來了幅虑?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,643評論 0 266
  • 序言:老撾萬榮一對情侶失蹤顾犹,失蹤者是張志新(化名)和其女友劉穎倒庵,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體炫刷,經(jīng)...
    沈念sama閱讀 44,095評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡擎宝,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,448評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了浑玛。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片绍申。...
    茶點故事閱讀 38,566評論 1 339
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖顾彰,靈堂內(nèi)的尸體忽然破棺而出极阅,到底是詐尸還是另有隱情,我是刑警寧澤涨享,帶...
    沈念sama閱讀 34,253評論 4 328
  • 正文 年R本政府宣布筋搏,位于F島的核電站,受9級特大地震影響厕隧,放射性物質(zhì)發(fā)生泄漏拆又。R本人自食惡果不足惜儒旬,卻給世界環(huán)境...
    茶點故事閱讀 39,829評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望帖族。 院中可真熱鬧栈源,春花似錦、人聲如沸竖般。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽涣雕。三九已至艰亮,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間挣郭,已是汗流浹背迄埃。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留兑障,地道東北人侄非。 一個月前我還...
    沈念sama閱讀 46,248評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像流译,于是被迫代替她去往敵國和親逞怨。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,440評論 2 348