学校官网

首先对官网进行区域分块，如图所示

先把三部分都放在一个大盒子里设置好背景色

part1

分为欢迎条，搜索栏，导航栏三部分

搜索栏：分为左右两部分，进行浮动。给右边部分加入绝对定位与左边拉开间距。

导航栏：

　　　 问题：1.二级菜单把下面的内容顶下去

   　　  　　　使用给菜单绝对定位把菜单脱离文档流

　　　具体操作：a.给子盒子加入absolute,并根据实际情况进行位置上的调整，给父盒子加入relative

　　　　　　　　b.给需要隐藏的菜单加入display:none

　　　　　　　　c.给菜单的标题加入  .父盒子名称 hover ul{display:block}

　　　　　　2.如果给给父盒子直接加overflow-hidden会导致菜单被下面的盒子覆盖

part2

使用grid布局分为四个小盒子

 

.grid{display:grid;
    grid-template-columns:1fr 1fr ;
    grid-template-rows: 1fr 1fr ;
    gap: 100px;
}

 

box1再分为上下两个盒子，上部分对图片使用 左浮动，剩下的文字就会环绕在右边。下部分使用p标签，设置行高。

box2整体使用ul li 对前面的数字单独加a标签

.three a:hover{background-color: #71a2e2;
                width: 200px;
                height: 100px;
}

box3用ul li标签  问题：每条末尾日期以及更多+

　　　　　　　处理：1.左边的文字和日期分为两个盒子，称为left right

　　　　　　　　　　2.给left加上左浮动，给right加上display:inline-block,使left和right并排

　　　　　　　　　　3.给right设单独设置文字大小，行高,与左边文字对齐，注意继承问题

.small1{
    margin-left:60px ;
    display: iblock;
    float:left;
}
.date{display: inline-block;
    margin-left: 500px;
}
<!--small1是文字所在的盒子--！>

box4分为上下两个盒子，两个小盒子的设置同box1上部分

part3

蓝条部分：分为图片文字两部分，图片截图引入之后进行左浮动设置左右间距，文字同理，注意间距的设置要与图片对齐