伸缩盒模型案例

最新推荐文章于 2025-03-11 21:05:20 发布

DeDeDeFeng

最新推荐文章于 2025-03-11 21:05:20 发布

阅读量377

点赞数 7

文章标签： css css3 前端

本文链接：https://blog.csdn.net/DeDeDeFeng/article/details/135686366

版权

<style>
    * {
            font-family: Arial;
            font-size: 14px;
            margin: 0;
            padding: 0;
            border: none;
    }
    a {
            text-decoration: none;
    }
    ul {
            list-style: none;
    }
    html,body {   
        /* 设置100%，让整个窗口的背景图片跟着大小变化， */
        /* 单独给body的width，height分别设置100vw 100wh也可以 */
        width: 100%;
        height: 100%;
    }
    body {
        background-image: url('./beijingtupian.png');
        background-repeat: no-repeat;
        /* 防止下方出现白边，尽可能适应各种尺寸的窗口 */
        background-size: cover;  
    }
    .page-header {
        height: 70px;
        background-color: rgba(0, 0, 0, .7);
        display: flex;
        /* 控制主轴对齐方式 两边顶死 */
        justify-content: space-between; 
        /* 主轴一行居中对齐 */
        align-items: center;
        padding: 0 20px;
    }
    .header-nav {
        display: flex;
    }
    .header-nav li a {
        color: #fff;
        font-size: 20px;
        border: 1px solid #fff;
        border-radius: 8px;
        padding: 10px;
        margin-right: 20px;
    }
    .header-nav li:last-child a {
        /* 给最后一个 */
        margin-right: 0px;
    }
    .page-content {
        display: flex;
        /* calc是运算函数 vh是视口高度 70px是顶部导航高度 */
        height: calc(100vh - 70px);
    }
    .content-nav {
        display: flex;
        width: 1000px;
        height: 300px;
        background-color: #5aa7ff;
        margin:auto;
        justify-content: space-evenly;
        align-items: center;
    }
    .content-nav .item {
        width: 120px;
        height: 200px;
        background-color: orange;
        display: flex;
        /* 将主轴换为垂直，这样子元素就会垂直排列 */
        flex-direction: column;
        /* 侧轴多行对齐，如果父容器不给高度 则会拉伸到整个父容器 */
        align-items: center;
        /* 主轴对齐方式 */
        justify-content: space-evenly;
        /* 过渡 */
        transition: 0.3s linear;
        /* 鼠标 */
        cursor: pointer;  
    }
    .content-nav .item:hover {
        box-shadow: 0px 0px 20px rgba(0, 0, 0, .7);
        transform: translateY(-8px);
    }
</style>

---------------------

<body>
    <!-- 头部 -->
    <header class="page-header">
        <a href="#">
            <img src="./logo.png" alt="logo" title="logo">
        </a>
        <ul class="header-nav">
            <li><a href="#" title="国内校区1">国内校区1</a></li>
            <li><a href="#" title="国内校区2">国内校区2</a></li>
            <li><a href="#" title="国内校区3">国内校区3</a></li>
            <li><a href="#" title="国内校区4">国内校区4</a></li>
        </ul>
    </header>
    <!-- 内容区域 -->
    <div class="page-content">
        <div class="content-nav">
            <div class="item"><img src="./youxiang.png" alt="邮箱"><span>我的邮箱</span></div>
            <div class="item"><img src="./youxiang.png" alt="邮箱"><span>我的邮箱</span></div>
            <div class="item"><img src="./youxiang.png" alt="邮箱"><span>我的邮箱</span></div>
            <div class="item"><img src="./youxiang.png" alt="邮箱"><span>我的邮箱</span></div>
            <div class="item"><img src="./youxiang.png" alt="邮箱"><span>我的邮箱</span></div>
        </div>
    </div>
</body>