国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS實(shí)現(xiàn)Tab布局

morgan / 3132人閱讀

摘要：一布局方式內(nèi)容與分離內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容與一體利用負(fù)，將內(nèi)容區(qū)對齊，然后內(nèi)容去添加背景色，避免不同對應(yīng)的區(qū)域透視重疊。二實(shí)現(xiàn)交互錨點(diǎn)實(shí)現(xiàn)針對布局一從上往下排列，父元素加上。

一、布局方式 1、內(nèi)容與tab分離 

   

     
內(nèi)容1

     
內(nèi)容2

     
內(nèi)容3

     
內(nèi)容4

   

   

ul,li{
  margin:0;
  padding:0;
  list-style:none;
}
.container{
  width:400px;
  height:300px;
  background-color:silver;
}
.tab-content{
  width:100%;
  height:80%;
  overflow:hidden;
}
.tab-content .item{
  width:100%;
  height:100%;
}
.tab-control{
  width:100%;
  height:20%;
}
.tab-control ul{
  height:100%;
}
.tab-control li{
  width:25%;
  height:100%;
  float:left;
  border:1px solid silver;
  box-sizing:border-box;
  background-color:white;
  cursor: pointer;
}
.tab-control li:hover{
  background-color:#7b7474
}
.tab-control a{
  display:inline-block;
  width:100%;
  height:100%;
  line-height:100%;
  text-align:center;
  text-decoration: none;
}
.tab-control a::after{
  content:"";
  display:inline-block;
  height:100%;
  vertical-align:middle;
}
.tab-content .item:target{
  background:yellow;
}

2、內(nèi)容與tab一體 

   
    
     
  • 
       
    1
    
       
    1
    
     
    • 
     
  • 
       
    2
    
       
    2
    
     
    • 
     
  • 
       
    3
    
       
    3
    
     
    • 
     
  • 
       
    4
    
       
    4
    
     
    • 
   


ul,li,p{
  margin:0;
  padding:0;
  list-style:none;
}
.container{
  width:400px;
  height:300px;
  background-color:silver;
  border:1px solid silver;
}
.container ul{
  width:100%;
  height:100%;
  overflow:hidden;
}
.container .item{
  float:left;
  width:25%;
  height:100%;
  background-color:white;
}
.container .item .title{
  line-height:40px;
  border:1px solid silver;
  box-sizing:border-box;
  text-align:center;
  cursor:pointer;
}
.container .item .content{
  width:400%;
  height:100%;
  background-color:yellow;
}
.ml1{
  margin-left:-100%;
}
.ml2{
  margin-left:-200%;
}
.ml3{
  margin-left:-300%;
}
.active{
  position:relative;
  z-index:1
}
.container .item:hover{
  position:relative;
  z-index:1
}
.container .item:hover .title{
  border-bottom:none;
  background-color:yellow;
}

利用負(fù)margin，將內(nèi)容區(qū)對齊，然后內(nèi)容去添加背景色，避免不同tab對應(yīng)的區(qū)域透視重疊。

二、CSS實(shí)現(xiàn)交互 1、錨點(diǎn)實(shí)現(xiàn)（target）

(1)針對布局一：item從上往下排列，父元素tab-content加上overflow:hidden。利用錨點(diǎn)，點(diǎn)擊不同a標(biāo)簽的時(shí)候，具有對應(yīng)ID的item會切換到tab-content的視圖中，然后利用hover給tab按鈕加上切換樣式。


   

     
內(nèi)容1

     
內(nèi)容2

     
內(nèi)容3

     
內(nèi)容4

   

   

ul,li{
  margin:0;
  padding:0;
  list-style:none;
}
.container{
  width:400px;
  height:300px;
  background-color:silver;
}
.tab-content{
  width:100%;
  height:80%;
  overflow:hidden;
}
.tab-content .item{
  width:100%;
  height:100%;
}
.tab-control{
  width:100%;
  height:20%;
}
.tab-control ul{
  height:100%;
}
.tab-control li{
  width:25%;
  height:100%;
  float:left;
  border:1px solid silver;
  box-sizing:border-box;
  background-color:white;
  cursor: pointer;
}
.tab-control li:hover{
  background-color:#7b7474
}
.tab-control a{
  display:inline-block;
  width:100%;
  height:100%;
  line-height:100%;
  text-align:center;
  text-decoration: none;
}
.tab-control a::after{
  content:"";
  display:inline-block;
  height:100%;
  vertical-align:middle;
}

上述方法只是利用了錨點(diǎn)切換，沒有使用：target。修改CSS

ul,li{
  margin:0;
  padding:0;
  list-style:none;
}
.container{
  width:400px;
  height:300px;
  background-color:silver;
}
.tab-content{
  position:relative;
  width:100%;
  height:80%;
  overflow:hidden;
}
.tab-content .item{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
.tab-control{
  width:100%;
  height:20%;
}
.tab-control ul{
  height:100%;
}
.tab-control li{
  width:25%;
  height:100%;
  float:left;
  border:1px solid silver;
  box-sizing:border-box;
  background-color:white;
  cursor: pointer;
}
.tab-control li:hover{
  background-color:#7b7474
}
.tab-control a{
  display:inline-block;
  width:100%;
  height:100%;
  line-height:100%;
  text-align:center;
  text-decoration: none;
}
.tab-control a::after{
  content:"";
  display:inline-block;
  height:100%;
  vertical-align:middle;
}

.tab-content .item:target{
  z-index:1;
  background-color:yellow;
}

item使用絕對定位，然后使用:target修改元素z-index達(dá)到切換效果（其實(shí)也可以通過控制元素的display來達(dá)到切換效果）

（2）針對布局二：


   

ul,
li,
p {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  width: 400px;
  height: 300px;
  background-color: silver;
  border: 1px solid silver;
}

.container ul {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.container .item {
  float: left;
  width: 25%;
  height: 100%;
  background-color: white;
}

.container .item .title {
  line-height: 40px;
  border: 1px solid silver;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
}
.container .item a {
  display:inline-block;
  width:100%;
  height:100%;
  text-decoration: none;
}

.container .item .content {
  width: 400%;
  height: 100%;
  background-color: yellow;
}

.ml1 {
  margin-left: -100%;
}

.ml2 {
  margin-left: -200%;
}

.ml3 {
  margin-left: -300%;
}

.active {
  position: relative;
  z-index: 1
}

.container .item:target {
  position: relative;
  z-index: 1
}

.container .item:target .title {
  border-bottom: none;
  background-color: yellow;
}
2、hover實(shí)現(xiàn)

（1）針對布局一：
無法簡單的通過CSS實(shí)現(xiàn)

（2）針對布局二：


   
    
     
  • 
       
    1
    
       
    1
    
     
    • 
     
  • 
       
    2
    
       
    2
    
     
    • 
     
  • 
       
    3
    
       
    3
    
     
    • 
     
  • 
       
    4
    
       
    4
    
     
    • 
   


ul,li,p{
  margin:0;
  padding:0;
  list-style:none;
}
.container{
  width:400px;
  height:300px;
  background-color:silver;
  border:1px solid silver;
}
.container ul{
  width:100%;
  height:100%;
  overflow:hidden;
}
.container .item{
  float:left;
  width:25%;
  height:100%;
  background-color:white;
}
.container .item .title{
  line-height:40px;
  border:1px solid silver;
  box-sizing:border-box;
  text-align:center;
  cursor:pointer;
}
.container .item .content{
  width:400%;
  height:100%;
  background-color:yellow;
}
.ml1{
  margin-left:-100%;
}
.ml2{
  margin-left:-200%;
}
.ml3{
  margin-left:-300%;
}
.active{
  position:relative;
  z-index:1
}
.container .item:hover{
  position:relative;
  z-index:1
}
.container .item:hover .title{
  border-bottom:none;
  background-color:yellow;
}
3、label與:checked實(shí)現(xiàn)

（1）針對布局一：


  

    
    
內(nèi)容1

    
    
內(nèi)容2

    
    
內(nèi)容3

    
    
內(nèi)容4

  

  

    
    
      
    • 
      
    • 
      
    • 
      
    • 
    

  


ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  width: 400px;
  height: 300px;
  background-color: silver;
}

.tab-content {
  position: relative;
  width: 100%;
  height: 80%;
  overflow: hidden;
}

input {
  margin: 0;
  width: 0;
}

.tab-content .item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.tab-control {
  width: 100%;
  height: 20%;
}

.tab-control ul {
  height: 100%;
}

.tab-control li {
  width: 25%;
  height: 100%;
  float: left;
  border: 1px solid silver;
  box-sizing: border-box;
  background-color: white;
}

.tab-control li:hover {
  background-color: #7b7474
}

.tab-control label {
  display: inline-block;
  width: 100%;
  height: 100%;
  line-height: 100%;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.tab-control label::after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.tab-content .radio-item{
  display:none;
}
.tab-content .radio-item:checked+.item {
  z-index: 1;
  background-color: yellow;
}

利用css :checked與+（選擇緊接在另一個元素后的元素，而且二者有相同的父元素）選擇符。

（2）針對布局二：


   
    
     
  • 
       
       
       
    1
    
     
    • 
     
  • 
       
       
       
    2
    
     
    • 
     
  • 
       
       
       
    3
    
     
    • 
     
  • 
       
       
       
    4
    
     
    • 
   


ul,li,p{
  margin:0;
  padding:0;
  list-style:none;
}
.container{
  width:400px;
  height:300px;
  background-color:silver;
  border:1px solid silver;
}
.container ul{
  width:100%;
  height:100%;
  overflow:hidden;
}
.container .item{
  float:left;
  width:25%;
  height:100%;
  background-color:white;
}
.container .item .title{
  display:inline-block;
  width:100%;
  line-height:40px;
  border:1px solid silver;
  box-sizing:border-box;
  text-align:center;
  cursor:pointer;
}
.container .item .content{
  position:relative;
  width:400%;
  height:100%;
  background-color:yellow;
}
.ml1{
  margin-left:-100%;
}
.ml2{
  margin-left:-200%;
}
.ml3{
  margin-left:-300%;
}
.radio-item{
  display:none;
}
.radio-item:checked~.title{
  background-color:yellow;
  border-bottom:none;
}
.radio-item:checked~.content{
  background-color:yellow;
  z-index:1;
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/111855.html

相關(guān)文章

  • 用純css實(shí)現(xiàn)Tab切換

    摘要：所以當(dāng)我們思考能否用來實(shí)現(xiàn)時(shí)還應(yīng)考慮到的結(jié)構(gòu)，能不能構(gòu)造出滿足已存在的選擇器的布局。用來實(shí)現(xiàn)的好處就是可以盡量大的把組件功能和業(yè)務(wù)邏輯分離開來，真正做一個組件該做的事，希望越來越好 我們今天用css來實(shí)現(xiàn)一個常見的tab切換效果 查看原文可以有更好的排版效果哦 先看效果 https://codepen.io/xboxyan/pe... 前言 哪些簡單的效果可以考慮用css來實(shí)現(xiàn)呢，目前...

    hizengzeng 評論0 收藏0

  • [譯]148個資源讓你成為CSS專家

    摘要：層疊樣式表二修訂版這是對作出的官方說明。速查表兩份表來自一份關(guān)于基礎(chǔ)特性，一份關(guān)于布局。核心第一篇一份來自的基礎(chǔ)參考指南簡寫速查表簡寫形式參考書使用層疊樣式表基礎(chǔ)指南，包含使用的好處介紹個方法快速寫成高質(zhì)量的寫出高效的一些提示。 迄今為止，我已經(jīng)收集了100多個精通CSS的資源，它們能讓你更好地掌握CSS技巧，使你的布局設(shè)計(jì)脫穎而出。 CSS3 資源 20個學(xué)習(xí)CSS3的有用資源 C...

    impig33 評論0 收藏0

  • 一起用python做個炫酷音樂播放器，想聽啥隨便搜！【V2.0升級版，含源碼及打包exe】

    摘要：自制一款炫酷音樂播放器，想聽啥隨便搜下面我們就介紹這個音樂播放器版本新加的部分功能制作過程。直接跳到文末獲取源碼及打包程序。雙擊列表頁面中某一首歌曲，即可實(shí)現(xiàn)音樂播放功能。 ...

    leap_frog 評論0 收藏0

  • CSS3熱身實(shí)戰(zhàn)--過渡與動畫（實(shí)現(xiàn)炫酷下拉，手風(fēng)琴，無縫滾動）

    摘要：規(guī)定動畫的時(shí)長。注意子菜單要用隱藏，在顯示的時(shí)候再設(shè)置。如果不加，實(shí)際上子菜單，以及子菜單下面的一直在頁面上，如果鼠標(biāo)移上去子菜單，以及子菜單下面的。 1.前言 在自己的專欄上寫了十幾篇文章了，都是與js有關(guān)的。暫時(shí)還沒有寫過關(guān)于css3的文章。css3，給我的感覺就是，不難，但是很難玩轉(zhuǎn)自如。今天，就用css3來實(shí)現(xiàn)三個特效，希望這三個特殊能讓大家受到啟發(fā)，利用css3做出更好，更炫...

    zqhxuyuan 評論0 收藏0

  • 《CSS重構(gòu)：樣式表性能調(diào)優(yōu)》讀書筆記

    摘要：特指度度量的是選擇器識別元素的精確性。為中的各個變量賦予相應(yīng)的數(shù)值，就能得到特指度。為類選擇器屬性選擇器和偽類的數(shù)量。該文件包含選項(xiàng)卡組的樣式。易于混淆的屬性，應(yīng)用注釋予以說明。屬性按照字母順序排列。屬性值為時(shí)，省略單位。 1、什么是優(yōu)秀的架構(gòu) （1）優(yōu)秀的架構(gòu)是可預(yù)測的（2）優(yōu)秀的架構(gòu)是可擴(kuò)展的（3）優(yōu)秀的架構(gòu)可提升代碼復(fù)用性（4）優(yōu)秀的架構(gòu)可擴(kuò)展（5）優(yōu)秀的架構(gòu)可維護(hù)什么時(shí)候可以重...

    imingyu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<