李永娟-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;
心得体会：今天是做网页的最后一天，老师带我们做了百度的网页，老师讲的时候感觉都做过，就是自己做的时有点不熟练，老师讲的时候感觉这反射弧是真的有点长啊，自己还是得多加练才好。
点赞
评论留言