发表于: 2018-09-04 22:15:55

1 724


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin) 

1:今天完成了任务四的全部内容,然后学会了一些语义化的标签就像<header>这个

是在HTML5里面新添加的标签,标签定义文档的页眉,在这里面的作用是非常大的

可以更加详细的显示你想要的信息。

明天计划的事情:(一定要写非常细致的内容) 

明天我计划任务五的开始,任务五好像也是要切图的样子,还是要先去看一看才行的,

不懂的问题还是要多向师兄师姐请教下才行,像师兄们借一些关于CSS和HTML的书来看下
遇到的问题:(遇到什么困难,怎么解决的) 

<header>这个是在HTML5里面新添加的标签,和原来的<head>标签有什么区别呢?

收获:(通过今天的学习,学到了什么知识)

1:转换成行内快标签:当一个行内元素如果要进行添加宽度和高度的时候需要这个进行转换的

2:二倍图的话计算出百分比以后要除以2

3:一篇博客是没有全部的内容的,当要找一样东西的时候,要翻出十篇文章出来找答案

4:每一项标签结束以后都会用</>来表示,这个结束了以后就可以重新开一个标签重新写了

5:标签选择器可以在写完一个以后再重新选择下一个,哪怕是相同的标签像

<span>这样的,也可以通过其他的选择器来选择,像这个

p:nth-of-type(2),P可以是任何的标签,这个括号里面的2可以是父元素的第几个标签,他可以选择在父元素的子元素进行标签的选定

6:在设置垂直居中的时候可以使用这样的方法,设置line-height,把高度设置成为它的父级元素一样的高度,那么它就可以进行垂直居中了

7:边框input里面设置下,输入之前有字,输入后就没字了是这样输入的属性

placeholder=“这里面是你要输入的字”,一定要在属性里面输入,不在CSS里面输入,然后如果要去除边框的话可以这样输入:

outline: none;

border: 0;

这样的话。上面的边框就会消失了,或者可以打开开发者模式F12看一下,是否有边框和其他的,如果有撑起来的,可以设置0

8:inupt也是可以设置宽高的

9:type="number",这个是限制只能输入数字的,别的输入不了。写在input里面

10:body里面就是由一个个盒子组成的,就像一个俄罗斯方块一样的,要弄清楚每一个盒子标签的特性,像块级元素,行内元素,行内快元素

11:vertical-align: middle;这个也是调节居中的一种方式

12:letter-spacing这个的代码意思是可以让字体的间距扩大或者缩小,

13:.deal::-webkit-inner-spin-button{

-webkit-appearance: none;

}

如果在intup的右边有个上下箭头的时候用上面的办法,做个类选择器就可以直接弄好了

14:oninput="if(value.length>11)value=value.slice(0,11)" />

上面的这个代码是用来规定输入的数字必须是多少位

15:line height是设置垂直居中的一种办法

16:HTML是什么东西呢?是超文本标记语言,作用是用来描述超文本中的显示方式,像颜色,字体大小等等

17:标签分为块级标签和行内标签

什么是块级标签呢?就是属于HTML的标签之一,作用是独占一行,而且可以设置宽高,两个块级标签在不设置浮动或者标签转换的情况下,是不会排列在同一行的,也就是换行排列,怎么写呢?<div class=""></div>在CSS里面添加要写的东西属性,就可以改变他的宽高,背景颜色等等,而且块级标签里面是可以包含了块级元素和行内元素的,那么宽度在没有设置的时候它的宽度是都少呢?是100%

18:那么行级标签是什么意思呢 ?行级标签也是属于HTML的标签之一

他的作用是不会独占一行。不可以设置宽高,在不转标签的情况下,是会并行排列的,像<span class=""></span>在里面写上你要写的东西,并且设置除了宽高属性意外的属性。也就是说它是不可以设置宽高的,那么不可以设置它的宽高的话,它的宽高是多少呢?答案是内容的高度和宽度,是不可以改变的,除非进行元素转换,而且在没有转换的时候是不可以包含块级元素的



任务3任务总结。

耗时2018.8.29-2018.9.4

成果链接  https://jksmiss.github.io/start-a-project/task4/task4.html

我的脑图

官方脑图

首先我这边学习了

先学习了一个<header>这样的语义化的标签,事实上还有很多的语义化的标签,像我后面做的<button>这样的也是一个语义化的标签之一

他这个做出来了以后就可以出现了一个可以点击的登陆按钮,这个也是看到了效果了,我学会了以后我就开始做布局,我遇到了一些问题

就是关于设置宽高的问题,后来我才知道原来设置一份宽高的话,需要用一份百分比来设置的,那么我就还是按照上一个任务那样,进行

百分比的设置,先是用了在html上面做了

font-sizi:上面设置了62.5%

这样的话rem的单位转换就可以直接除以10就好了,然后运用到块级元素的特性,是占据了一行的,那么我如果需要的话就可以进行转换,我用的

display: inline

这样来换成行内元素,不过行内元素是没有办法设置宽高的,那么我就用了下一个办法,我直接设置成了行内块元素

display:inline-block;

这样的话就可以设置宽高了,然后我就继续布局,接着我发现了字体的大小要设置,于是我就用了font-size: 来调整了字体的大小,然后我调整了以后,又发现了没办法居中,于是我就用了居中的注意是这样额

line height是设置垂直居中的一种办法,那么我调整了好以后就是下面这样的

可是呢,上面的样式是都设置好了,我却发i现这个和当初的设计图颜色有点儿不一样了,我又去设置了背景的颜色background-color:,那么我据去蓝湖哪里

我去找到了背景的颜色是个类似银色的东西,我就添加了上去,接着我就进入了,下一步,那么就是第二行的布局,在第二行我要添加一个图标,也要添加

一个从PS上面切下来的图标进行添加上去,在上面我遇到了一个问题。那么就是不好对齐,我试了很多种方法,就是没找到一个很好的居中办法,最后我是在师兄的帮助下,我尝试的用了这样的居中对齐的办法vertical-align: middle;这样的话就可以保持图片和表单的框的距离,然后师兄让我做出了设置字数的办法,还有一个就是做出了右边的小箭头,就是按上下可以调节字数的那种,后来又让我去把他消除了,于是我就用了这样的代码

.deal::-webkit-inner-spin-button{
-webkit-appearance: none;
}

这个代码就是用来去除那个上下箭头的办法,

 placeholder这样的是用来在里面设置写字的

而且一输入文字的话就可以消除了那些字体,接着我设置了限制字数的

type="number"oninput="if(value.length>11)value=value.slice(0,11)" />

这样的话机可以只输入11位字体以后就没有办法再接下来的输入了

这样的话,做完以后对其了,然后就设置下边框就可以了,边框就是像上面那么一个竖,昨晚设置好颜色后,再设置好距离,完整版的就是这样的

接着再进行下一步,一样的的设置好宽高以后就设置好了以后,就把字体设置一下,居中和增加间距的,那么怎么设置增加间距呢?是这样的

letter-spacing

这个的代码意思是可以让字体的间距扩大或者缩小,只要设置好数字就好了,然后放出图片

那么最后的一步就是把那个文字放在右边就好,根据标签的属性,块级和行内标签的特性,就可以直接设定一个右边浮动就可以了

float: right;

完了以后,再放一张完整的做好的图片



返回列表 返回列表
评论

    分享到