【web前端】近期题目汇总

进击的文文文

已于 2022-04-28 12:49:52 修改

阅读量1.9k

点赞数 2

分类专栏： web 文章标签：前端 css css3 html

于 2022-04-27 23:05:06 首次发布

本文链接：https://blog.csdn.net/weixin_61096287/article/details/124459584

版权

web 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

~~汇集了一些这两周写的东西kkk←其实是舍友的一部分作业hhh~~

~~用到了几天前学的东西ovo~~~ ~~想练手的可以试试嗷 w！~~

~~图片什么的可以从网上找 owo~这里就不放了！~~

※问题 → 不用js能实现div高度自适应吗

出现次数多的知识点

基本标签和选择器、背景相关、边框、圆角矩形、定位、浮动，忘了的看这→标签、选择器、背景，边框，圆角，定位，浮动

I. 音乐排行榜

❀知识点

列表，忘了的看这里ovo！→ 列表

新知识（引用的文章ovo）→radial-gradient（径向渐变）

❀效果图

❀代码

<!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/music.css">
</head>

<body>
    <div class="box">
        <div class="bg">
            <div class="one">
                <img src="img\yinyue.jpg">
            </div>
            <div class="two">
                <dl>
                    <dt>&nbsp;&nbsp;&nbsp;<img src="img\wenzi.jpg"></dt>
                    <dd>&nbsp;&nbsp;&nbsp;<img src="img\yinfu.png">&nbsp;&nbsp;&nbsp;成都-赵雷</dd>
                    <dd>&nbsp;&nbsp;&nbsp;<img src="img\yinfu.png">&nbsp;&nbsp;&nbsp;半壶纱-刘珂矣</dd>
                    <dd>&nbsp;&nbsp;&nbsp;<img src="img\yinfu.png">&nbsp;&nbsp;&nbsp;你还要我怎样-薛之谦</dd>
                    <dd>&nbsp;&nbsp;&nbsp;<img src="img\yinfu.png">&nbsp;&nbsp;&nbsp;一生所爱-莫文蔚</dd>
                    <dd class="last">&nbsp;&nbsp;&nbsp;<img src="img\yinfu.png">&nbsp;&nbsp;&nbsp;Slow Ride-鹿晗</dd>
                </dl>
            </div>

        </div>
    </div>
</body>

</html>

* {
    padding: 0;
    margin: 0;
    border: 0;
}

.box {
    width: 700px;
    height: 700px;
    border-radius: 400px;
    margin: 100px auto;
    overflow: hidden;
    border: #9b9b9b 8px solid;
    background-image: repeating-radial-gradient(circle at 50% 50%, #000, #545454 0.1%, #000 1.3%);
}

.bg {
    width: 365px;
    height: 560px;
    margin: 60px auto;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.6) 10px 10px 2px;
    background-color: #545454;
    text-align: center;
}

.one {
    width: 365px;
    height: 220px;
    background-color: #fff;
    border-radius: 20px 20px 0 0;
}

.one img {
    position: relative;
    left: 27%;
    top: 50%;
    transform: translate(-50%, -50%);
}

dt {
    width: 365px;
    height: 45px;
    background-color: #fff;
}

dt img {
    position: relative;
    left: 24%;
    top: 10%;
    transform: translate(-50%, -50%);
}

dd {
    height: 58px;
    width: 365px;
    border-top: 2px solid #fff;
    line-height: 58px;
    font-size: 20px;
    text-align: left;
    color: #fff;
}

dd>img {
    position: relative;
    top: 5%;
    width: 20px;
    height: 20px;
    text-align: center;
}

II. 注册界面

❀知识点

表单，忘了的看这里ovo！→ 表单

文本框相关操作→ 看IV和V

❀效果图

※问题→怎么让意见反馈显示在文本框左上角

4.28答疑更新ovo！

今天学了新知识，用vertical-align属性和resize就可以解决啦ovo，也可以加上outline！

❀代码

<!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/register.css">
</head>

<body>
    <form action="#" method="post" class="list">
        <div class="title">会员注册</div>
        <div class="box">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span> * </span>性质:
            <input type="radio" name="nature" checked="checked" id="persomal">
            <lable for="personal"> 个人</lable>
            <input type="radio" name="nature" id="gongsi">
            <lable for="gonsi"> 公司</lable><br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span> * </span>昵称：
            <input type=" text " src="img\1.jpg" value="小明" maxlength="10">（中英文、数字）<br/><br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span> * </span>密码：
            <input type="password " src="img\2.jpg " maxlength="10">（6位以上）<br/><br/>
            <span> * </span>电子邮箱：
            <input type="text " value="123456@126.com " maxlength="9"><br/><br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所在地：
            <select>
                <option>-请选择-</option>
                <option>北京</option>
                <option>上海</option>
            </select>
            <br/><br/>&nbsp;&nbsp;手机号码：
            <input type="text" maxlength="15"><br/><br/>&nbsp;&nbsp;幸运颜色：
            <input type="text" maxlength="9" class="bg"><br/><br/>&nbsp;&nbsp;意见反馈：
            <textarea>如果您有什么意见或问题可以告诉我！</textarea><br/><br/>
        </div>
        <div class="s">
            <input type="submit" class="bth "> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="reset" class="bth ">
        </div>
    </form>
</body>

</html>

* {
    margin: 0;
    padding: 0;
    border: none;
}

form {
    margin: 0 auto;
}

.title {
    height: 60px;
    width: 950px;
    font-size: 25px;
    font-weight: 700;
    line-height: 60px;
    padding-left: 290px;
}

.list {
    width: 950px;
    height: 660px;
    background: url(../img/sy.png) no-repeat;
    margin: 100px auto;
    padding-top: 150px;
    padding-left: 130px;
}

input {
    color: darkgrey;
    font-size: 14px;
    height: 23px;
    line-height: 23px;
    margin: 0;
}

option {
    height: 23px;
}

.bth {
    width: 130px;
    height: 30px;
    background-color: aquamarine;
    color: #000;
}

.bg {
    height: 15px;
    border-radius: 3px;
    background-color: rgb(255, 162, 80);
    border: #fff 5px solid;
}

span {
    color: red;
}

.box {
    margin-left: 100px;
}

textarea {
    vertical-align: top;
    resize: none;
    outline: none;
    width: 375px;
    height: 75px;
    color: darkgray;
    font-size: 14px;
}

.s {
    position: relative;
    left: 25%;
}

III. 悬停效果

❀知识点

超链接相关，忘了的戳这→点伪类选择器

/* 超链接去下划线 */

a {
    text-decoration: none;
}

❀效果图

❀代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>网页焦点图</title>
    <link rel="stylesheet" href="css/focus.css">
</head>

<body>
    <div id="photo">
        <img src="img\11.jpg">
        <a class="arrowleft" href="#">&lt;</a>
        <a class="arrowright" href="#">&gt;</a>
        <ul>
            <li>
                <a class="bigger" href="#"></a>
            </li>
            <li>
                <a href="#"></a>
            </li>
            <li>
                <a href="#"></a>
            </li>
            <li>
                <a href="#"></a>
            </li>
            <li>
                <a href="#"></a>
            </li>
            <li>
                <a href="#"></a>
            </li>
        </ul>
    </div>
</body>

</html>

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
    }
    
    a {
        text-decoration: none;
        text-align: center;
        color: #fff;
        font-size: 36px;
        font-weight: 300;
        line-height: 125px;
    }
    
    #photo {
        position: relative;
        width: 580px;
        height: 200px;
        background-color: #fff;
        margin: 100px auto;
    }
    
    #photo .arrowleft {
        display: none;
        position: absolute;
        top: 50%;
        left: -20px;
        margin-top: -63px;
        width: 40px;
        height: 125px;
        border-radius: 5px;
        background: rgba(0, 0, 0, .5);
    }
    
    #photo .arrowright {
        display: none;
        position: absolute;
        top: 50%;
        right: -20px;
        margin-top: -63px;
        width: 40px;
        height: 125px;
        border-radius: 5px;
        background: rgba(0, 0, 0, .5);
    }
    
    #photo:hover .arrowleft,
    #photo:hover .arrowright {
        display: block;
    }
    
    ul {
        position: absolute;
        bottom: 15px;
        right: 55px;
        background-color: transparent;
    }
    
    .bigger {
        float: right;
        width: 20px;
        height: 10px;
        border-radius: 5px;
        background-color: dodgerblue;
        margin-left: 5px;
    }
    
    li {
        float: left;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        margin-left: 10px;
        background-color: #fff;
    }

IV. 生如夏花

❀知识点

浮动+布局+清除浮动、多背景图片→ 单背景图片迁移一下就可以了ovo ！

忘了的戳这→浮动+清除浮动+布局

❀效果图

这个做的也有问题→全屏的时候看是没有问题的，但是缩小屏幕的话就会出现很严重的问题 qvq！原来我是想让大div的高度自适应来着，结果搞了半天没搞明白 qwq ，搜到的都是要用 js了。。可是我现在 css还没学完啊 ಥ_ಥ ，果然还是不太行！！继续加油吧 qvq！！！

※问题 → 不用js能实现div高度自适应吗

❀代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>浮动网页多列布局</title>
    <link rel="stylesheet" href="css/multicol.css">
</head>

<body>
    <header>
        <!--CSS：多背景图片、文字隐藏-->
        <div class="bgc"></div>
        <nav>
            <!--CSS：链接伪类、浮动、清除浮动-->
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">归档</a></li>
                <li><a href="#">历史</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">留言</a></li>
                <li><a href="#">订阅</a></li>
            </ul>
        </nav>
    </header>
    <!--div#wrapper：居中-->
    <div id="wrapper">
        <!--main：居左-->
        <main>
            <article>
                <img class="special" src="img/main-flower01.jpg" alt="">
                <div class="special">
                    <h2>找自己II</h2>
                    <h3>2017年10月09日</h3>
                    <p class="tou">从</p>
                    <p>未见过如此急骤又持久的秋雨，身体和心情的温度在出门的一瞬间就降到了冰点，瑟瑟发抖。尽管在假期开始前就能预料到美好的时光将会流逝得多么飞快，但是当一切戛然而止的时候，还是显得心理准备不足——难以坦然接受残酷的现实，更不愿立即回归枯燥的生活。好像2017年只剩下83天了，听上去很少，但毕竟也接近365天的四分之一。不知道在一年的尾声中等待我的将是什么，是开怀大笑还是阵痛煎熬。不敢奢望富贵荣华，但求能够寻到初心，认识自己。</p>
                    <a href="#">阅读全文>></a>
                </div>
            </article>
            <article>
                <img src="img/main-flower02.jpg" alt="">
                <div>
                    <h2>出于本能</h2>
                    <h3>2017年09月02日</h3>
                    <p class="tou">在</p>
                    <p>一个秋日的周末睡了整整一天，一睁眼竟已是傍晚。不知道刚刚过去的五天工作日中到底消耗了多少精力，亏欠了多少睡眠。很久没有睡得如此昏天黑地而心满意足了——不知从何时开始，本可以肆无忌惮地懒觉的时候，却总是过早惊醒，意犹未尽。听说人老了就会醒得很早，这让我感到惶恐。我宁愿每天叫醒我的不是梦想，而是闹钟。</p>
                    <a href="#">阅读全文>></a>
                </div>
            </article>
            <article>
                <img src="img/main-flower03.jpg" alt="">
                <div>
                    <h2>活着而已</h2>
                    <h3>2017年08月26日</h3>
                    <p class="tou">接</p>
                    <p>近半年没有更新了，说它荒芜到长草也不为过。不过这段时间确实发生了许多事情，经历了一些变更，导致大多时候身心俱疲，并没有闲情逸致写点什么东西。当然，也可以归结于懒。</p>
                    <a href="#">阅读全文>></a>
                </div>
            </article>
            <article>
                <img src="img/main-flower04.jpg" alt="">
                <div>
                    <h2>春去春又来</h2>
                    <h3>2017年04月04日</h3>
                    <p class="tou">忙</p>
                    <p>碌了近一个月，终于能够出来透口气了。北京的春天总是短暂，晴空万里时让人愉快，阴郁雾霾时让人心塞。所以每一次天朗气清都会不忍其入夜，每一回惠风和畅都会加倍地珍惜。然而，这些已经在身边变换了九年的季节和情绪即将离我而去了，也不知道南方的气候是否友好，是否需要挣扎一番才能适应。</p>
                    <a href="#">阅读全文>></a>
                </div>
            </article>
            <article>
                <img src="img/main-flower05.jpg" alt="">
                <div>
                    <h2>最后的黄昏</h2>
                    <h3>2017年02月15日</h3>
                    <p class="tou">最</p>
                    <p>近的生活显得繁琐而空虚，尽管心里知道有一大堆事需要在特定时间前完成，但还是经常不由自主地忙里偷闲并且自我安慰，这应该是拖延癌晚期的症状吧。也不知道哪里来的信心最终一定能顺利度过，大概是因为深知deadline才是第一生产力的真理。最近的生活显得繁琐而空虚，尽管心里知道有一大堆事需要在特定时间前完成，但还是经常不由自主地忙里偷闲并且自我安慰，这应该是拖延癌晚期的症状吧。也不知道哪里来的信心最终一定能顺利度过，大概是因为深知deadline才是第一生产力的真理。</p>
                    <a href="#">阅读全文>></a>
                </div>
            </article>
        </main>
        <!--aside：居右-->
        <aside>
            <img class="person" src="img/photo2.jpg" alt="">
            <p>博主</p>
            <h3>最近文章</h3>
            <ul>
                <li><a href="#">找自己II</a></li>
                <li><a href="#">出于本能</a></li>
                <li><a href="#">活着而已</a></li>
                <li><a href="#">春去春又来</a></li>
                <li><a href="#">最后的黄昏</a></li>
                <li><a href="#">关于爱情</a></li>
                <li><a href="#">十二月</a></li>
                <li><a href="#">再会</a></li>
                <li><a href="#">又一个夏天</a></li>
                <li><a href="#">断，舍，离</a></li>
            </ul>
            <h3>友情链接</h3>
            <ul>
                <li><a href="#">雅岚文艺博客</a></li>
                <li><a href="#">羽中漫步</a></li>
                <li><a href="#">灰常记忆</a></li>
                <li><a href="#">云淡风轻</a></li>
                <li><a href="#">生活志</a></li>
                <li><a href="#">拿破林</a></li>
                <li><a href="#">浩子</a></li>
                <li><a href="#">Imintlcx</a></li>
                <li><a href="#">QistChan</a></li>
                <li><a href="#">Meta World</a></li>
                <li><a href="#">James Pan's Blog</a></li>
            </ul>
            <img class="flower" src="img/bg4.jpg ">
        </aside>
    </div>
    <!--页脚：居中-->
    <footer>
        <p>作者：你的姓名 学号：你的学号 邮箱：你的email</p>
        <p>&copy;2017 江西师范大学计算机信息工程学院</p>
    </footer>
</body>

</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

a {
    text-decoration: none;
}

.bgc {
    height: 165px;
    background-image: url(../img/logo1.png), url(../img/flower3.png);
    background-repeat: no-repeat, no-repeat;
    background-size: contain, cover;
}

ul {
    height: 35px;
    background-color: darkorange;
}

nav ul li {
    float: left;
    width: 110px;
    height: 35px;
    background-color: darkorange;
    border-right: 2px solid #fff;
    line-height: 35px;
    text-align: center;
}

nav ul a {
    color: #000;
}

#wrapper {
    clear: both;
    margin: 0px auto;
    position: relative;
    width: 100%;
    height: 2000px;
}

main {
    float: left;
    margin-top: 3%;
    padding-left: 10%;
    border-right: 1px solid rgb(42, 39, 39);
    width: 65%;
    left: 0;
}

article img {
    float: left;
    width: 200px;
    height: 200px;
    border-radius: 20px;
    margin-top: 60px;
    margin-right: 50px;
}

article div {
    display: inline-block;
    width: 593px;
    height: 300px;
    margin-top: 60px;
    margin-bottom: 30px;
}

article .special {
    margin-top: 0;
}

.tou {
    color: brown;
    font-size: 30px;
    font-weight: 500;
    margin-right: -3px;
}

article div h3 {
    color: darkgrey;
    font-size: 14px;
    font-weight: 500;
    height: 50px;
}

article div p {
    display: inline;
    color: rgb(90, 88, 88);
}

article div a {
    float: right;
    height: 120px;
    line-height: 120px;
    color: rgb(161, 158, 158);
}

aside {
    position: relative;
    float: left;
    width: 35%;
    height: 100%;
    margin-top: 2%;
    padding-left: 3%;
}

aside .person {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    border: 6px solid rgb(190, 190, 190);
}

aside p {
    width: 200px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

aside h3 {
    margin-top: 30px;
    width: 180px;
    height: 55px;
    border-bottom: 1px solid #000;
    line-height: 60px;
    font-size: 18px;
}

aside ul {
    margin-top: 10px;
    height: 300px;
    background-color: transparent;
}

aside ul li {
    margin-bottom: 20px;
    height: 10px;
}

aside ul li a {
    color: rgb(161, 158, 158);
}

aside .flower {
    position: absolute;
    bottom: 1%;
    right: 0px;
}

footer {
    margin-top: 30px;
    border-top: 1px solid rgb(42, 39, 39);
    text-align: center;
    color: rgb(42, 39, 39);
    padding-top: 10px;
    padding-bottom: 5px;
    font-size: 14px;
}

V. 画手机

❀知识点

径向渐变（引用的文章ovo）→radial-gradient（径向渐变）

❀效果图

里面的图标是老师给的 ovo

❀代码

锁是输入法的表情里的 ovo

<!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/phone.css">
    <link rel="stylesheet" href="demo-files/demo.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="box">
        <div class="top1">🔒</div>
        <div class="top2"></div>
        <div class="c1"><span class="icon-arrow-left2"></span><span class="icon-menu"></span></div>
        <div class="c2bg">
            <img src="img\land2.jpg"></div>
        <div class="btm">
            <span class="icon-quill"></span>
            <span class="icon-bin2"></span>
            <span class="icon-share"></span>
            <div>编辑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;删除&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分享</div>
        </div>
        <div class="button"></div>
        <div class="zuo1"></div>
        <div class="zuo2"></div>
        <div class="zuo3"></div>
        <div class="you"></div>
    </div>

</body>

</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

.box {
    position: relative;
    width: 350px;
    height: 700px;
    background-color: rgb(57, 56, 56);
    margin: 50px auto;
    border-radius: 30px;
    border: 5px solid rgb(57, 56, 56);
    box-shadow: 5px 3px 10px 10px gray;
}

.top1 {
    position: absolute;
    top: 1.5%;
    left: 20%;
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 17px;
    font-size: 14px;
    text-align: center;
    border-radius: 50%;
    background-color: deepskyblue;
}

.top2 {
    position: absolute;
    top: 1.5%;
    left: 50%;
    margin-left: -45px;
    width: 90px;
    height: 20px;
    border-radius: 10px;
    background-color: darkgray;
}

.c1 {
    position: absolute;
    top: 8%;
    margin-top: -10px;
    width: 100%;
    height: 45px;
    font-size: 30px;
    color: lightgray;
    background-color: rgb(85, 85, 85);
}

.c1 .icon-arrow-left2 {
    position: absolute;
    top: 13%;
    left: 2%;
}

.c1 .icon-menu {
    position: absolute;
    top: 13%;
    right: 2%;
}

.c2bg {
    position: absolute;
    top: 13%;
    width: 100%;
    height: 470px;
    background-color: rgb(85, 85, 85);
}

.c2bg img {
    width: 100%;
    height: 99%;
}

.btm {
    position: absolute;
    top: 81%;
    width: 100%;
    height: 65px;
    font-size: 30px;
    color: lightgray;
    background-color: rgb(85, 85, 85);
    padding-top: 2px;
}

.btm span {
    height: 30px;
    width: 30%;
}

.btm .icon-quill {
    margin-left: 17%;
    margin-right: 15.5%;
}

.btm .icon-bin2 {
    margin-right: 15.5%;
}

.btm div {
    margin-left: 17%;
    margin-top: -10px;
    font-size: 16px;
}

.button {
    position: absolute;
    bottom: 5px;
    left: 50%;
    margin-left: -30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-image: radial-gradient(ellipse at center, #000, rgb(85, 85, 85));
    border: 2px solid lightgray;
}

.zuo1 {
    position: absolute;
    left: -3.5%;
    top: 15%;
    width: 8px;
    height: 40px;
    border-radius: 4px;
    background-color: rgb(72, 72, 72);
}

.zuo2 {
    position: absolute;
    left: -3.5%;
    top: 25%;
    width: 8px;
    height: 65px;
    border-radius: 4px;
    background-color: rgb(72, 72, 72);
}

.zuo3 {
    position: absolute;
    left: -3.5%;
    top: 40%;
    width: 8px;
    height: 50px;
    border-radius: 4px;
    background-color: rgb(72, 72, 72);
}

.you {
    position: absolute;
    right: -4%;
    top: 30%;
    width: 8px;
    height: 80px;
    border-radius: 4px;
    background-color: rgb(72, 72, 72);
}

VI. 简单菜单

❀知识点

超链接相关、合并外边距，忘了的戳这→点伪类选择器，外边距

❀效果图

❀代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>二级菜单</title>
    <link rel="stylesheet" href="css/menu.css" />
</head>

<body>
    <header>

        <nav>
            <ul class="level1">
                <li>
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">学校概况</a>
                    <ul class="level2">
                        <li><a href="#">学校简介</a></li>
                        <li><a href="#">现任领导</a></li>
                        <li><a href="#">历任领导</a></li>
                        <li><a href="#">历史沿革</a></li>
                        <li><a href="#">领导关怀</a></li>
                        <li><a href="#">办公电话</a></li>
                        <li><a href="#">服务信息</a></li>
                        <li><a href="#">校园风光</a></li>
                    </ul>
                </li>
                <li>
                    <a href="# ">机构设置</a>
                    <ul class="level2">
                        <li><a href="#">党政部门</a></li>
                        <li><a href="#">学院设置</a></li>
                        <li><a href="#">业务单位</a></li>
                        <li><a href="#">附属单位</a></li>
                        <li><a href="#">科研机构</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">教育教学</a>
                    <ul class="level2">
                        <li><a href="#">本科教育</a></li>
                        <li><a href="#">研究生教育</a></li>
                        <li><a href="#">继续教育</a></li>
                        <li><a href="#">专业介绍</a></li>
                        <li><a href="#">教授名录</a></li>
                        <li><a href="#">网络教学平台</a></li>
                    </ul>
                </li>
                <li>
                    <a href="# ">师资队伍</a>
                    <ul class="level2">
                        <li><a href="#">高层次人才</a></li>
                        <li><a href="#">教授榜</a></li>
                        <li><a href="#">人才招聘</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">科学研究</a>
                    <ul class="level2">
                        <li><a href="#">科研平台</a></li>
                        <li><a href="#">科技工作</a></li>
                        <li><a href="#">社科工作</a></li>
                        <li><a href="#">科研单位</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">招生就业</a>
                    <ul class="level2">
                        <li><a href="#">本专科生招生</a></li>
                        <li><a href="#">研究生招生</a></li>
                        <li><a href="#">就业工作</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">合作交流</a>
                </li>
                <li>
                    <a href="#">师大校友会</a>
                </li>
                <li>
                    <a href="#">学生工作</a>
                    <ul class="level2">
                        <li><a href="#">本科生</a></li>
                        <li><a href="#">研究生</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">公共服务</a>
                    <ul class="level2">
                        <li><a href="#">学校服务信息</a></li>
                        <li><a href="#">后勤服务</a></li>
                        <li><a href="#">视觉形象系统</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">图属档案</a>
                    <ul class="level2">
                        <li><a href="#">图书馆</a></li>
                        <li><a href="#">档案馆</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </header>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro in aliquam, mollitia quos aspernatur, quibusdam laborum rem cumque blanditiis saepe sequi pariatur architecto magnam laboriosam dolor perspiciatis beatae asperiores voluptates quaerat. Ad
        cum aspernatur expedita neque, quos ratione labore quaerat vel accusamus unde laboriosam! Fuga aliquid illo ex velit praesentium reiciendis laborum maiores qui, molestias commodi eaque eligendi molestiae porro sit expedita dolor officia facilis
        laboriosam ullam reprehenderit. Totam praesentium nostrum dolorem facere temporibus perspiciatis ipsum commodi explicabo odit qui dolorum minima expedita culpa, assumenda deleniti, animi! Temporibus sed nobis ducimus perspiciatis reprehenderit
        quo cum, ipsam dolorum enim quas vel.
    </p>
</body>

</html>

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
    }
    
    header {
        position: relative;
        margin: 100px auto;
        margin-bottom: 0;
        width: 1260px;
        font-size: 15px;
    }
    
    a {
        text-decoration: none;
    }
    
    nav {
        margin-top: -4px;
    }
    
    .level1 li {
        position: relative;
        float: left;
        width: 105px;
        height: 40px;
        background-color: brown;
        border-bottom: 3px solid gray;
        text-align: center;
        line-height: 40px;
    }
    
    .level1 li a {
        color: #fff;
    }
    
    ul .level2 li {
        display: none;
        z-index: 1;
        width: 100px;
        margin-top: -3px;
        margin-left: 25%;
        background-color: rgb(201, 188, 69);
        border: #fff 1px solid;
        border-collapse: collapse;
        text-align: left;
        text-indent: 6px;
    }
    
    .level2 li a {
        color: #000;
    }
    
    .level1 li:hover ul.level2 li {
        display: block;
    }
    
    .level1 li:hover {
        background-color: lightcoral;
    }
    
    .level1 li:hover a {
        color: #000;
    }
    
    .level2 li:hover {
        background-color: rgb(125, 103, 215);
    }
    
    p {
        width: 1253px;
        margin: 0 auto;
        font-size: 20px;
    }

恭喜看到这的小伙伴已经看完这些练习了ovo~！

如果做了的话就更好了嗷 w！！

~~这一篇写的真的好累 qvq！~~

有用的话就点赞评论收藏哦！！