使用CSS对DIV进行样式定义，实现图层定位与布局

数据结构新学者

于 2022-10-26 18:42:07 发布

阅读量800

点赞数 3

文章标签： html5 css

本文链接：https://blog.csdn.net/python_learnera_/article/details/127538100

版权

实现如下效果

首先要分清这个是几行几列，然后先创建大体框架，在进行编码

<!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>
</head>
<style>
    .divHeader {
        background: brown;
    }

    .nav {
        background: rgb(178, 43, 43);
        list-style: none;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    li {
        margin: 18px;
        font-family: 隶书;
        font-size: 25px;
        text-decoration: none;
        color: aliceblue;
    }

    dt:nth-of-type(odd) {
        background: rgb(198, 193, 193);
        line-height: 27px
    }

    .divContainer {
        display: flex;
        flex-direction: column;
        width: 1200px;
        margin: 0 auto;
        justify-content: space-between;
    }

    .introduction {
        display: inline-block;
        width: 800px;
    }

    .sub-Container {
        display: inline-block;
        background: brown;
        font-size: 30px;
        color: #fff;
    }

    .sub-nav {
        text-align: center;

    }

    .container {
        display: flex;
        justify-content: space-between;

    }

    #note {
        list-style: none;
        margin: 1px;
        font-size: 20px;
        color: #333;
    }

    a {
        text-decoration: none;
        color: #333;
    }

    .footer {
        background: brown;
    }

    pre {
        text-align: center;
        font-size: 18px;
    }
    .fengye {
        text-align: right;
    } 

    a:link,
    a:visited,
    a:hover {}

    a:active {
        color: rgb(27, 26, 26);
    }


    a.ex2:hover,
    a.ex2:active {
        color: #333;
    }
</style>

<body>
    <div class="divHeader">
        <div class="divtitler">
            <img src="/logo.png">
        </div>
        <div class="nav">
            <ul class="nav">
                <li><a href="https://www.sqgxy.edu.cn/Html/jiaoxuejigou/jisuanjikexuexi/">首页</a></li>
                <li><a href="https://www.sqgxy.edu.cn/Html/jiaoxuejigou/jisuanjikexuexi/xbgk/21202.html">学院简介</a></li>
                <li><a href="https://www.sqgxy.edu.cn/Html/jiaoxuejigou/jisuanjikexuexi/xbxw/">学院新闻</a></li>
                <li><a href="https://www.sqgxy.edu.cn/Html/jiaoxuejigou/jisuanjikexuexi/xbxw/">专业介绍</a></li>
                <li><a href="https://www.sqgxy.edu.cn/Html/jiaoxuejigou/jisuanjikexuexi/jxhd/">教学科研</a> </li>
                <li><a href="https://www.sqgxy.edu.cn/Html/jiaoxuejigou/jisuanjikexuexi/xbld/">学院领导</a></li>
                <li><a href="https://www.sqgxy.edu.cn/Html/jiaoxuejigou/jisuanjikexuexi/xsgz/">学生工作</a></li>
                <li><a href="https://www.sqgxy.edu.cn/Html/jiaoxuejigou/jisuanjikexuexi/xbry/">学院荣誉</a></li>
                <li><a href="https://www.sqgxy.edu.cn/Html/jiaoxuejigou/jisuanjikexuexi/mtgz/">媒体关注</a></li>
            </ul>
        </div>

    </div>

    <div class="divContainer">
        <img src="/banner.jpg" alt="">
        <div class="container">
            <div class="introduction">
                <dl> 信息与电子工程学院 >> 学院新闻
                </dl>
                <hr color="brown">
                <dl class="">
                    <dt>信息管理与信息系统专业介绍</dt>
                    <dt>软件工程专业介绍</dt>
                    <dt>电子信息工程专业介绍</dt>
                    <dt>电子信息工程技术专业介绍</dt>
                    <dt>软件技术专业介绍</dt>
                    <dt>通信工程专业介绍</dt>
                    <dt>计算机应用技术专业介绍</dt>
                    <dt>计算机科学与技术专业介绍</dt>
                    <dt>电气工程及其自动化专业介绍</dt>
                    <dt>物联网工程专业简介</dt>
                </dl>
                <div class="fengye">
                    <dl>共<span>页次</span> <span>15篇</span> <span>首页</span> <span>上一页</span> <span>下一页</span><span>尾页</span>
                        <span>转到
                            <select name="" id=""></select>
                        </span></dl>
                </div>
            </div>
            <div class="sub-nav">
                <div class="sub-Container">
                    栏目导航</div>
                <div class="mainBav">
                    <ul class="">
                        <li id="note"><a
                                href="https://www.sqgxy.edu.cn/Html/jiaoxuejigou/jisuanjikexuexi/xbgk/21202.html">学院简介</a>
                        </li>
                        <li id="note"><a
                                href="https://www.sqgxy.edu.cn/Html/jiaoxuejigou/jisuanjikexuexi/xbxw/">学院新闻</a></li>
                        <li id="note"><a
                                href="https://www.sqgxy.edu.cn/Html/jiaoxuejigou/jisuanjikexuexi/xbxw/">专业介绍</a></li>
                        <li id="note"><a
                                href="https://www.sqgxy.edu.cn/Html/jiaoxuejigou/jisuanjikexuexi/jxhd/">教学科研</a> </li>
                        <li id="note"><a
                                href="https://www.sqgxy.edu.cn/Html/jiaoxuejigou/jisuanjikexuexi/xbld/">学院领导</a></li>
                        <li id="note"><a
                                href="https://www.sqgxy.edu.cn/Html/jiaoxuejigou/jisuanjikexuexi/xsgz/">学生工作</a></li>
                        <li id="note"><a
                                href="https://www.sqgxy.edu.cn/Html/jiaoxuejigou/jisuanjikexuexi/xbry/">学院荣誉</a></li>
                        <li id="note"><a
                                href="https://www.sqgxy.edu.cn/Html/jiaoxuejigou/jisuanjikexuexi/mtgz/">媒体关注</a></li>
                    </ul>
                    
                </div>
            </div>
        </div>
        
    </div>
    <div class="footer">
        <pre>
            Copyright ©商丘工学院版权所有 技术支持：商丘工学院信息化建设与管理中心
            豫ICP备14025328 号-1 豫公网安备 41140302000028号
        </pre>
    </div>



    </div>
</body>

</html>