发表于: 2018-09-10 22:07:46
1 767
今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)
1.更改重新提交了task4,更改了header里面“登录”字样的居中显示,更改了input栏在输入时候的样式。
2.task5的大概样式搞定了,现在是这样
,有几个地方还没有搞定,我写在下面了。
明天计划的事情:(一定要写非常细致的内容)
1.完善task5
2.学习bootstrap
遇到的问题:(遇到什么困难,怎么解决的)
task4碰到的问题:
1.问题:登录字样没有完全居中
解决:text-align:center;没法做到居中的原因是两边文字块的宽度影响了整体的宽度,所以把两边都改成绝对定位,就可以做到居中了。
2.问题:input在输入时的样式改进
解决:样式方面主要有两个地方与设计图不符,不过首先应该确认的是正在输入状态的伪类是:focus,
一个是因为input type=number导致右边会出现加减的按钮,而且是默认样式,很不好看,通过
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
}
input[type="number"]{
-moz-appearance:textfield;
}
可以去掉。
另一个是输入的时候会有边框进行高亮显示,这个边框并不是border,而是outline,设置为outline:none;就可以去掉边框样式了。这个属性的使用方法和outline基本一致。
3.问题:服务器文件已经更新了,但是输入网址访问还是原本的样式。
解决:这个问题真的超汗,我找了好久,结果最后发现是缓存的问题…………
task5碰到的问题:
1.问题:背景图片的灰色遮罩的实现
解决:查了一下网上的各种资料,最后选择直接在图片的html前面加了一个空白的div,设置成绝对布局,并且z-index设置为1让其更靠前,再把透明度设置成0.2,就可以实现设计稿上的效果了。
代码如下:
html:
<div class="cover"></div>
<img class="avatar-picture" src="images/picture.png" alt="头像">
css:
.avatar .cover {
background: black;
opacity: 0.2;
position: absolute;
top: 0.95rem;
z-index: 1;
background-size: 100% 3.25rem;
width: 100%;
height: 4.15rem;
}.avatar-picture {
position: absolute;
left: 0.3rem;
height: 1.7rem;
width: 1.7rem;
z-index: 2;
}
2.问题:专业技能这一行左边这一小块,很明显比placeholder小,所以没法用border了,怎么办
解决:在前面插入了一个空白的span,并且设置相应的width,给span设置border。
3.问题(未解决!!!!):下面的两行布局我是用table写的,但是如果给td都设置上border-bottom会变成
这个样子,可以明显的看见左边和右边的边框有分隔,下面还有双层边框的情况出现,但是因为我使用了:nth-child(odd)和:nth-child(even)的选择器,好像:nth-child(2)这样的选择器无法覆盖上去了,这种情况除了加class没有别的方法了吗?
我也尝试了一下给tr加border-bottom,但是不知道为什么显示不出来……
4.问题:还是昨天的问题,设计稿尺寸过大
解决:我看了师兄和另一位同学给的留言,通过
content="width=device-width,initial-scale=0.5, minimum-scale=1, maximum-scale=1, user-scalable=no">
和
html {
font-size: 400%;
}
双管齐下似乎解决了,现在在最小尺寸的320px上显示是这样的
收获:(通过今天的学习,学到了什么知识)
好多……
1.更熟练的交替使用float和absolute以及fixed,对流有了更深的了解。
2.对input相关的样式设置有了更深的理解。
3.对于ul里面li的一些样式,例如padding和margin的交替使用,更加熟练了。
评论