李永娟-2020-10-30

<!--定位-->
        <div class="page">
            <!--页眉-->
            <div class="header">
                我是页眉
            </div>
            <!--导航栏 -->
            <div class="naver">
                我是导航
            </div>
            <!--网页主要内容-->
            <div class="main">
                <div class="adv bg"></div>
                我是主内容区
            </div>
            <!--页脚-->
            <div class="footer bg">
                我是页脚
            </div>
 
<meta charset="UTF-8">
    <title>百度一下, 你就知道</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/index.css">
    <body>
        <!--整个页面-->
        <div class="page">
            <!--页眉-->
            <div class="header">
                <!--页眉的左边-->
                <div class="header-left">
                <a href="#">新闻</a>
                <a href="#">hao123</a>
                <a href="#">地图</a>
                <a href="#">学术</a>
                <a href="https://blog.csdn.net/KaiSarH">KaiSarH</a>
                <a href="#" class="more-product">更多产品</a>
            </div>
             <!--页眉的右边-->
             <div class="header-right bg">
                <a href="javascript:void(0)">设置</a>
                <a href="javascript:void(0)">登录</a>
             </div>
        </div>
        <!--logo -->
    <div class="logo">
        <img src="img/baidu.jpg" width="270" height="129"/>
    </div>
    <!--搜素框-->
    <div class="search">

margin:19px 31px 0 0;/*字与字之间的距离*/
display: inline-block;/*让行级标签拥有块级标签的特征(自定义大小)依旧保留行极标签不独占一行的特征*/
/*页眉*/
.header{
    width: 100%;
    height: 120px;
}
/*导航栏*/
.naver{
    width: 100%;
    height: 36px;
    border-top: 1px #dedede solid;
    border-bottom: 1px #dedede solid;
    position: sticky;/*粘性定位*/
    top: 0px;
}
/*主内容区*/
.main{width: 100%;
height: 800px;
position: relative;/*副相对定位*/
}
/*广告*/
.adv{
    width: 60px;
    height: 300px;
    /*position: absolute;/*子绝对定位*/*/
    position: fixed;/*固定位置*/
    top: 200px;
    right: 0px;
}
/*测试样式*/
.bg{
    background: yellow;

心得体会:今天是做网页的最后一天,老师带我们做了百度的网页,老师讲的时候感觉都做过,就是自己做的时有点不熟练,老师讲的时候感觉这反射弧是真的有点长啊,自己还是得多加练才好。

标签

评论

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