马伟婷-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-让行级标签拥有块级标签的特性(自定义大小)依旧保留行级标签不独占一行的特性



心得体会:
今天老师讲解了页面布局和定位,学习到了网页界面的设计,还认真带领我们过了一下昨天的作业,让我们明白了自己作业中的不足,并可以加以改进。

标签

评论

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