[深圳|荣耀师兄]JS-王熠华|2019年07月02日的日报-技能树.IT修真院

发表于： 2019-07-02 21:10:38

1 978

今天完成了什么：

完成任务12；

遇到了什么问题：

下拉列表框想用更好的方式实现使列表在整个屏幕宽度内；发现最好用js来写，css稍微复杂；

收获了什么：

css3为了区分伪类和伪元素，伪元素采用双冒号写法。

常见伪类——:hover,:link,:active,:target,:not(),:focus。

常见伪元素——::first-letter,::first-line,::before,::after,::selection。

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。

这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。

所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。

举例：网站有些联系电话，希望在它们前加一个icon☎，就可以使用:before伪元素，如下：

<style type="text/css">
.phoneNumber::before {
content: '\260E';
font-size: 15px;
}
</style>
<p class="phoneNumber">12345645654</p>

::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。

纯html+css实现点击切换tab页

大致分析一下dom结构，被切换的tab页和按钮放在同一个li内一共需要切换三个页面，也就是说需要有三个li，首先写一下基本dom结构

html结构

<div class="box">
<ul>
<li>
<input type="radio" name="check" id="active1" checked><label for="active1">第一页</label>
<div>道德三皇五帝，功名夏史几行名姓手，青史几行名姓，</div>
</li>
<li>
<input type="radio" name="check" id="active2"><label for="active2">第二页</label>
<div>难难难道德玄可音不可谈，对了知音谈几句，不对知音枉费舌尖难难难</div>
</li>
<li>
<input type="radio" name="check" id="active3"><label for="active3">第三页</label>
<div>诸恶莫作，众苍天有眼，报应</div>
</ul>

</div>

添加文字内容，和tab标签的内容

active的后缀是我自己加的，不知道怎么自动加

<style>
/* 清样式，如果是项目中，不推荐使用通配符来清样式，建议使用标签清样式，通配符清样式会增加页面压力 */
*{
margin:0;
padding:0;
}
/* 宽度为屏宽的一半，高度为屏高的一半，然后居中 */
.box{
width:50vw;
height:50vh;
margin:0 auto;
}
/* 清除li样式 */
ul,li{
list-style: none;
}
/* 将ul相对定位，目的是让内容的div绝对定位时相对ul定位，否则会相对body定位 */
/* ul弹性盒，目的是让li横着排，也可以将li浮动或者转行内块 */
ul{
position:relative;
display:flex;
}
/* 将三个li宽度平分，高度60px */
li{
flex:1;
height:60px;
}
/* input隐藏 */
input{
display:none;
}
/* 设置input的下一个节点label的样式 */
input+label{
display:block;
width:100%;
height:100%;
background:#ccc;
font-size:18px;
text-align: center;
line-height: 60px;
color:#333;
}
/* 设置div内容的基础样式 隐藏内容div*/
input+label+div{
display:none;
position: absolute;
left:0;
top:60px;
}
/* input选中状态时候对应的label的样式 */
input:checked+label{
background: #333333;
color:#fff;
}
/* input选中时候显示对应的div */
input:checked+label+div{
display:block;
}

</style>