发表于： 2019-10-17 19:23:43
1 1038
今天完成的事情：
根据任务三要求完成简单自适应页面。
1. 布局过程
1.1 盒子嵌套
根据任务需要完成的PS效果图，最终布局的盒子嵌套如图所示。
将小图标图片切图后保存为英文名PNG文件。
1.2 CSS样式
1.2.1外联式CSS样式表
可以分屏同时查看HTML和CSS的感觉真好，感谢师兄提示！
1.2.2 插入图片
插入小图标没有使用img标签，而是选择用css属性background值设置。
百度区别之后个人理解如下：
Img用于插入骨架内容部分的重要图片/大图，background-image是修饰性的小插图。
在网页加载的过程中，网页会先加载标签img的内容，再加载背景图片background-image。如果用img引入了一个很大的不重要图片，那么在这个图片下载完成之前，img后的内容都不会显示。而如果用css来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，不会影响你浏览网页内容。
Background多项属性可以简写，简写顺序为：
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
1.2.3 定位
各个不同盒子需固定于不同位置，有多种不同定位方式。
未设置浮动、定位的元素可以通过设定margin、padding值相对于页面中元素定位。（有可能牵一发动全身，改一个动一片）
Position属性也可以用于定位元素位置。
Fix定位，元素相对于浏览器窗口是固定位置，可应用于网页导航条，网页广告二维码、某些快捷跳转按钮等。
Relative定位，相对定位元素的定位是相对其正常位置。移动相对定位元素，但它原本所占的空间不会改变。也可以联合absolute定位使用，作为absolute定位元素的容器。
Absolute定位，绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>，absolute定位的元素和其他元素重叠。
使用fix定位和absolute定位的元素可以覆盖页面上其他元素，因此存在z-index属性指定元素堆叠顺序。
2. PX，EM，REM的概念
明天计划的事情：
1. 处理常见的移动端页面； 2.学会改变表单元素样式 3. 了解@media
4. Css自适应布局小结
遇到的问题：
给背景盒子设置背景颜色时，若未设置border，盒子内的元素同时有设置margin值，会导致背景盒子顶部被撑开出现未覆盖背景颜色的白边。
可设置一个同背景颜色的border解决。
收获：
果然知道的知识越多，不知道的知识就会更多。
返回列表
评论