整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
图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小时内与您取得联系。
