第一周总结

Posted ty-smile

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第一周总结相关的知识,希望对你有一定的参考价值。

 安装的软件有git、npm、node.js、firekeeper、sourcetree。
 开始上手用最原始的html和CSS来制作一个网站的首页。现在总结一下:首先,整体布局的思路要清晰,提前规划好。其次,代码要规范,比如{}前加空格,:后加空格,写注释可以方便修改和他人理解。最后,细节一定要注意,比如圆角、阴影的大小、分隔线不能忘记、细小的间距也要量准确、元素是否应该对齐等。
1.我对position的两个定位进一步的了解如下:relative是相对定位,相对设置它的元素本身正常定位,在文档流中仍占位置。 absolute是绝对定位,在文档流中不占位置即脱离了文档流,只要父元素要设置position:relative;就相对于设置它的元素的父元素定位。
2.相同的样式可以用同一个类名。
3.现在知道一些伪元素的用处,像::before、::after可以在元素之前或之后添加元素并为它添加样式。比如在文字前加个小图标,也可用background-image。
4.还有伪类的理解,像:hover可以实现鼠标浮上时改变其样式。
5.除了ID选择器和class选择器外,知道像:last-child、:nth-typeof()等可以帮助单独对其父元素中某一个类来修改样式。
6.图片轮播可以利用插件swiper制作,在制作分页播放logo时,遇到了一个问题,设计稿中的前后箭头是在logo两边且不遮挡logo,而我用插件制作后箭头遮挡了logo。由于轮播的块设置了over-flow:hidden;所以箭头直接用定位的方法会导致不见。后来师傅将轮播的块外面又加了一个父元素块并将其宽度改小,然后将在大块外面的箭头再定位就好了。
7.由于屏幕的大小不定,不能给块的宽度定具体的大小。可以设置margin:0 auto;让元素居中;也可以用百分比适应不同屏幕大小。也可以先定位到中间,再减去或加上一定数值。
position绝对定位来实现居中布局。适用于块级元素不给出宽高的情况下(需要借助transtrom的tanslateX方法)。
#parent{
    position: relative;
}
#child{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
8.一般我们给的宽度和高度是元素不包含padding和margin的。
9.块里面有文字,可以不给固定宽度和高度,通过自身大小或margin、padding让其自己撑开。
 
 
10.让元素浮动后会出现边框不能撑开,margin设置值不起作用等问题。清除浮动的方法:
一 添加新元素并让其clear:both;
二 伪类清除浮动:after(作用于清楚元素的父亲)
eg:.clear {
    content: "";
    display: block;
    clear:both;
}
三 给父级div定义overflow:auto;也可以使用hidden。
11 z-index的值越大,就离我们越近。就像东西,是可以一层层叠加的,数字越大的叠在最上面。
12 rgba(0,0,0,.5) 为半透明黑色。
13 box-sizing:border-box;这个我没用过,但是还是记下来吧,设置该属性后width包含padding和border的值。
14 行内元素通过设置display:block;变成块元素,
块元素通过display:inline-block可以使其不占一整行。
text-algin: center;对行内元素起作用。
text-decoration:none;可以去除a的下划线。
15 三角形可以通过border来设置,width: 0;  height: 0;
border-left: 50px solid transparent;  border- right:50px solidtransparent; border-bottom:100px solid red;
16 <input>标签type="text"默认有轮廓,用outline:none;去除。
17记得要写成 <a href"javascript:"></a>






































以上是关于第一周总结的主要内容,如果未能解决你的问题,请参考以下文章

第一周总结

第一周命令总结

第一周学习总结

第一周学习总结

20165320 毕业设计 第一周总结

第一周进度总结