整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
圖1
圖2
圖3
務8：全屏模式的切換。
這張就是第八，第八小姐就是講關于全屏模式的切換。回到頁面，希望有個按鈕，一點全屏娛樂模式，這一點就切換回來。可能我個人不太喜歡這種模式，但有的人會用，還是把它設計進去。
然后就在這個地方加一個圖標，有空再找一下。找了一個圖標，就找這個。jump through screen one，這有了嗎？有了，還挺好。然后就稍小了一點，再給它大一點，size，就不要說是二十，可以。點它，現在沒效果，來做這個效果。
首先給它定一個變量叫is war screen，是不是全屏的？它肯定是響應數據了，i e f，它不是默認，當然響應數據這邊可以給它添類型，比如它是birch，填birch。如果它不是，還找一個相對的，跟它相反的按鈕，收回來的按鈕，就用這個。
off for screen one，就這個，給它來復制一下，把它放松，就是衣服regan in the first three，如果它真的，就顯示上面的，否則就顯示下面的。來看一下，這邊有一個方法，就這樣可以，可能還做其他的，記得就給它定一個top切換螺絲功能，它是一個，然后再調整這個方法就行了。
就要投screen，點，沒效果，為啥沒效果？是不是點錯了？這邊點這上面，再說下面一個，放到槍上，點，看有切換效果了。怎么樣給它切換？這個是節食里面固定的方法，如果它的值，直接給它切換，就是document，the element，點a request，press greet plug，就是全屏切換。
這里切換了，這點沒效果只按a xe，所以這邊也不對，所以希望它變成這個時候就把它縮回來，這邊就要做一個判斷了，就是來判斷它是不是已經縮放了，如果它已經是展開了，就把它縮回來，也是，這個就退出，否則就把它刪遠，就簡單的刪遠，刪除就可以了。
試一下，點，點，回來了，點，點，再配合原來的一點，就全屏顯示了，舒服了，點回來。這一章就講完了，就把頁面布局都弄好了，包括動態生成菜單頁，瀏覽歷史頁，面包穴導航，把整個布局就全做好了。
下一張開始做具體業務了，首先叫做用戶的登錄，注冊新用戶，還有一個重置密碼。這節課就講到這里，拜拜。
您2019豬事順利，心想事成。
Tab 切換是種很常見的網頁呈現形式，不管是PC或者H5都會經常看到，今天就為小伙伴們提供多種純CSS Tab 切換的實現方式，同時對比一下那種代碼更方便，更通俗易懂。
3種純CSS方式實現Tab 切換
純CSS實現都面臨2個問題：
1、 如何接收點擊事件？
2、 如何操作相關DOM？
擁有 checked 屬性的表單元素， <input type="radio"> 或者 <input type="checkbox"> 能夠接收到點擊事件。
知識點:
1、 使用 radio 標簽的 :checked 偽類，加上 <label for> 實現純 CSS 捕獲點擊事情
2、 使用了 ~ 選擇符對樣式進行控制
<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 內容:123456</div> <div class="content2">tab2 內容: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;
}
知識點:
1、 要使用 :target 偽元素，需要 HTML 錨點，以及錨點對應的 HTML 片段
2、 核心是使用 :target 偽類接收點擊事件
3、 通過兄弟選擇符 ~ 控制樣式
<div class="container"> <div id="content1" class="active">tab 1內容:123456</div> <div id="content2">tab 2內容: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 它表示一個元素獲得焦點，或該元素的后代元素獲得焦點。
重點：它或它的后代獲得焦點。
這也就意味著，它或它的后代獲得焦點，都可以觸發 :focus-within。
知識點
1、 這個屬性有點類似 Javascript 的事件冒泡，從可獲焦元素開始一直冒泡到根元素 html，都可以接收觸發 :focus-within 事件
2、 本例子的思路就是通過獲焦態來控制其他選擇器，以及最重要的是利用了父級的 :not(:focus-within) 來設置默認樣式
<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方式實現Tab 切換
這個效果就很差一些，因為，在tab失去焦點時，就會復原，回到tab1上面，并不推薦這種方式來實現。小編推薦第一種:checked實現方式，更容易理解。
喜歡小編的點擊關注，了解更多知識！
源碼地址和源文件下載請點擊下方“了解更多”
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
