[散修弟子]JS-2011|2019年09月15日的日报-技能树.IT修真院

发表于： 2019-09-15 23:59:14

2 743

一、今日完成任务

1. 任务目标——任务6；

2. 完成进度：80%；

3. 效果呈现

二、实现功能情况

1. 订制切换开关的样式，通过label for 来关联到checkbox类型的按钮，实现切换开关；

HTML

  <input type="checkbox" id="find" onclick="window.location.href='#top'" />
    <!--点击时页面返回到顶部-->
    <label for="find">
      <span class="button_bg"></span>
      <span class="text_left">找雇主</span>
      <span class="text_right">找护工</span>
    </label>
    <!--为能关联到主要内容的页面切换，需其父元素为同一个-->

CSS

input[type="checkbox"] {
  display: none;
} /* 隐藏复选框 */
label {
  display: inline-block;
  position: fixed;
  top: .3em;
  left: calc(50% - 4em);
  z-index: 1000;
  
  width: 8em;
  height: 2em;
  font-size: 1.7em;

  border-radius: 0.3em;
  background-color: #55a8b3;
  cursor: pointer;
} /* 定义交互样式，即点击label的范围，即会使对应的input生效 */
.button_bg {
  position: absolute;
  right: 0;

  width: 4em;
  height: 2em;

  border-radius: 0.3em;
  background-color: #fff;
} /* 定义滑块样式 */
.text_left,
.text_right {
  position: absolute;
  line-height: 2em;
  text-align: center;

  width: 4em;
  height: 2em;
} /* 声明变为内联块状元素后，再声明宽高，即可实现居中 */
.text_left {
  color: #fff;
}
.text_right {
  color: #5fc0cd;
  left: 4em;
} /* 定义文本样式 */

.button_bg,
.text_left,
.text_right {
  -webkit-transition: right 0.3s, color 0.3s;
  transition: right 0.3s, color 0.3s;
} /* 动画过渡效果 */
#find:checked + label .button_bg {
  right: 4em;
} /* 当复选框被选中时，+ 号后面的有相同父元素的同级元素的样式生效，必须先写同级元素再写子元素 */
#find:checked + label .text_left {
  color: #5fc0cd;
} /* 复选框被选中时，左边文字变色 */
#find:checked + label .text_right {
  color: #fff;
} /* 复选框被选中时，右边文字变色 */

2. 同样通过点击切换开关，来实现页面切换

html： main主体内容，设置两个页面，且切换开关input跟main标签要有共同一父元素body；

CSS

   <input type="checkbox" id="find" onclick="window.location.href='#top'" />
    <!--点击时页面返回到顶部-->

main {
  transform: translateX(-50%);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
} /* 页面滑动动画过渡效果 */
#find:checked ~ main {
  transform: translateX(0);
} /* ~号为之后所有同名标签起作用，定义切换开关对页面滑动作用的动画 */

3. 溢出而隐藏的文本的样式为省略号的样式

html: span为主页文本内容；

CSS

.top span,
.middle span,
.bottom span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap; 
} /* 定义隐藏文本的省略号样式 */

4. 定义列表页的样式

html: 通过命名class为一致，来实现共用样式；命名方法：http://www.xueui.cn/design/168010.html

<article class="find_left">
        <!--找雇主页面-->
        <section class="list_1">
          <div class="top">
            <div class="icon"></div>
            <span>包食.包住</span>
          </div>
          <div class="middle">
            <span>2015-7-1 至 2015-7-15</span>
            <span>40元/小时</span>
            <span class="arrow"></span>
          </div>
          <div class="bottom">
            <div class="icon"></div>
            <span>能自理</span>
          </div>
        </section>
         ...

      <article class="find_right">
        <!--找护工页面-->
        <section
          class="list_1"
          onclick="javascrtpt:window.location.href='https://lespric.github.io/personal-page/'"
        >
          <!--点击打开到个人页面-->
          <div class="top">
            <div class="icon"></div>
            <span>服务日期</span>
          </div>
          <div class="middle">
            <span>2015-7-5 至 2015-7-12</span>
            <span>25元/小时</span>
            <span class="arrow"></span>
          </div>
          <div class="bottom">
            <div class="icon"></div>
            <span>北京.通州.果园</span>
          </div>
        </section>

CSS:定义每个列表行、列表行里的小行的位置和样式，并实现同级的居中对齐；

main {
  margin-top: 8.4em;
  margin-bottom: 8em;
  display: flex;

  width: 200%;
  background-color: #FFF;
} /* 定义主体内容的位置和尺寸 */
.find_left,
.find_right {
  display: flex;
  flex-direction: column;
  width: 50%;
} /* 定义“找雇主”页面和“找护工”页面的宽度 */

main section[class^="list"] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5em;
  box-sizing: border-box;

  width: 100%;
  height: 9.1em;

  border-bottom: .1em solid #E1E5E7;
} /* 定义每个列表行的高度以及各小行的分布等属性 */
main section[class^="list"]:active {
  background-color: #e6e6e6;
} /* 定义列表的点击状态 */

.top,
.middle,
.bottom {
   display: flex;
   align-items: center;
} /* 定义行里面的各小行的居中对齐 */

.top span,
.bottom span {
  margin-left: .75em;

  font-size: 1.2em;
  color: #999999;
} /* 定义上方和下方的小行的分布和字体 */
main .icon {
  width: 1.2em;
  height: 1.2em;
}
.top .icon {
  background: url(../home/img/calendar@2x.png) no-repeat;
  background-size: cover;
}
.bottom .icon {
  background: url(../home/img/location@2x.png) no-repeat center;
  background-size: 1em 1.2em;
} /* 定义上方和下方的小行的图标 */

.middle {
  justify-content: space-between;
}
.middle span:first-child {
  margin-left: 1.5em;

  font-size: 1.4em;
  color: #333333;
}
.middle span:nth-child(2) {
  margin-left: auto;
  margin-right: .75em;

  font-size: 1.6em;
  font-family: "HiraginoSansGBW3", sans-serif;
  color: #E63B0E;
} /* 定义中间小行的分布和字体 */