[郑州|结业弟子]JS-高世豪|2019年10月31日的日报-技能树.IT修真院

发表于： 2019-10-31 21:05:18

1 830

一、今天完成的事情

今天做完了任务三，但是有一些基础知识还是要加强

盒子模型：

各部分说明：

css背景：css可以添加背景颜色和背景图片来进行图片的设置，比如给一个div盒子，那么div盒子相关背景的属性可以设置以下：

背景颜色：div{background-color:red;}，给盒子设置一个红色背景颜色

背景图片：div{background-image:url(图片路径);}，给div盒子设置一个背景图片，背景图片我们一般给小背景图片或超大背景图片。

背景平铺：div{background-repeat:no-repeat(不平铺)/repeat-x(横向平铺)/repeat-y（纵向平铺);}

背景位置： div {background-position: 10px 15px;} 给背景位子横向、纵向多少距离的位子。

背景固定/滚动： div {background-attachment: fixed/scroll;}

背景属性连写： div{ background：颜色图片路径平铺滚动位子}

边框：border：边框有宽度（width），样式（style）、边框颜色（color）三种属性。

border-width：1px；给边框1px的像素

border-style：solid（实线）/dashed（虚线）/dotted（点线）；这三种比较常见的线条样式

border-color：red；给边框赋予颜色属性。

可以给盒子四条边框分别赋予不同的宽度、样式、颜色。四条边框分别border-top、border-bottom、border-left、border-right。

边框样式连写：比如div｛border：1px soild red｝

边框合并：有时候我们多个盒子并排排列挨在一起的时候，会出现两个盒子的边框贴在一起，，显得比较宽，为了美观，需要把帖在一起的合并掉，写法是：border-collapse：collapse；

margin：外边距，清除边框外的区域，外边距是透明的

border：边框，围绕在内边距和内容外的边框，有颜色

padding：内边距，清除内容周围的区域，内边距是透明的，只有一个数值10px代表上下左右都是10px，假设有两个数值10px，15px代表上下是10px，左右是15px，方向是顺时针转，对位相等，但是给出四个不同的值，那么四个方向的内边距都是不同的。

content：：盒子的内容，显示文本和图像

二、遇到的困难

代码规范上不会，做得不够好，结构有点乱，而且会有冗杂，需要学习一下代码规范

之前学过的标签属性记得不熟，会有忘记的情况，得加深记忆，多多学习

三、明天要做的事情

开始任务四，看基础知识，了解了之后再开始做任务

四、收获、总结

任务三我觉得好像是一个用户的使用界面，展示出去的，有文字有图片，在将这些文字图片插入代码展示出来的时候还要学会页面的布局，怎么样展示出来，才会觉得好看，不会显得整个页面都是乱七八糟的，当然这只是基础的最简单的东西，但是同时，给我们展示了一下，前端到底要做一个什么样的事情，带我们认识前端要做的东西。任务三中，应该学会class类的命名还有各个的属性及其属性值，怎么样去使用，才会让整个的页面布局达到自己想要的样子，同时，命名的不同的类，是怎样插入进去html代码里面的。而且还应该认识到在html里面的标签与css里面的标签可能表达方式是不一样的，虽然表达的语义是一样的，但是方式可能是不同的。比如，在html里面bgcolor就可以表达出来背景的颜色，但是在css样式里面就需要用background来表达背景颜色，等等。应该是还有更多的不同，我学的不精，暂时还没有发现其他的，以后在学习过程中，应该会慢慢的发现。任务三里面还会有ps的抠图，切图知识，虽然是前端，但是要面向用户，所以应该是要掌握一些ps的知识和技术的。技多不压身，学多点是没坏处的。

返回列表

【任务4】 [郑州|结业弟子]JS-高世豪 | 2019年10月31日 的日报 中品

评论

分享到

【任务4】 [郑州|结业弟子]JS-高世豪 | 2019年10月31日的日报中品