整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
圖1
圖2
圖3
務(wù)8：全屏模式的切換。
這張就是第八，第八小姐就是講關(guān)于全屏模式的切換。回到頁面，希望有個(gè)按鈕，一點(diǎn)全屏娛樂模式，這一點(diǎn)就切換回來。可能我個(gè)人不太喜歡這種模式，但有的人會(huì)用，還是把它設(shè)計(jì)進(jìn)去。
然后就在這個(gè)地方加一個(gè)圖標(biāo)，有空再找一下。找了一個(gè)圖標(biāo)，就找這個(gè)。jump through screen one，這有了嗎？有了，還挺好。然后就稍小了一點(diǎn)，再給它大一點(diǎn)，size，就不要說是二十，可以。點(diǎn)它，現(xiàn)在沒效果，來做這個(gè)效果。
首先給它定一個(gè)變量叫is war screen，是不是全屏的？它肯定是響應(yīng)數(shù)據(jù)了，i e f，它不是默認(rèn)，當(dāng)然響應(yīng)數(shù)據(jù)這邊可以給它添類型，比如它是birch，填birch。如果它不是，還找一個(gè)相對(duì)的，跟它相反的按鈕，收回來的按鈕，就用這個(gè)。
off for screen one，就這個(gè)，給它來復(fù)制一下，把它放松，就是衣服regan in the first three，如果它真的，就顯示上面的，否則就顯示下面的。來看一下，這邊有一個(gè)方法，就這樣可以，可能還做其他的，記得就給它定一個(gè)top切換螺絲功能，它是一個(gè)，然后再調(diào)整這個(gè)方法就行了。
就要投screen，點(diǎn)，沒效果，為啥沒效果？是不是點(diǎn)錯(cuò)了？這邊點(diǎn)這上面，再說下面一個(gè)，放到槍上，點(diǎn)，看有切換效果了。怎么樣給它切換？這個(gè)是節(jié)食里面固定的方法，如果它的值，直接給它切換，就是document，the element，點(diǎn)a request，press greet plug，就是全屏切換。
這里切換了，這點(diǎn)沒效果只按a xe，所以這邊也不對(duì)，所以希望它變成這個(gè)時(shí)候就把它縮回來，這邊就要做一個(gè)判斷了，就是來判斷它是不是已經(jīng)縮放了，如果它已經(jīng)是展開了，就把它縮回來，也是，這個(gè)就退出，否則就把它刪遠(yuǎn)，就簡(jiǎn)單的刪遠(yuǎn)，刪除就可以了。
試一下，點(diǎn)，點(diǎn)，回來了，點(diǎn)，點(diǎn)，再配合原來的一點(diǎn)，就全屏顯示了，舒服了，點(diǎn)回來。這一章就講完了，就把頁面布局都弄好了，包括動(dòng)態(tài)生成菜單頁，瀏覽歷史頁，面包穴導(dǎo)航，把整個(gè)布局就全做好了。
下一張開始做具體業(yè)務(wù)了，首先叫做用戶的登錄，注冊(cè)新用戶，還有一個(gè)重置密碼。這節(jié)課就講到這里，拜拜。
您2019豬事順利，心想事成。
Tab 切換是種很常見的網(wǎng)頁呈現(xiàn)形式，不管是PC或者H5都會(huì)經(jīng)常看到，今天就為小伙伴們提供多種純CSS Tab 切換的實(shí)現(xiàn)方式，同時(shí)對(duì)比一下那種代碼更方便，更通俗易懂。
3種純CSS方式實(shí)現(xiàn)Tab 切換
純CSS實(shí)現(xiàn)都面臨2個(gè)問題：
1、 如何接收點(diǎn)擊事件？
2、 如何操作相關(guān)DOM？
擁有 checked 屬性的表單元素， <input type="radio"> 或者 <input type="checkbox"> 能夠接收到點(diǎn)擊事件。
知識(shí)點(diǎn):
1、 使用 radio 標(biāo)簽的 :checked 偽類，加上 <label for> 實(shí)現(xiàn)純 CSS 捕獲點(diǎn)擊事情
2、 使用了 ~ 選擇符對(duì)樣式進(jìn)行控制
<div class="container"> <input class="nav1" id="li1" type="radio" name="nav"> <input class="nav2" id="li2" type="radio" name="nav"> <ul class='nav'> <li class='active'><label for="li1">tab1</label></li> <li><label for="li2">tab2</label></li> </ul> <div class="content"> <div class="content1 default">tab1 內(nèi)容:123456</div> <div class="content2">tab2 內(nèi)容:abcdefgkijkl</div> </div> </div>
添加樣式
.container *{
padding: 0;
margin: 0;
}
.container {
position: relative;
width: 400px;
margin: 50px auto;
}
.container input {
display: none;
}
.nav {
position: relative;
overflow: hidden;
}
.nav li {
width: 200px;
float: left;
text-align: center;
background: #ddd;
list-style: none;
}
.nav li label {
display: block;
width: 200px;
line-height: 36px;
font-size: 18px;
cursor: pointer;
}
.content {
position: relative;
overflow: hidden;
width: 400px;
height: 100px;
border: 1px solid #999;
box-sizing: border-box;
padding: 10px;
}
.content1,
.content2 {
display: none;
width: 100%;
height: 100%;
}
.nav1:checked ~ .nav li {
background: #ddd;
color: #000;
}
.nav1:checked ~ .nav li:first-child {
background: #ff7300;
color: #fff;
}
.nav2:checked ~ .nav li {
background: #ddd;
color: #000;
}
.nav2:checked ~ .nav li:last-child {
background: #ff7300;
color: #fff;
}
.nav1:checked ~ .content > div {
display: none;
}
.nav1:checked ~ .content > div:first-child {
display: block;
}
.nav2:checked ~ .content > div {
display: none;
}
.nav2:checked ~ .content > div:last-child {
display: block;
}
.nav li.active {
background: #ff7300;
color: #fff;
}
.content .default {
display: block;
}
知識(shí)點(diǎn):
1、 要使用 :target 偽元素，需要 HTML 錨點(diǎn)，以及錨點(diǎn)對(duì)應(yīng)的 HTML 片段
2、 核心是使用 :target 偽類接收點(diǎn)擊事件
3、 通過兄弟選擇符 ~ 控制樣式
<div class="container"> <div id="content1" class="active">tab 1內(nèi)容:123456</div> <div id="content2">tab 2內(nèi)容:abcdefgkijkl</div> <ul class='nav'> <li class="active"><a href="#content1">tab1</a></li> <li><a href="#content2">tab2</a></li> </ul> <div class="wrap"></div> </div>
添加樣式
.container *{
padding: 0;
margin: 0;
}
.container {
position: relative;
width: 400px;
margin: 50px auto;
}
.nav {
position: relative;
overflow: hidden;
}
li {
width: 200px;
float: left;
text-align: center;
background: #ddd;
list-style: none;
}
li a {
display: block;
width: 200px;
line-height: 36px;
font-size: 18px;
cursor: pointer;
text-decoration: none;
color: #000;
}
#content1,
#content2 {
position: absolute;
overflow: hidden;
top: 36px;
width: 400px;
height: 100px;
border: 1px solid #999;
box-sizing: border-box;
padding: 10px;
}
#content1,
#content2 {
display: none;
width: 100%;
background: #fff;
}
#content1:target,
#content2:target {
display: block;
}
#content1.active {
display: block;
}
.active ~ .nav li:first-child {
background: #ff7300;
color: #fff;
}
#content1:target ~ .nav li {
background: #ddd;
color: #000;
}
#content1:target ~ .nav li:first-child {
background: #ff7300;
color: #fff;
}
#content2:target ~ .nav li {
background: #ddd;
color: #000;
}
#content2:target ~ .nav li:last-child {
background: #ff7300;
color: #fff;
}
.wrap {
position: absolute;
overflow: hidden;
top: 36px;
width: 400px;
height: 100px;
border: 1px solid #999;
box-sizing: border-box;
}
:focus-within 它表示一個(gè)元素獲得焦點(diǎn)，或該元素的后代元素獲得焦點(diǎn)。
重點(diǎn)：它或它的后代獲得焦點(diǎn)。
這也就意味著，它或它的后代獲得焦點(diǎn)，都可以觸發(fā) :focus-within。
知識(shí)點(diǎn)
1、 這個(gè)屬性有點(diǎn)類似 Javascript 的事件冒泡，從可獲焦元素開始一直冒泡到根元素 html，都可以接收觸發(fā) :focus-within 事件
2、 本例子的思路就是通過獲焦態(tài)來控制其他選擇器，以及最重要的是利用了父級(jí)的 :not(:focus-within) 來設(shè)置默認(rèn)樣式
<div class="container"> <div class="nav-box"> <button class="nav1">tab1</button> <button class="nav2">tab2</button> <div class="content-box"> <div class="content1"> content-1 </div> <div class="content2"> content-2 </div> </div> </div> </div>
添加樣式
.container {
width: 300px;
margin: 50px auto;
padding: 10px;
boder: 1px solid #ddd;
}
.nav-box {
font-size: 0;
}
button {
width: 150px;
height: 40px;
box-sizing: border-box;
outline: none;
background: #fff;
border: 1px solid #ddd;
font-size: 18px;
cursor: pointer;
}
button:focus-within {
color: #fff;
background: #ff7300;
}
.content-box {
font-size: 24px;
border: 1px solid #ddd;
height: 100px;
}
.content-box div {
display: none;
}
.nav-box:not(:focus-within) .nav1 {
color: #fff;
background: #ff7300;
}
.nav-box:not(:focus-within) .content1 {
display: block;
}
.nav1:focus-within ~ .content-box .content1 {
display: block;
}
.nav2:focus-within ~ .content-box .content2 {
display: block;
}
3種純CSS方式實(shí)現(xiàn)Tab 切換
這個(gè)效果就很差一些，因?yàn)椋趖ab失去焦點(diǎn)時(shí)，就會(huì)復(fù)原，回到tab1上面，并不推薦這種方式來實(shí)現(xiàn)。小編推薦第一種:checked實(shí)現(xiàn)方式，更容易理解。
喜歡小編的點(diǎn)擊關(guān)注，了解更多知識(shí)！
源碼地址和源文件下載請(qǐng)點(diǎn)擊下方“了解更多”
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
