一、今日完成任务
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;
} /* 定义中间小行的分布和字体 */
三、未实现功能
1. 导航栏的下拉列表(ul和li,或者select);
还有如何应用iosselect插件,即实现ios的原生picker
插件地址为:https://blog.csdn.net/chenxueshanBlog/article/details/78863435
2. 通过手势滑动来实现页面切换,暂未看到纯CSS实现,还需配合JS来监听手势;
四、明天任务
1. 完成下拉列表,实现ios原生选择器,即滚筒选择器;
2. 学会如何使用boostrap;
评论