今天看到一个朋友秀自己编写自己学校的官网页面，我也手痒也做了一个，这次最大的失误就是到后边开始浮躁了，心急，还是敲得少。（赋源码）

这是官网的：

学校的有很多高度坍塌，但是它为什么是正常的我也不知道，它的二级菜单是JS实现的，我只会用HTML+CSS，明天开始接触一下CSS，以后三个一起练习做网页。

我做的是这样的：

很多不够完美，而且越往后越沉不住心，本来能好好计算的值，就是不想算，就硬调，最后页脚那点也是为了省事直接用定位了。

源码这里

CSS：

.fudiv::after{
    content: "";
    display: block;
    clear: both;
}

header{
    width: 100%;
    height: 150px;
    background-color: #014490;
}

header .title_1{
    width: 100%;
    height: 50px;
    background-color: #013b7d;
}

header .title_1 .nav_1{
    width: 70%;
    height: 50px;
    margin: 0 auto;
}

header .title_1 .nav_1 .nav_left{
    float: left;
    line-height: 50px;
}

header .title_1 .nav_1 .nav_left a{
    color: #b1b4b9;
    margin-right: 18px;
    font-size: 14px;
}

header .title_1 .nav_1 .nav_left a:hover{
    text-decoration: underline;
}

header .title_1 .nav_1 .nav_right{
    float: right;
    padding-top: 10px;
}

header .title_1 .nav_1 .nav_right .text_box{
    width: 178px;
    height: 30px;
    background-color: #fff;
    float: left;
    box-sizing: border-box;
}

header .title_1 .nav_1 .nav_right .text_box:hover{
    cursor: text;
}

header .title_1 .nav_1 .nav_right .nav_1_img{
    float: left;
    box-sizing: border-box;
}

header .title_1 .nav_1 .nav_right .nav_1_img:hover{
    cursor: pointer;
}

header .title_1 .nav_1 .nav_right .nav_1_img img{
    width: 38px;
    height: 31px;
}

header .title_2{
    height: 100px;
}

header .title_2 .nav_2{
    width: 70%;
    margin: 0 auto;
    height: 100px;
}

header .title_2 .nav_2 .nav_left{
    float: left;
    width: 400px;
    height: 100px;
    padding-top: 8px;
    box-sizing: border-box;
    overflow: hidden;
}

header .title_2 .nav_2 .nav_left .logo{
    width: 400px;
    height: 86px;
    margin: 0;
}

header .title_2 .nav_2 .nav_left h1{
    font-size: 30px;
    margin-top: 200px;
}

header .title_2 .nav_2 .nav_left img{
    width: 400px;
    height: 86px;
}

header .title_2 .nav_2 .nav_right{
    float: right;
    height: 100px;
    width: 60%;
}

header .title_2 .nav_2 .nav_right ul li{
    float: left;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    color: #fff;
    padding: 0 20px;
    z-index: 1;
}

header .title_2 .nav_2 .nav_right ul li:hover{
    background-color: #013b7d;
    position: relative;
}

header .title_2 .nav_2 .nav_right ul li a{
    color: #fff;
}

header .title_2 .nav_2 .nav_right ul li .hide{
    width: 104px;
    position: absolute;
    line-height: 2em;
    background-color: #013b7d;
    left: 0px;
    display: none;
    text-align: center;
    z-index: 2;
}

header .title_2 .nav_2 .nav_right ul li .hide a{
    color: #fff;
    display: block;
    font-size: 14px;
}

header .title_2 .nav_2 .nav_right ul li .hide a:hover{
    background-color: #014490;
}

header .title_2 .nav_2 .nav_right ul li:hover .hide{
    display: block;
}

.center-img{
    width: 1380px;
    height: 470px;
    margin: 0 auto;
    display: block;
    position: relative;
}

.center-img>img{
    width: 1380px;
    height: 470px;
}

.center-img .img_left,
.center-img .img_right{
    width: 40px;
    height: 46px;
    position: absolute;
    top: 50%;
    box-sizing: border-box;
}

.center-img .img_left{
    left: 40px;
}

.center-img .img_right{
    right: 40px;
}

.center-img .img_left:hover,
.center-img .img_right:hover{
    cursor: pointer;
    border: 2px solid #000;
}

.article_all{
    background-image: url(../img/background.png);
    background-position: center bottom;
    width: 100%;
}

.article_all article{
    width: 70%;
    margin: 0 auto;
}

.article_all .article_1{
    border-bottom: 1px solid #dcdcdc;
    height: 37px;
    line-height: 37px;
}

h2{
    color: #013b7d;
    font-size: 21px;
    border-bottom: 1px solid #00449b;
    margin-right: 15px;
    float: left;
    box-sizing: border-box;
    height: 37px;
}

h2:hover,
p:hover{
    text-decoration: underline;
    cursor: pointer;
}

.article_all .article_1 p{
    float: left;
    line-height: 1em;
    margin-top: 15px;
}

.article_all .article_1 img,
.article_all .article_3 img,
.article_all .article_5 img{
    float: right;
    padding-top: 10px;
    margin-left: 5px;
}

.article_all .article_1 a,
.article_all .article_3 a,
.article_all .article_5 a{
    font-size: 12px;
    color: #595959;
    float: right;
    line-height: 37px;
}

.article_all .article_1 a:hover{
    text-decoration: underline;
}

.article_all .article_2{
    margin: 20px 0;
    
}

.article_all .article_2 a{
    width: 260px;
    height: 187px;
    float: left;
    margin-right: 7px;
}

.article_all .article_2 img{
    width: 260px;
    height: 187px;
    box-sizing: border-box;
}

.article_all .article_2 p{
    float: left;
    font-size: 14px;
    color: #2e2e2e;
    line-height: 1.5em;
    padding: 10px 0;
    margin-right: 60px;
    padding-left: 2px;
}

.article_all .article_2 .text p:hover{
    text-decoration: underline;
    cursor: pointer;
}

.article_all .article_2 .text p:last-child,
.article_all .article_2 .time p:last-child{
    margin: 0;
}

.article_all .article_2 .time p{
    margin-right: 200px;
    padding-left: 2px;
}

.article_all .article_3{
    margin-top: 0;
    width: 600px;
    border-bottom: 1px solid #dcdcdc;
    float: left;
}

.article_all .article_3>p{
    float: left;
    line-height: 1em;
    margin-top: 6px;
}

.article_all .article_4{
    width: 600px;
    float: left;
    margin: 20px 0;
    position: relative;
}

.article_all .article_4 .article_time{
    background-color: #e5e5e5;
    color: #2f68ab;
    margin-right: 40px;
    width: 150px;
    height: 53px;
    line-height: 53px;
    text-align: center;
    margin-bottom: 20px;
    font-size: 12px;
}

.article_all .article_4 .article_text{
    width: 400px;
    height: 53px;
    position: absolute;
    line-height: 53px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size: 14px;
    color: initial;
    left: 200px;
    top: 0;
}

.article_all .article_4 .text2{
    top: 73px;
}

.article_all .article_4 .text3{
    top: 146px;
}

.article_all .article_4 .article_text:hover{
    color: red;
    text-decoration: underline;
    cursor: pointer;
}

.article_all .article_5{
    width: 415px;
    float: right;
    box-sizing: border-box;
    margin: 10px;
    border-bottom: 1px solid #dcdcdc;
    position: relative;
    top: -47px;
}

.article_all .article_5 h2{
    position: absolute;
    bottom: 0;
}

.article_all .article_5 p{
    position: absolute;
    margin-top: 6px;
    left: 100px;
}

.article_all .article_6{
    height: 201px;
    width: 425px;
    float: right;
    position: relative;
    top: -38px;
}

.article_all .article_6>div{
    width: 130px;
    height: 67px;
    color: #fff;
    background-color: #5386c5;
    line-height: 67px;
    text-align: center;
    float: left;
    margin: 0px 5px 40px 5px;
}

.article_all .article_6>div:hover{
    text-decoration: underline;
    cursor: pointer;
}

.article_all .article_6>div:nth-child(2){
    background-color: #b48266;
}

.article_all .article_6>div:nth-child(3){
    background-color: #b888a2;
}

.article_all .article_6>div:nth-child(4){
    background-color: #a0bc94;
}

.article_all .article_6>div:nth-child(6){
    background-color: #b48266;
}

.footer_all{
    width: 100%;
    height: 330px;
    background-color: #013b7d;
}

footer{
    height: 330px;
}

.footer_all footer{
    width: 70%;
    margin: 0 auto;
    position: relative;
}

.footer_all footer img{
    width: 350px;
    height: 76px;
    float: left;
    margin-top: 128px;
}

.footer_all footer .text{
    color: #fff;
    width: 550px;
    float: left;
    margin-top: 78px;
}

.footer_all footer .text>div{
    margin-top: 1em;
    text-align: center;
}

.footer_all footer .text .text_img{
    width: 80px;
    height: 80px;
    margin: 0 auto;
}

.footer_all footer .text .text_img img{
    width: 80px;
    height: 80px;
    margin: 28px 0 0 0;
}

.footer_all footer .footer_img{
    float: right;
    color: #fff;
}

.footer_all footer .footer_img img{
    width: 96px;
    height: 96px;
    margin: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.footer_all footer .footer_img .img_1{
    top: 40px;
}

.footer_all footer .footer_img .img_2{
    top: auto;
    bottom: 40px;
}

.footer_all footer .footer_img P{
    position: absolute;
}

.footer_all footer .footer_img .p_1{
    top: 140px;
    right: 18px;
}

.footer_all footer .footer_img .p_2{
    bottom: 20px;
    right: 18px;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>国家级示范院校 平顶山技师学院欢迎您！!</title>
    <link rel="stylesheet" href="./CSS/reset.css">
    <link rel="stylesheet" href="./CSS/index.css">
</head>
<body>
    <!-- 头部信息 -->
    <header>
        <div class="title_1">
            <nav class="nav_1 fudiv">
                <nav class="nav_left">
                    <a href="#">在校学生</a>
                    <a href="#">教职工</a>
                    <a href="#">未来考生及访客</a>
                </nav>
                <nav class="nav_right fudiv">
                    <div class="text_box"></div>
                    <div class="nav_1_img"><img src="./img/搜索button.png" alt="图片丢失"></div>
                </nav>
            </nav>
        </div>

        <div class="title_2">
            <div class="nav_2 fudiv">
                <nav class="nav_left">
                    <div class="logo"><img src="./img/logo.png" alt=""></div>
                    <h1>平顶山技师学院</h1>
                </nav>
                <nav class="nav_right">
                    <ul class="fudiv">
                        <li><a href="#">网站首页</a></li>
                        <li>
                            <a href="#">学院概括</a>
                            <div class="hide">
                                <a href="#">学院简介</a>
                                <a href="#">现任领导</a>
                                <a href="#">学院章程</a>
                                <a href="#">校园风景</a>
                                <a href="#">历史沿革</a>
                                <a href="#">联系我们</a>
                            </div>
                        </li>
                        <li>
                            <a href="#">新闻资讯</a>
                            <div class="hide">
                                <a href="#">平技要闻</a>
                                <a href="#">睛彩平技</a>
                                <a href="#">媒体热点</a>
                            </div>
                        </li>
                        <li><a href="#">子站集群</a></li>
                        <li><a href="#">招生就业</a></li>
                        <li><a href="#">学生工作</a></li>
                        <li>
                            <a href="#">培训鉴定</a>
                            <div class="hide">
                                <a href="#">技能大赛</a>
                                <a href="#">鉴定信息</a>
                                <a href="#">电子商务</a>
                                <a href="#">远程培训</a>
                            </div>
                        </li>
                        <li>
                            <a href="#">党建工作</a>
                            <div class="hide">
                                <a href="#">文件通知</a>
                                <a href="#">党建动态</a>
                                <a href="#">规章制度</a>
                                <a href="#">他山之石</a>
                            </div>
                        </li>
                        <li>
                            <a href="#">纪检监察</a>
                            <div class="hide">
                                <a href="#">党纪法规</a>
                                <a href="#">廉政空间</a>
                                <a href="#">投诉举报</a>
                                <a href="#">网上展馆</a>
                            </div>
                        </li>
                        <li>
                            <a href="#">群团之家</a>
                            <div class="hide">
                                <a href="#">活动掠影</a>
                            </div>
                        </li>
                        <li>
                            <a href="#">校园文化</a>
                            <div class="hide">
                                <a href="#">质量论坛</a>
                                <a href="#">学生社团</a>
                                <a href="#">作品园地</a>
                                <a href="#">文体活动</a>
                                <a href="#">魅力校园</a>
                            </div>
                        </li>
                        <li>
                            <a href="#">信息服务</a>
                            <div class="hide">
                                <a href="#">大数据平台</a>
                                <a href="#">智慧校园</a>
                                <a href="#">工资查询</a>
                                <a href="#">学籍查询</a>
                                <a href="#">资格证书查询</a>
                                <a href="#">常用下载</a>
                            </div>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

    <!-- 图片 -->
    <div class="center-img">
        <img src="./img/dang.png" alt="">
        <div>
            <img class="img_left" src="./img/img_left.png" alt="">
            <img class="img_right" src="./img/img-right.png" alt="">
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="article_all">
        <article class="fudiv">

            <!-- 第一块内容 -->
            <div class="article_1 fudiv">
                <h2>平技要闻</h2>
                <p>COLLEGE NEW</p>
                <img src="./img/more.png" alt="">
                <a href="#">更多</a>
            </div>

            <!-- 第二块内容 -->
            <div class="article_2 fudiv">
                <a href="#" class="fudiv"><img src="./img/xinwen.png" alt=""></a>
                <a href="#" class="fudiv"><img src="./img/xinwen.png" alt=""></a>
                <a href="#" class="fudiv"><img src="./img/xinwen.png" alt=""></a>
                <a href="#" class="fudiv"><img src="./img/xinwen.png" alt=""></a>
                <div class="text">
                    <p>多措并举，我院线上教学高效有序</p>
                    <p>多措并举，我院线上教学高效有序</p>
                    <p>多措并举，我院线上教学高效有序</p>
                    <p>多措并举，我院线上教学高效有序</p>
                </div>
                <div class="time">
                    <p>2022-05-12</p>
                    <p>2022-05-12</p>
                    <p>2022-05-12</p>
                    <p>2022-05-12</p>
                </div>
            </div>

            <!-- 第三块内容 -->
            <div class="article_3 fudiv">
                <h2>媒体视点</h2>
                <p>COLLEGE NEW</p>
                <img src="./img/more.png" alt="">
                <a href="#">更多</a>
            </div>

            <!-- 第四块内容 -->
            <div class="article_4 fudiv">
                <div class="article_time">2022-04-04</div>
                <div class="article_time">2022-04-04</div>
                <div class="article_time">2022-04-04</div>
                <div class="article_text text1">平顶山市中级人民法院 平顶山市人民检察院 平顶山市公安局 平顶山市司法局关于依法严惩违反疫情防控违法犯罪行为的通告</div>
                <div class="article_text text2">平顶山技师学院疫情防控封闭管理侧记</div>
                <div class="article_text text3">平顶山技师学院第七届教职工代表大会暨工会会员代表大会第四次会</div>
            </div>

            <!-- 第五块内容（第三块右侧nav） -->
            <div class="article_5 fudiv">
                <h2>快速链接</h2>
                <p>COLLEGE NEW</p>
                <img src="./img/more.png" alt="">
                <a href="#">更多</a>
            </div>

            <!-- 第六块内容（第四块右侧article） -->
            <div class="article_6 fudiv">
                <div>学校网站集群</div>
                <div>协同办公系统</div>
                <div>新媒体说</div>
                <div>智慧校园平台</div>
                <div>回顾老站</div>
                <div>招生信息</div>
            </div>
        </article>
    </div>

    <!-- 页脚 -->
    <div class="footer_all">
        <footer class="fudiv">
            <img src="./img/logo.png" alt="">
            <div class="text">
                <div class="text1">
                    Copyright 2015 All Rights Reserved 版权所有： 平顶山技师学院 2015 地址：河南</div>
                <div class="text2">省平顶山市湛河区湛河南路137号 邮编：467000 邮箱：wg8116@163.com 运维：</div>
                <div class="text3">网络信息中心 手机：13721858526 备案证编号：豫ICP备15029909号-4</div>
                <div class="text_img"><img src="./img/footer_1.png" alt=""></div>
            </div>
            <div class="footer_img">
                <img class="img_1" src="./img/01.jpg" alt="">
                <p class="p_1">学院微信</p>
                <img class="img_2" src="./img/02.jpg" alt="">
                <p class="p_2">学院微博</p>
            </div>
        </footer>
    </div>
</body>
</html>

好了，今天分享到此为止，继续加油!!