解玲安-2020-10-30
1、margin: 0 ;
padding: 0;
border: 0;
/*任何网页都时上述三条不变*/
2、<!-- 整个页面 定位 -->
<div class="page">
.page{
width: 100%;
height: auto;
}
3、<!--页眉-->
<div class="header"></div>
.header{
width: 100%;
height: 120px;
}
4、<!--导航栏-->
<div class="naver bg"></div>
.naver{
width: 100%;
height: 36px;
border-top: 1px #dedede solid;
border-bottom: 1px #dedede solid;
position: sticky;/*3、粘性定位*/
top: 0px;
}
5、<!--网页主内容区-->
<div class="main"></div>
.main{
width: 100%;
height: 800px;
/*1、position: relative; /*相对定位 父相对,自觉对*/
}
6、 <!--广告-->
<div class="adv bg"></div>
.adv{
width: 60px;
height: 300px;
/*1、position: absolute;/*绝对定位*/
position: fixed;/*2、固定位置 脱离原文挡流*/
top: 200px;
right: 0px;
}
7、<!--页脚-->
<div class="foter bg"></div>
.footer{
width: 100%;
height: 100px;
}
/*测试样式*/
.bg{
background: green;
}
display: inline-block;/*让行级标签拥有块级标签的特性(自定义到大小)*/
position: relative;/*父容器相对*/
position: absolute;/*子容器绝对*/
outline: none;/*去除黑框*/
学习心得:
已经学习了一周的时间,难度与日俱增,百度一下页面的制作一度让我很无奈,由于当时没有学习过页面布局,所以我选择了表格来布局。说实话网页的制作对我来说很费时间,但是却感觉越来越有意思,看着自己从什么都不会到一点点做出东西,很开心,花费的时间和精力时值得的。
近期评论