一、今日完成任务
1. 任务目标——任务5；
2. 完成进度：95%；
3. 效果呈现：
二、已实现情况
1. 引用字体
① 把ttf或otf字体转换为woff、eot、svg等文件，以便适配各种浏览器和设备，format值为解析方式；
② @fontface转换文字地址为： https://www.fontke.com/tool/fontface/
font-family: "HiraginoSansGBW3";
src: url("../personal-page/fonts/HiraginoSansGBW3/HiraginoSansGBW3.otf")
format("opentype"),
url("../personal-page/fonts/HiraginoSansGBW3/HiraginoSansGBW3.woff2")
format("woff2"),
url("../personal-page/fonts/HiraginoSansGBW3/HiraginoSansGBW3.woff")
format("woff"),
url("../personal-page/fonts/HiraginoSansGBW3/HiraginoSansGBW3.ttf")
format("truetype"),
url("../personal-page/fonts/HiraginoSansGBW3/HiraginoSansGBW3.eot")
format("embedded-opentype"),
url("../personal-page/fonts/HiraginoSansGBW3/HiraginoSansGBW3.svg")
format("svg");
下半部分HTML：
<article class="bottom_half">
<section class="work_subhead">
<span></span>
<span>专业技能</span>
</section>
<section class="work_label">
<div class="tag1">
<p class="icon"></p>
<span>住家</span>
</div>
<div class="tag2">
<p class="icon"></p>
<span>不含餐</span>
</div>
</section>
<section class="work_years">
<span>从业年限</span>
<span>0~3年</span>
</section>
<section class="work_time">
<span>工作时间</span>
<span>全天</span>
</section>
<section class="work_price">
<span>服务价格</span>
<span>25元/小时</span>
</section>
<section class="introduction">
<span>自我介绍</span>
<span>
可以洗衣、做饭、照顾老人。在护工方面有5年的经验，经验丰富，如下：</br>
下半部分CSS：
2. ::after 伪元素插入的应用：
用来给下半部分中除了第一栏和第二栏的小标题插入灰色竖线：
.bottom_half section:not([class="work_subhead"]) span:first-child::after {
content: "";
padding-right: 0.875em;
height: 0.875em;
border-right: 0.0625em solid #e1e5e7;
} /* 通过插入伪元素来做边框装饰，伪元素一定要声明content值才生效 */
3. 子元素选择器的应用，把下半部分分为左侧小标题，右侧内容，分别声明样式：
section[class^="work"] span:first-child {
margin-left: 1em;
font-size: 1.6em;
white-space: nowrap;
color: #999;
} /* 定义下半部分中左侧的文字属性及不换行 */
section[class^="work"] span:nth-child(2) {
margin-left: 0.875em;
font-size: 1.6em;
} /* 定义下半部分中右侧的文字属性 */
对于特殊字体的改变，如“服务价格”：
section[class$="price"] span:nth-child(2) {
font-family: "HiraginoSansGBW3", sans-serif;
color: #e26163;
} /* 定义部分section下的特殊文字属性，由于属性选择器的权值为10+1，所有后续要覆盖也要用属性选择器及以上 */
4. 对于“自我介绍”那一行，达到“自我介绍”的小标题固定位置，右侧内容与行高居中对齐，同时行高的高度与右侧内容的高度相适应：
section[class$="introduction"] {
margin-left: 0;
min-height: 5em;
padding-left: 1.6em;
display: flex;
align-items: center;
border-bottom: 0.1em solid #e1e5e7;
color: #333;
} /* 为使“自我介绍”一栏高度随文本内容自适应，采用弹性模型且高度不定 */
section[class$="introduction"] span:first-child {
align-self: flex-start;
margin-top: 1em;
margin-left: 1em;
font-size: 1.6em;
white-space: nowrap;
color: #999;
} /* 定义“自我介绍”的左侧文字固定位置，单独改变排列位置在顶部 */
section[class$="introduction"] span:nth-child(2) {
margin: 0.7em 3em 0.7em 1em;
font-size: 1.4em;
line-height: 1.5;
}
section[class$="introduction"] ol {
padding-left: 0;
margin: 0.5em 0 0 1em;
} /* 定义“自我介绍”的右侧文字属性，文本位置水平居中，包含块高度随内容改变 */
5. 在psd中，发现有留言板的样式，尝试完成点击“留言”按钮，有“留言板”弹出;
HTML:
写出弹出页和弹出窗口，以及底部标签栏的按钮；
<aside id="written">
<form action="save.php" method="post" name="message">
<div class="operating">
<button class="close" type="button" name="close">关闭</button>
<button class="finish" type="submit" name="finish">完成</button>
</div>
<div class="writing">
<textarea class=content name="content" placeholder="留言:" autofocus required></textarea>
<span class="num">0/400</span>
</div>
</form>
</aside>
<footer>
<section class="message">
<button type="button" name="write" onclick="openwindow()">留言</button>
</section>
<section class="phone">
<button type="button" name="call">电话联系</button>
</section>
</footer>
</main>
CSS：
① 给标签栏按钮，弹出页和弹出窗口应用CSS样式，弹出页为使背景偏暗，弹出窗口可以相对于屏幕固定；
aside {
position: fixed;
top: 0;
overflow: hidden;
z-index: 1200;
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
} /* 定义弹出页 */
aside form {
position: fixed;
top: -33em;
display: flex;
flex-direction: column;
width: 100%;
height: 25em;
background-color: #fff;
} /* 定义弹出的留言窗口 */
② 给弹出窗口的弹出方式，做一个简单的移动动画，即top值，从屏幕外， 回到屏幕内；
@keyframes slide {
0% {
top: -33em;
}
100% {
top: 6.4em;
}
}
aside form {
-webkit-animation: slide 1s ease forwards;
-moz-animation: slide 1s ease forwards;
-ms-animation: slide 1s ease forwards;
-o-animation: slide 1s ease forwards;
animation: slide 1s ease forwards;
} /* 定义留言板出现的动画 */
JS
声明一个点击出现的函数，给html中“留言”按钮应用（button标签增加onclick="openwindow()")，再给其他按钮也声明消失的函数，即达到初始状态弹窗是消失(display:none)，点击后变出现(display:block)，再点击其他按钮又消失(display:none)，出现时，上面的动画就会生效；
function openwindow(){
var written = document.getElementById("written");
//获取弹窗的板块
var finish=document.getElementsByClassName("finish")[0];
//获取弹窗中的完成按钮
var close=document.getElementsByClassName("close")[0];
//获取弹窗中的关闭按钮
written.style.display = "block";
//窗体弹出
finish.onclick=function(){
written.style.display = "none";
} //点击完成后，窗体消失
close.onclick=function(){
written.style.display = "none";
} //点击关闭后，窗体消失
window.onclick = function(event) {
if (event.target == written) written.style.display = "none";
} //点击其他区域，窗体消失
}
三、遇到的困难
1. 不够熟练如何在尽可能减少html文本中的class属性，应用各种选择器组合以及选择器的属性（权值）来准确地选择和应用样式，尤其::before和::after伪元素的应用，尽可能不用!important；
2. 对于多种布局方式组合，还不够熟练的应用，只能每写一段，在chrome浏览器查看布局情况，即margin、padding、content值，尤其应用到em和百分比的组合时，还是需要计算来调试；
3. 对于同层级元素的对齐方式，基本都是，给几个同层级的元素定义一个包含块，再给包含块定义为display:flex，通过justify-content和align-items定义对齐方式（垂直居中对齐，水平居中对齐），如有在不规则对齐，采用position:absolute的绝对定位方式进行定位，由此出现盒子套盒子，而绝对定位应用错误又要逐个尝试调试，比较花时间；
4. 不清楚是否轮播图的3倍宽度导致body的宽度变大，出现页面有拖动，且右侧出现白边，只能用overflow-x:hidden的方式强行隐藏，但后面子元素应用100%宽度时，有部分宽度在右边消失，尤其margin和padding值时，会消失在右侧，此时只能用绝对定位方式进行定位；
5.由上诸多不熟悉之处，导致代码较长，且选择器应用较混乱，样式声明也较混乱，基本都是根据调试表现来定布局和样式，每写完一个组件，就要调试一段时间，效率不高，还需花点时间看下他人的优秀代码，如何做到html和CSS的精简化；
四、未完成的任务
1. 占位图的应用：由于引用本地文字和图片较大，且github服务器一般，导致打开页面，图片下载需一段时间，尝试应用占位图先预加载，再设置一段时间后再呈现出来；
2. CSS绘制按钮图标的形状：还没花时间去尝试如何绘制出，返回的三角图标和标签的五角星图标；
3. 再整理下代码，检查哪些重复应用，哪些可以通过选择器组合来一次应用，尤其button的样式，两个button的样式用类选择器组合("，")的方式居然不能共用，还继承不了父元素的字体样式；
五、明天任务
1. 完成未完成任务；
2. 整理总结所应用的功能代码；
返回列表
评论