马伟婷-2020-10-30
知识总结：
页面布局加定位
<link rel="stylesheet" type="text/css" href="dw.css"/>
</head>
<body>
<div class="pages">
<!--页眉-->
<div class="header">
我是页眉</div>
<!--导航栏-->
<div class="never">
我是导航</div>
<!--网页主内容区-->
<div class="main">
主内容区
<!--广告-->
<div class="ad bg">
广告
</div>
</div>
<!--页脚-->
<div class="footer bg">
页脚
/*整个页面*/
.pages{
width:100%;
height:auto;}
/*页眉*/
.header{
width:100;
height:120px;}
/*导航栏*/
.never{
width:100%;
height:35px;
border-bottom:1px #DEDEDE solid;
border-top:1px #DEDEDE solid;
position:sticky;/*粘性定位*/
top:0px;}
/*主内容区*/
.main{
width:100%;
height:500px;
position: relative;/*相对定位*/}
/*广告*/
.ad{
width:40px;
height:300px;
position:absolute;/*绝对定位 父相对子绝对*/
top:100px;
right:0px;
position: fixed;/*位置固定*/}
/*页脚*/
.footer{
width:100%;
height:100px;}
/*测试*/
.bg{
background:palevioletred;}
display-让行级标签拥有块级标签的特性(自定义大小）依旧保留行级标签不独占一行的特性
心得体会:
今天老师讲解了页面布局和定位，学习到了网页界面的设计，还认真带领我们过了一下昨天的作业，让我们明白了自己作业中的不足，并可以加以改进。
近期评论