周玉莲-2020-10-30

一、知识总结

1.页面布局  
整个页面
<div class="page">
页眉
<div class="header"></div>
         我是页眉
导航栏
<div class="naver"></div>
        我是导航
主内容区
<div class="main bg"></div>
       我是主内容区
广告
<div class="adv"></div>
页脚
<div class="footer"></div>
2.定位  
注意:水平方向不能出现滚动条
(1)position: sticky;/*粘性定位*/
(2)/*position: relative;/*相对定位*/父相对*/
(3)/*position: absolute;/*绝对定位*/子绝对*/子绝对定位
(4)position: fixed;/*固定位置*/
/*测试样式*/
.bg{
    background-color: red;}
}

补充知识
display: inline-block:/*让行级标签有了块级标签(自定义大小的特性)依旧保留行级标签不能独占一行的特性;block/*让行级标签有了块级标签的特性
display:flex/*弹性布局*/
width: 86px;/*让行级标签有了块级标签的属性
height: 33px;
line-height: 33px;
text-align: center;/*文本居中*/
color: #fff !important;重要

二、心得体会
一晚上的努力奋斗加上同学的辅佐指导,百度页面做的还算可以。今天上午教的页面布局和定位也基本能跟上,只有听懂了,
会做了才算是属于自己真正的东西。通过老师给的课件练习时间,简单的网络页面布局还可以。但是还得加强练习,通过老
师讲了一下我们昨晚的作业。意识到上课上的知识不仅要记住还能成功应用到代码中。老师上课讲的知识是远远不够的,还
需要我们在课下多多练习。查阅相关资料补充自己的知识量还有动手操作能力也很重要。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1