发表于： 2019-04-07 21:02:11
1 833
今天完成的事：完成了任务7的第一个和第三个的静态页面。
在做任务中学习了很多
1 ：固定定位
css定位主要有四种，静态定位、相对定位、绝对定位和固定定位。其中静态定位这个是元素的默认定位方式，不能使用top，bottom，left，right和z-index属性，其它三种定位可以使用以上几个属性。
如果想为元素设置层模型中的相对定位，需要设置position:relative;，它还是会占用该元素在文档中初始的页面空间，通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。比如我们想要让一个div元素相对当前位置左移100px，上移100px。
（div向左和向上偏移了100px）
2）绝对定位
如果想为元素设置层模型中的绝对定位，需要设置position:absolute;，这条语句的作用将元素从文档流中拖出来,将不占用原来元素的空间，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位。如果不存在就逐级向上排查，直到相对于body元素，即相对于浏览器窗口。
学习了雪碧图的制作和应用
百度百科对CSS 雪碧的解释如下：
CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
往往将小图标合并在一起之后的图片称作雪碧图，主要用在小图标显示上。
2、不使用雪碧图， 单纯调用小图片有以下优缺点：
- 优点：调用简单、维护方便；
- 缺点：在我们使用很多小图片的网页上，比如网站上的表情图面板等，每个小图标都单独调用一图片， 即意味着每个小图标的显示都产生一个HTTP请求；一般情况下每次创建一个HTTP请求，请求到的内容往往是次要的（除非文件特别大），性能开销主要在请求、以及响应阶段；如果请求文件过多则会引发性能问题。
3、静态图片，图片不随用户信息的变化而变化。小图片，容量比较小的（2~3k）。图片加载量比较大的。注意：大图片不建议用雪碧图咯，图片那么大，拼完之后就更大了，加载就慢了。
4、将雪碧图作为背景，然后使用background-image和background-position两个属性来控制需要显示的部分，所以我们只要对这两个属性的使用掌握熟悉了就可以。
学习DIV画圆
1、圆形
CSS代码如下：宽高一样，border-radius设为宽高的一半
#circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;
三角形
3、等边三角
上三角CSS代码如下：设置border-bottom宽度实线颜色，左右border左右宽度为一半，实线透明。下三角、左三角、右三角可举一反三实现。
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }
明天的事：继续任务7
返回列表
评论