这是大学生就业网站最基础的布局。

<!DOCTYPE html>
<html>
<head>
    <title>大学生就业网站</title>
    <style>
        /* Reset default margin and padding */
        *, *::before, *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Set default font family and size */
        body {
            font-family: Arial, sans-serif;
            font-size: 16px;
            line-height: 1.5;
        }

        /* Header styles */
        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
        }

        header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

        header nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        header nav ul {
            display: flex;
            list-style: none;
        }

        header nav ul li {
            margin-left: 20px;
        }

        header nav ul li a {
            color: #fff;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        header nav ul li a:hover {
            color: #ddd;
        }

        /* Banner styles */
        .banner {
            position: relative;
            height: 400px;
            background-image: url('https://via.placeholder.com/1500x400');
            background-position: center;
            background-size: cover;
        }

        .banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.3);
        }

        .banner-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: #fff;
            font-size: 2rem;
            letter-spacing: 2px;
            text-shadow: 1px 1px #333;
        }

        /* Main content styles */
        .main {
            margin: 40px auto;
            max-width: 1200px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .card {
            width: calc(33.33% - 10px);
            margin-bottom: 20px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        .card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .card h2 {
            font-size: 1.5rem;
            margin: 10px;
        }

        .card p {
            font-size: 1rem;
            margin: 10px;
        }

        /* Footer styles */
        footer {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        footer p {
            margin-bottom: 10px;
        }

        footer a {
            color: #fff;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        footer a:hover {
            color: #ddd;
        }

        /* Animation styles */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .fade-in {
            animation: fadeIn 1s ease;
        }

        @keyframes slideInLeft {
            from { transform: translateX(-100%); }
            to { transform: translateX(0); }
        }

        .slide-in-left {
            animation: slideInLeft 1s ease;
        }

        @keyframes slideInRight {
            from { transform: translateX(100%); }
            to { transform: translateX(0); }
        }

        .slide-in-right {
            animation: slideInRight 1s ease;
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <h1>大学生就业网站</h1>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">职位列表</a></li>
                <li><a href="#">公司列表</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </nav>
    </header>

    <div class="banner">
        <div class="banner-text fade-in">
            <h2>欢迎来到大学生就业网站</h2>
            <p>找到属于你的职业</p>
        </div>
    </div>

    <main class="main">
        <div class="card slide-in-left">
            <img src="https://via.placeholder.com/400x200" alt="Company Logo">
            <h2>公司名称</h2>
            <p>公司介绍公司介绍公司介绍公司介绍公司介绍公司介绍</p>
        </div>
        <div class="card slide-in-right">
            <img src="https://via.placeholder.com/400x200" alt="Company Logo">
            <h2>公司名称</h2>
            <p>公司介绍公司介绍公司介绍公司介绍公司介绍公司介绍</p>
        </div>
        <div class="card slide-in-left">
            <img src="https://via.placeholder.com/400x200" alt="Company Logo">
            <h2>公司名称</h2>
            <p>公司介绍公司介绍公司介绍公司介绍公司介绍公司介绍</p>
        </div>
        <div class="card slide-in-right">
            <img src="https://via.placeholder.com/400x200" alt="Company Logo">
            <h2>公司名称</h2>
            <p>公司介绍公司介绍公司介绍公司介绍公司介绍公司介绍</p>
        </div>
        <div class="card slide-in-left">
            <img src="https://via.placeholder.com/400x200" alt="Company Logo">
            <h2>公司名称</h2>
            <p>公司介绍公司介绍公司介绍公司介绍公司介绍公司介绍</p>
        </div>
        <div class="card slide-in-right">
            <img src="https://via.placeholder.com/400x200" alt="Company Logo">
            <h2>公司名称</h2>
            <p>公司介绍公司介绍公司介绍公司介绍公司介绍公司介绍</p>
        </div>
    </main>

    <footer>
        <p>© 2021 大学生就业网站</p>
        <p><a href="#">隐私政策</a> | <a href="#">使用条款</a></p>
    </footer>
</body>
</html>

效果图:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/177425.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

算法刷题-动态规划2

算法刷题-动态规划2 珠宝的最高价值下降路径最小和 珠宝的最高价值 题目 大佬思路 多开一行使得代码更加的简洁 移动到右侧和下侧 dp[ i ][ j ]有两种情况&#xff1a; 第一种是从上面来的礼物最大价值&#xff1a;dp[ i ][ j ] dp[ i - 1 ][ j ] g[ i ][ j ] 第二种是从左…

FPGA设计时序约束九、others类约束之Group Path

目录 一、序言 二、Group Path 2.1 基本概念 2.2 设置界面 2.3 命令语法 2.4 命令示例 三、工程示例 四、参考文件 一、序言 在Vivado的时序约束窗口中&#xff0c;存在一类特殊的约束&#xff0c;划分在others目录下&#xff0c;可用于设置忽略或修改默认的时序路径分…

如何判断客户对你是不是真的满意

我们平时生活中打个滴滴、叫个外卖&#xff0c;都会让做星级评价&#xff0c;就算去银行办业务&#xff0c;也会让按个按钮&#xff0c;对窗口的服务做个评价…… 再问一个问题&#xff1a;客户满意了&#xff0c;您的生意就一定好吗&#xff1f; 一、满意度&#xff1a;质量监…

EDIFACT学习手册

EDIFACT 又名 UN/EDIFACT&#xff08;全称为 United Nations/Electronic Data Interchange For Administration, Commerce and Transport&#xff09;&#xff0c;是由联合国主导开发制定的国际通用 EDI 标准。EDI术语中的EDIFACT是指 EDIFACT 报文标准&#xff0c;本视频将为大…

python接口自动化封装导出excel方法和读写excel数据

一、首先需要思考&#xff0c;我们在页面导出excel&#xff0c;用python导出如何写入文件的 封装前需要确认python导出excel接口返回的是一个什么样的数据类型 如下&#xff1a;我们先看下不对返回结果做处理&#xff0c;直接接收数据类型是一个对象&#xff0c;无法获取返回…

Postman API Enterprise 10.18.1 Crack

适合您企业的 Postman API 平台 掌控您的 API 环境。构建更好的 API。加快产品开发。 无论您处于 API 之旅的哪个阶段&#xff0c;Postman 都会为您提供帮助 想让您团队的 API 更容易被发现吗&#xff1f;希望减少开发和质量检查之间的滞后时间&#xff1f;想要更快地让新开发…

2023年09月 Scratch(二级)真题解析#中国电子学会#全国青少年软件编程等级考试

Scratch等级考试(1~4级)全部真题・点这里 一、单选题(共25题,每题2分,共50分) 第1题 点击绿旗,运行程序后,舞台上的图形是?( ) A:画笔粗细为4的三角形 B:画笔粗细为5的六边形 C:画笔粗细为4的六角形 D:画笔粗细为5的三角形 答案:D 第2题 如下图所示,从所给…

AI一点通:卷积神经网络的输出节点大小如何计算?全连接层必要输入大小如何设置

在使用卷积网络&#xff08;CNN&#xff09;时&#xff0c;一个步骤是计算经过卷积和池化步骤后的输出大小&#xff0c;以便我们可以将输出连接到一个完全收集的线性层。 以Pytorch中的一维CNN为例&#xff0c; self.conv1 nn.Conv1d(in_channels1, out_channels64, kernel_s…

地图导航测试用例,你get了吗?

地图导航是我们经常使用的工具&#xff0c;能帮助我们指引前进的方向。 接下来&#xff0c;会从功能测试、UI测试、兼容测试、安全测试、网络测试、性能测试、易用性测试、文档和国际化语言测试8个方面来编写地图导航测试用例。 一 功能测试 输入起点和终点&#xff0c;验证…

你了解Postman 变量吗?

变量是在Postman工具中使用的一种特殊功能&#xff0c;用于存储和管理动态数据。它们可以用于在请求的不同部分、环境或集合之间共享和重复使用值。 Postman变量有以下几种类型&#xff1a; 1、环境变量&#xff08;Environment Variables&#xff09;: 环境变量是在Postman…

【Linux】权限的理解和使用

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前正在学习c和算法 ✈️专栏&#xff1a;Linux &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章有啥瑕疵&#xff0c;希望大佬指点一二 如果文章对…

使用Java Servlet生成动态二维码

文章目录 引入ZXing库创建QRCodeServlet部署到Servlet容器拓展功能1. 动态生成二维码内容2. 调整二维码尺寸3. 错误修正级别4. 日志输出 结语 &#x1f389;欢迎来到Java学习路线专栏~探索Java中的静态变量与实例变量 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x1f379;✨博客主页&…

【Python大数据笔记_day11_Hadoop进阶之MR和YARNZooKeeper】

MR 单词统计流程 已知文件内容: hadoop hive hadoop spark hive flink hive linux hive mysql ​ input结果: k1(行偏移量) v1(每行文本内容)0 hadoop hive hadoop spark hive 30 flink hive linux hive mysql map结果:k2(split切割后的单词) v2(拼接…

Windows配置Anaconda环境

1、下载Anaconda 2、安装Anaconda 2.1、系统环境变量 注&#xff1a; 将Anaconda添加到系统环境变量中&#xff0c;此处建议选中&#xff0c;可以省去好多麻烦 2.2、手动配置环境变量 系统—高级系统设置—环境变量—Path—新建&#xff1b;将下面的路径添加到环境变量中…

智能安全帽作业记录仪赋能智慧工地人脸识别劳务实名制

需求背景 建筑工地是一个安全事故多发的场所。目前&#xff0c;工程建设规模不断扩大&#xff0c;工艺流程纷繁复杂&#xff0c;如何完善现场施工现场管理&#xff0c;控制事故发生频率&#xff0c;保障文明施工一直是施工企业、政府管理部门关注的焦点。尤其随着社会的不断进…

2022年06月 Scratch(二级)真题解析#中国电子学会#全国青少年软件编程等级考试

Scratch等级考试(1~4级)全部真题・点这里 一、单选题(共25题,每题2分,共50分) 第1题 角色初始位置如图所示,下面哪个选项能让角色移到舞台的左下角? A: B: C: D: </

Java游戏之飞翔的小鸟

前言 飞翔的小鸟 小游戏 可以作为 java入门阶段的收尾作品 &#xff1b; 需要掌握 面向对象的使用以及了解 多线程&#xff0c;IO流&#xff0c;异常处理&#xff0c;一些java基础等相关知识。一 、游戏分析 1. 分析游戏逻辑 &#xff08;1&#xff09;先让窗口显示出来&#x…

你的关联申请已发起,请等待企业微信的管理员确认你的申请

微信支付对接时&#xff0c;需要申请AppID,具体在下面的位置&#xff1a; 关联AppID&#xff0c;发起申请时&#xff0c;会提示这么一句话&#xff1a; 此时需要登录企业微信网页版&#xff0c;使用注册人的企业微信扫码登录进去&#xff0c;然后按照下面的步骤操作即可。 点击…

ElementUI用el-table实现表格内嵌套表格

文章目录 一、效果图二、使用场景三、所用组件元素&#xff08;Elementui&#xff09;四、代码部分 一、效果图 二、使用场景 &#x1f6c0;el-form 表单内嵌套el-table表格 &#x1f6c0;el-table 表格内又嵌套el-table表格 三、所用组件元素&#xff08;Elementui&#xff…

实现centos7与windows共享文件夹

第一步 点击设置 第二步 第三步 第四步 让共享文件夹挂载到hgfs目录下 输入如下命令: sudo vmhgfs-fuse .host:/ /mnt/hgfs -o subtypevmhgfs-fuse,allow_other完成共享