WEB前端学习日志第三周 Day1
今日总结:通过今天的学习,共学习了5个知识点,分别是固定定位,用定位实现子元素在父元素中的剧中问题,粘性定位,锚点以及PC端网页的宽高自适应。并且解决了遗留下来的两个问题,分别是当banner图超出版心时的解决方法和轮播图的结构。
固定定位
固定定位很常见,几乎每个网页中都会涉及到,比如固定在网页右下角的回到顶部按钮。
position:fixed; 固定定位
a: 参照物:浏览器窗口。
b: 不占据空间,脱离布局流。
让一个元素在浏览器窗口左右上下居中?
第一种方法:
position:fixed;
left:50%;top:50%;
margin-left:减去元素宽度一半;
margin-top:减去元素高度的一半;
第二种方法:
position:fixed;
left:0;right:0;
top:0;bottom:0;
margin:auto;
锚点
锚点:
超链接的一种。
作用:能实现在同一个页面内实现不同位置的跳转。
描述:让锚点绑定id名称的元素回到浏览器窗口的最顶端。
<标签 id=""></标签>
用固定定位和锚点两个知识点做出了一个类似楼层的效果。
效果如下:
粘性定位
粘性定位一般作用在网页的导航条,导航条在网页还没滚动的超过他时会随着页面滚动,而随着网页向下滚动导航条就会一直处于网页最上方,像是固定了一样。
粘性定位:
position:sticky;
执行逻辑:
默认情况下:当浏览器窗口滚动条不滚动,当前元素没有超出整个浏览器窗口的时候
执行的position:relative;如果元素超出当前窗口则应用的position:fixed;
PC端网页的宽高自适应
PC端 宽度 和 高度的自适应问题:我们希望,写html结构的宽和高,能适应不同的分辨率、不同的设备、不同的内容增删,使我们项目更加的灵活。
默认情况下块状元素:
当width不设置的时候,或者width:100%;当前元素的宽跟随父元素的变化。
高度自适应第一种情况:
当元素height不去设置或者是设置成height:auto;
元素的高度是被内容撑开的。
需求1:当内容增加的时候,内容能把容器撑开。
需求2:当内容极少或者没有内容的时候,让容器保持一个最小高度。
最小高度的设置:
min-height:;
能满足1:当内容增加的时候,内容能把容器撑开。
能满足2:当内容极少或者没有内容的时候,让容器保持一个最小高度。
banner图超出版心时的解决方法
当banner图过于大或者过于长时,版心放不下,此时怎么办?
通过如下代码实现
轮播图的结构
轮播图在我刚学web时一直以为是图片在滚动,其实不然。
轮播图的显示效果其实是在一个div中有着好几张和这个div宽高相同的图片,而滚动的也只是这个包含图片的大div。
实现如下,这是我还处于学习的初级阶段,还不能让图片滚动起来,只是做一个效果的展示。
在网页中显示如下: