发表于: 2018-09-10 22:07:46

1 765


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了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的交替使用,更加熟练了。



返回列表 返回列表
评论

    分享到