前端 河大迎新网的制作

最新推荐文章于 2024-08-19 17:04:41 发布
最新推荐文章于 2024-08-19 17:04:41 发布
阅读量36 收藏
点赞数
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yamotl/article/details/134097808
版权

底端

<!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>Document</title>
    <link rel="stylesheet" href="/css/show4+.css">
</head>
<body>
    <div class="jx">
        <div class="jx_main">
            <div class="jx_main_top">
                <span>军训专题</span>
                <a href="#">more+</a>
            </div>
            <div class="jx_main_bottom">
                <div class="item">
                    <span>2023.8.13</span>
                    <img src="/img/3.png" alt="">
                    <h3>军训小贴士——管理篇</h3>
                    <p>军训是必修课，占 2 学分，军训成绩区分为优秀、良好、中、合格、不合格五个档次。同学们须积极参加，态度端正，全程训练。</p>
                </div>
                <div class="item">
                    <span>2023.8.13</span>
                    <img src="/img/3.png" alt="">
                    <h3>军训小贴士——管理篇</h3>
                    <p>军训是必修课，占 2 学分，军训成绩区分为优秀、良好、中、合格、不合格五个档次。同学们须积极参加，态度端正，全程训练。</p>
                </div>
                <div class="item">
                    <span>2023.8.13</span>
                    <img src="/img/3.png" alt="">
                    <h3>军训小贴士——管理篇</h3>
                    <p>军训是必修课，占 2 学分，军训成绩区分为优秀、良好、中、合格、不合格五个档次。同学们须积极参加，态度端正，全程训练。</p>
                </div>
                <div class="item">
                    <span>2023.8.13</span>
                    <img src="/img/3.png" alt="">
                    <h3>军训小贴士——管理篇</h3>
                    <p>军训是必修课，占 2 学分，军训成绩区分为优秀、良好、中、合格、不合格五个档次。同学们须积极参加，态度端正，全程训练。</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
}
.jx
{
    background: rgb(245,245,245);
    padding:20px 0;
    margin:100px 0;
}
.jx .jx_main{
    width:1200px;
    margin:20px auto;
}
.jx .jx_main .jx_main_top{
    display: flex;
    justify-content: space-between; /*两边分布*/
    border-bottom: 1px solid rgb(221,221,221);
}
.jx .jx_main .jx_main_top span{
    border-bottom: 2px solid rgb(195,63,48);
    padding-bottom:10px ;
    font-size: 18px;
}
.jx .jx_main .jx_main_top a{
    color: rgb(153,153,176);
    text-decoration: none;/*去下划线用文本装修*/
}
.jx .jx_main .jx_main_bottom{
    margin-top:20px;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;

}
.jx .jx_main .jx_main_bottom .item{
    width: 24%;
    background-color:rgb(255,255,255);
    position:relative;
}
.jx .jx_main .jx_main_bottom .item :hover{
    color:rgb(195,63,48);
    cursor: pointer;
}
.jx .jx_main .jx_main_bottom .item img{
    width:100%;

}
.jx .jx_main .jx_main_bottom .item span
{
    background-color: rgb(229,145,135);
    color:#fff;
    padding:4px;
    position:absolute;
    font-size:13px;
    top:0;
    left:0;
}
.jx .jx_main .jx_main_bottom .item h3{
    padding:8px 8px 0 8px;
    font-weight: 500;/*字体粗细*/
    font-size:16px;
    color: rgb(195,63,48);
}
.jx .jx_main .jx_main_bottom .item p{
    padding:8px;
    font-size:14px;
    color:rgb(153,153,176);
    line-height: 25px;/*行高*/
}

顶端

<!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>Document</title>
    <link rel="stylesheet" href="/css/show5+.css">
</head>
<body>
    <div class="page_top">
        <div class="page_top_left">
            <img src="/img/logo.png" alt="" class="logo">
            <div class="sub_logo">
                <img src="/img/yinxin.png" alt="" class="sub_yx">
                <p>Newcomers' Session</p>
            </div>
        </div>
        <div class="page_top_right">
            <a href="#">河大主页</a>
            <a href="#">学工网</a>
        </div>
    </div>
    <div class="menu">
        <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="#">河大易班</a></li>
        </ul>
    </div>
</body>
</html>

.page_top
{
    align-items: center;
    width: 1170px;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
}
.page_top .page_top_left
{
    display: flex;
    align-items: flex-end;
}
.page_top .page_top_left .sub_logo
{
    position: relative;
    top:10px;
    left:10px;
}
.page_top .page_top_left .sub_logo p
{
    color:rgb(148,50,39);
    font-size: 15px;
}
.page_top .page_top_right a
{
    color:rgb(148,50,39);
    font-size: 14px;
    text-decoration: none;
}

.page_top .page_top_right a:first-child
{
    border-right:1px solid rgb(119,119,119);
    padding-right:4px ;
}
.menu
{
    background-color: rgb(148,50,39);
    
}
.menu ul
{
   
    width:1000px;
    margin:0 auto;
    display: flex;
    justify-content: space-between;
    
}

.menu ul li
{
    list-style: none;
    
}

.menu ul li a
{

    padding:10px 7px;
    display:block;/*变成块级元素才能撑开*/
    text-decoration:none;
    color:#fff;
    

}
.menu ul li a:hover{
    
    color:rgb(148,50,39);
    background-color: rgb(247,239,232);
}

主要部分

<!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>Document</title>
    <link rel="stylesheet" href="/css/show6+.css">
</head>
<body>
    <div class="page_main">
        <div class="page_main_left">
            <div class="top">
                <span>快捷方式</span>
            </div>
            <ul>
                <li>
                    <a href="#">
                        <img src="/img/12155837ihre.png" alt="">
                        <h3>学院简介</h3>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="/img/12155851xeox.png" alt="">
                        <h3>学院简介</h3>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="/img/12155837ihre.png" alt="">
                        <h3>学院简介</h3>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="/img/12155837ihre.png" alt="">
                        <h3>学院简介</h3>
                    </a>
                </li>
            </ul>
        </div>
        <div class="page_main_center">
            <div class="top">
                <span>通知公告</span>
                <a href="#">more+</a>
            </div>
            <ul>
                <li>
                    <a href="#">
                        <div class="page_main_center_left">
                            <h3>09</h3>
                            <p>2023.08</p>
                        </div>
                        <div class="page_main_center_right">
                            <h3>【链接推文】关于校方认证和网上预报到流程</h3>
                            <p>速看！新生预报到已开启，快来看看这篇保姆级教程吧。
                                亲爱的新同学们网上预报到和易班校方认证工作即将于8月14日-25日
                                开启小易整理了一份详细流程一...</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="page_main_center_left">
                            <h3>09</h3>
                            <p>2023.08</p>
                        </div>
                        <div class="page_main_center_right">
                            <h3>【链接推文】关于校方认证和网上预报到流程</h3>
                            <p>速看！新生预报到已开启，快来看看这篇保姆级教程吧。
                                亲爱的新同学们网上预报到和易班校方认证工作即将于8月14日-25日
                                开启小易整理了一份详细流程一...</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="page_main_center_left">
                            <h3>09</h3>
                            <p>2023.08</p>
                        </div>
                        <div class="page_main_center_right">
                            <h3>【链接推文】关于校方认证和网上预报到流程</h3>
                            <p>速看！新生预报到已开启，快来看看这篇保姆级教程吧。
                                亲爱的新同学们网上预报到和易班校方认证工作即将于8月14日-25日
                                开启小易整理了一份详细流程一...</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="page_main_center_left">
                            <h3>09</h3>
                            <p>2023.08</p>
                        </div>
                        <div class="page_main_center_right">
                            <h3>【链接推文】关于校方认证和网上预报到流程</h3>
                            <p>速看！新生预报到已开启，快来看看这篇保姆级教程吧。
                                亲爱的新同学们网上预报到和易班校方认证工作即将于8月14日-25日
                                开启小易整理了一份详细流程一...</p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="page_main_right">
            <div class="top">
                <span>视频河大</span>
                <a href="#">more+</a>
            </div>
        </div>
    </div>
</body>
</html>

.page_main{
    width:1170px;
    margin:30px auto 0;
    display: flex;
    justify-content: space-between;
}
.page_main .page_main_left{
    width:20%;
}
.page_main .page_main_left ul{
    margin-top: 20px;
}
.page_main .page_main_left ul li{
    list-style: none;
    text-align: center;
    margin-bottom: 15px;
}
.page_main .page_main_left ul li a{
    display: block;
    padding: 15px 0;
    color:#fff;
    text-decoration: none;
}
.page_main .page_main_left ul li a:hover{
   /* opacity: ;透明度*/
    box-shadow: 0 0 10px #fff inset;/*阴影 内阴影*/

}
.page_main .page_main_left ul li:nth-child(1){

    background:rgb(148,193,219);
}
.page_main .page_main_left ul li:nth-child(2){
    background:rgb(241,195,69);
}
.page_main .page_main_left ul li:nth-child(3){
    background:rgb(195,212,81);
}
.page_main .page_main_left ul li:nth-child(4){
    background:rgb(187,24,100);
}
.page_main .page_main_center{
    width:53%;
}

.page_main .page_main_center ul{
    margin-top:20px;
}
.page_main .page_main_center ul li{
    list-style: none;
    margin-bottom: 26px;
    border: 1px dashed rgb(221,221,221);
    padding-bottom: 26px;
}
.page_main .page_main_center ul li:last-child{
    border:none;
}
.page_main .page_main_center ul li a{
    display: flex;
}
.page_main .page_main_center ul li a .page_main_center_left{
    width:15%;
    text-align: center;
}
.page_main .page_main_center ul li a .page_main_center_left h3{
    background-color:rgb(238,238,238);
    color:rgb(195,63,48);
    font-size: 30px;
    padding:5px 0;
}
.page_main .page_main_center ul li a .page_main_center_left p{
    background-color: rgb(195,63,48);
    color:  #fff;
    font-size: 13px;
    padding:4px 0;
}
.page_main .page_main_center ul li a .page_main_center_right
{
    width:83%;
}
.page_main .page_main_center ul li a .page_main_center_right h3{
    font-weight: 500;
    font-size: 16px;
    color:rgb(195,63,48);
}
.page_main .page_main_center ul li a .page_main_center_right p{
    font-size:14px;
    color:rgb(153,153,176);
    margin-top:10px;
}
.page_main .page_main_right{
    width: 25%;
}
.page_main .top{
    display: flex;
    justify-content: space-between; /*两边分布*/
    border-bottom: 1px solid rgb(221,221,221);
}
.page_main .top span{
    border-bottom: 2px solid rgb(195,63,48);
    padding-bottom:10px ;
    font-size: 18px;
}
.page_main .top  a{
    color: rgb(153,153,176);
    text-decoration: none;/*去下划线用文本装修*/
}

整个：
html
请添加图片描述

css
请添加图片描述

yamotl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java-php-python-ssm旅游信息管理系统计算机毕业设计
sheji892的博客
09-21 162
JSP企业客户服务与产品管理系统的设计和实现SQLServer。springboot基于互联网的图书管理系统—借阅管理子模块。springboot基于Bootstrap的家具商城系统设计。ssm基于SSM的仓库管理系统的设计与实现。ssm基于H的新冠防疫宣传网站的设计与实现。JSP广告公司网站的设计与实现mysql。ssm基于HTML的游戏网站设计与实现。ssm基于html的健身房信息管理系统。
java-php-python-springboot网上教学系统计算机毕业设计
sheji892的博客
09-25 421
ssm基于javaweb的硕士研究生招生考试专业报考查询及学习系统设计与实现。springboot基于SpringBoot的创意项目众筹平台的设计与开发。springcloud基于springcloud的电商平台的设计与实现。jsp基于JavaWeb的社区商超系统的设计与实现。springboot体育馆预定管理平台的设计与实现。ssm基于Web的精品课程网站的设计与实现。
2024年最全的软件项目分享：2000+软件项目
m0_72438098的博客
12-23 4346
计算机软件毕业设计选题 选题方向 毕设题目 项目演示 电商后台管理系统 点击这里查看演示 下载资源 图书推荐系统 点击这里查看演示 下载资源 学生选课系统 点击这里查看演示 下载资源 宿舍管理系统 点击这里查看演示 下载资源 基于协同过滤算法的乐购商城 点击这里查看演示 下载资源 校医院管理系统 点击这里查看演示 下载资源
计算机毕业设计题目大全毕设课题
热门推荐
weixin_41792788的博客
11-08 1万+
JAVA类计算机专业毕业设计题目 SSM JSP类计算机专业毕业设计题目 SSM VUE类计算机专业毕业设计题目 Springboot VUE类计算机专业毕业设计题目 微信小程序类计算机专业毕业设计题目 ASP.NET类计算机专业毕业设计题目 PHP类计算机专业毕业设计题目 Node类计算机专业毕业设计题目
java计算机毕业设计教学互动跟踪系统MyBatis+系统+LW文档+源码+调试部署
m0_71426459的博客
11-01 132
java计算机毕业设计教学互动跟踪系统MyBatis+系统+LW文档+源码+调试部署。springboot基于SpringBoot的婚庆策划系统的设计与实现。springboot基于springboot+vue的线上学习系统。前端技术：Layui、HTML、CSS、JS、JQuery等技术。JSP手机销售网站的设计与开发access+SQL数据库双数据库。springboot基于Springboot校园招聘系统。JSP驾照管理系统设计（论文+系统+开题报告）ssm基于移动端的校园请假系统的设计与实现。
java毕业设计教学平台mybatis+源码+调试部署+系统+数据库+lw
lkkj99的博客
11-26 135
java毕业设计教学平台mybatis+源码+调试部署+系统+数据库+lw。springcloud基于springcloud的电商平台的设计与实现。springboot基于springboot的社会公益平台。springboot攀枝花市教体局门户网站的设计与实现。JSP三亚旅游网的设计与开发sqlserver。springboot木材产销系统的生产管理模块。ssm基于SSM的民宿预订管理系统设计与实现。ssm基于ssm的电子配件公司仓库管理系统。ssm基于JavaEE的疆域特色农家乐系统。
java毕业生设计员工信息管理计算机源码+系统+mysql+调试部署+lw
bishe504的博客
10-21 127
java毕业生设计员工信息管理计算机源码+系统+mysql+调试部署+lw。前端技术：Layui、HTML、CSS、JS、JQuery等技术。JSP鸡厂养殖管理系统的设计与实现sqlserver。JSP社团管理系统的设计与实现sqlserver。ssm基于ssm的再生产公益管理系统的设计与实现。ssm基于SSM框架的毕业生离校管理系统。springboot精品在线试题库系统。
软件联盟社团介绍
愿赌服输
07-31 1463
软件联盟协会介绍河南大学软件学院软件协会于2013年成立，它是一个全校性的学术性组织，是河南大学软件学院广大软件爱好者与学习者组成的校级学生社团。它集趣味性，知识性，学术性与一体，是河大软院学子软件应用和开发知识学习，计算机专业培训和计算机科学研究的群众组织，协会自建会以来，在校团委，院团委的领导下，本着”普及软件知识，提高会员专业水平，培养初级计算机软硬件开发能力”这一宗旨，不断努力，社团力量日益
java毕业设计线上教学平台mybatis+源码+调试部署+系统+数据库+lw
adf5653的博客
11-24 132
java毕业设计线上教学平台mybatis+源码+调试部署+系统+数据库+lw。springboot基于springboot的影视资讯管理系统。springboot基于互联网的图书管理系统—借阅管理子模块。springboot基于web的数码产品应用平台设计与实现。springboot+sqlserver校园服装租赁系统。springboot木材产销系统的生产管理模块。ssm基于JAVA的OA办公系统的设计与实现。ssm+sqlserver迎宾酒店管理系统。ssm基于ssm的电子配件公司仓库管理系统。
大学生社团迎新晚会ppt模板.ppt
08-22
大学社团迎新晚会ppt模板是专为高校社团组织提供。 大学社团基本上涵盖文艺、体育、外语、社会援助等等。比如合唱团、羽毛球社、轮滑、登山、英语、漫画社、爱心社等社团组织。
【前端模板】107 上海XX大学迎新实时大数据看板.zip
03-19
大数据分析页面通常是指用于展示和分析大数据集的界面或页面。这些页面通常包含数据可视化工具、数据过滤器、图表和表格，以便用户能够直观地理解和分析大数据集。大数据分析页面通常用于商业智能、数据科学、市场...
大学生迎新系统代码 java大学生迎新系统代码
02-18
基于springboot的大学生迎新系统代码 1、大学生迎新系统的技术栈、环境、工具、软件： 1、技术栈：java,springboot,vue，ajax，maven，mysql，MyBatisPlus等 开发语言：Java 框架：SpringBoot JDK版本：JDK1.8 ...
基于springboot的大学生迎新系统代码
04-12
基于springboot的大学生迎新系统代码 1、大学生迎新系统的技术栈、环境、工具、软件： ① 系统环境:Windows/Mac ② 开发语言：Java ③ 框架：SpringBoot ④ 架构:B/S、MVC ⑤ 开发环境:IDEA、JDK、Maven、Mysql ⑥ ...
前端字符串将其分割成长度为 32 的子字符串数组
最新发布
人与人之间最小的差别是智商，最大的差别是坚持。
08-19 189
要实现这个需求，可以编写一个简单的 JavaScript 函数来处理字符串并将其分割成长度为 32 的子字符串数组。将字符串切割后，对list数据进行数据处理。
pywebview 入门
小小宾的博客
08-18 652
pywebview 是一个轻量级的 python 库，旨在简化桌面应用程序的开发。它利用系统的 WebView 组件，使得开发人员可以使用现代 Web 技术（HTML、CSS、JavaScript）来创建用户界面，同时使用 python 处理业务逻辑。pywebview 使得创建跨平台桌面应用程序变得更加简单和高效。
vue-lic（三）
qq_64669006的博客
08-14 301
Vue 应用中的跨域问题通常是由于浏览器的同源策略引起的，它阻止了一个源（origin）的网页上的JavaScript 代码请求另一个源的资源。也就是说，只要https://www.baidu.com中https://，www.baidu，.com中有一个不一样，就会导致存在跨域问题。2.逆向传递数据(vue不支持逆向传递)-->子组件给父组件传递，通过$emit("事件名",要传递的数据)自定义监听事件。，这里因为本身就有/api，再添加了一个/api，所以需要去掉一个/api，也就是重写路径。
CORS error && 302 Found
zcxbd的博客
08-19 93
单点登录认证：访问A系统，在B系统登录认证此处代码为A系统。
web前端之html弹窗面板的popover新属性
软件毕设协助及软件开发、智慧电子模块、计算机科技、软件开发、硬件开发、程序员、写代码、工程师、互联网、物联网、技术栈、程序、编程、IT。
08-18 3732
web前端之html弹窗面板的popover新属性
重庆大学迎新服务系统用户手册
"重庆大学迎新服务系统用户使用手册，提供了查询统计、环节办理和常见疑问解答等功能，旨在帮助用户高效管理新生报到流程。" 在迎新管理系统中，查询统计功能是核心部分，它允许管理员或者相关工作人员实时监控新生...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值