Web前端期末大作业-绿色实验楼bootstrap响应式教育模板

最新推荐文章于 2024-06-23 10:07:52 发布
最新推荐文章于 2024-06-23 10:07:52 发布
阅读量1.5k 收藏 14
点赞数 3
分类专栏： Web前端期末大作业 文章标签： 前端 bootstrap html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51966461/article/details/121776624
版权

🍊作者：计算机编程-吉哥

🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。

🍊心愿：点赞 👍 收藏 ⭐评论 📝

🍅 文末获取源码联系 

效果展示：  

 

 部分代码：  


<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="author" content="Lei Shi">
<meta http-equiv="Cache-Control" content="o-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="csrf-token" content="1483780974##87f89328c5616669f00302a263fe9061bb852818">
		
<title>高校合作 - 实验楼</title>
<meta content="实验楼课程分为基础课和项目课，内容涵盖了Linux、Python、Java、C语言、Ruby、Android、IOS开发、大数据、信息安全等IT技术领域。" name="description">
<meta content="实验楼课程,IT培训课程,IT实训课程,IT在线课程,all" name="keywords">

    <meta content="实验楼,琛石科技" name="author">

	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="../static/font-awesome//4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../static/highlight.js/9.8.0/monokai-sublime.min.css">
    <link rel="stylesheet" href="../app/css/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="../app/css/libs/katex/0.6.0/katex.min.css">
    <link rel="stylesheet" href="../app/css/libs/videojs/5.11.7/video-js.min.css">
	<link rel="stylesheet" href="../app/css/dest/styles.css?=2016121272249">

	<style>
		@font-face {
			font-family: "lantingxihei";
			src: url("../fonts/FZLTCXHJW.TTF");
		}

        /* modal 模态框*/
        #invite-user .modal-body {
            overflow: hidden;
        }
		#invite-user .modal-body .form-label {
			margin-bottom: 16px;
			font-size:14px;
		}
		#invite-user .modal-body .form-invite {
			width: 80%;
			padding: 6px 12px;
			background-color: #eeeeee;
			border: 1px solid #cccccc;
			border-radius: 5px;
			float: left;
			margin-right: 10px;
		}
		#invite-user .modal-body .msg-modal-style {
			background-color: #7dd383;
			margin-top: 10px;
			padding: 6px 0;
			text-align: center;
			width: 100%;
		}
		#invite-user .modal-body .modal-flash {
			position: absolute;
			top: 53px;
			right: 74px;
			z-index: 999;
		}
		/* end modal */

        .en-footer {
            padding: 30px;
            text-align: center;
            font-size: 14px;
        }
    </style>

</head>

<body>
<nav class="navbar navbar-default navbar-fixed-top header">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar-collapse" aria-expanded="false">
                <span class="sr-only">实验楼</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="../index.html">
                <img src="../img/logo_03.png">
            </a>
        </div>
        <div class="collapse navbar-collapse" id="header-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="dropdown active">
                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
                        课程
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="active" href="../courses/index.html" >全部课程</a></li>
                        <li><a class="" href="../courses/index.html?status=preview" >即将上线</a></li>
                        <li><a class="" href="../developer/index.html">开发者</a></li>
                    </ul>
                </li>
                <li class="">
                    <a href="../paths/index.html">路径</a>
                </li>
                <li class="">
                    <a href="../questions/index.html">讨论区</a>
                </li>
                <li class=" bootcamp new-nav logo-1111">
                    <a href="../bootcamp/index.html">训练营</a>
                    
                </li>
                <li class=" new-nav logo-1111">
                    <a href="../vip/index.html">会员</a>
                    
                </li>
                
            </ul>

            
            <div class="navbar-right btns">
                <a class="btn btn-default navbar-btn sign-in" data-sign="signin" href="#sign-modal" data-toggle="modal">登录</a>
                <a class="btn btn-default navbar-btn sign-up" data-sign="signup" href="#sign-modal" data-toggle="modal">注册</a>
            </div>
            

            <form class="navbar-form navbar-right" action="../search" method="get" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" name="search" autocomplete="off" placeholder="搜索 课程/问答">
                </div>
            </form>
        </div>
    </div>
</nav>

        
	
<div class="container layout layout-margin-top">
    
    
    <div class="row">
        <div class="col-md-9 layout-body">
            
    <div class="content">
        <div class="discovery-list">
            <div class="discovery-title">
                <img class="pull-left" src="../img/community.png">
                <div class="pull-left discovery-title-text">
                    <strong>高校群组</strong><span>（发现身边一起奋斗的小伙伴）</span>
                </div>
            </div>
            <div class="row">
                

<div class="col-md-4" >
    <a class="community-item" href="
    
        /edu/uestc
    ">
        <div class="media">
            <div class="media-left community-item-left">
                <div class="community-item-img">
                    <img class="media-object" src="https://dn-simplecloud.qbox.me/group-gravatarNTY0MzE5MDEyNzY2.png?v=1431078893010&amp;imageView2/1/w/200/h/200">
                </div>
            </div>
            <div class="media-body community-item-body">
                <h4 class="media-heading community-item-name">电子科技大学</h4>
                <div class="community-item-info">
                    <div class="community-item-sum">人数： 689</div>
                </div>
            </div>
        </div>
    </a>
</div>

<div class="col-md-4" >
    <a class="community-item" href="
    
        /edu/bupt
    ">
        <div class="media">
            <div class="media-left community-item-left">
                <div class="community-item-img">
                    <img class="media-object" src="https://dn-anything-about-doc.qbox.me/daxue北京邮电大学logo.jpg">
                </div>
            </div>
            <div class="media-body community-item-body">
                <h4 class="media-heading community-item-name">北京邮电大学</h4>
                <div class="community-item-info">
                    <div class="community-item-sum">人数： 526</div>
                </div>
            </div>
        </div>
    </a>
</div>

<div class="col-md-4" >
    <a class="community-item" href="
    
        /edu/hust
    ">
        <div class="media">
            <div class="media-left community-item-left">
                <div class="community-item-img">
                    <img class="media-object" src="https://dn-anything-about-doc.qbox.me/daxue华中科技大学logo.jpg">
                </div>
            </div>
            <div class="media-body community-item-body">
                <h4 class="media-heading community-item-name">华中科技大学</h4>
                <div class="community-item-info">
                    <div class="community-item-sum">人数： 511</div>
                </div>
            </div>
        </div>
    </a>
</div>

<div class="col-md-4" >
    <a class="community-item" href="
    
        /edu/ustc
    ">
        <div class="media">
            <div class="media-left community-item-left">
                <div class="community-item-img">
                    <img class="media-object" src="https://dn-anything-about-doc.qbox.me/daxue中国科学技术大学logo.jpg">
                </div>
            </div>
            <div class="media-body community-item-body">
                <h4 class="media-heading community-item-name">中国科学技术大学</h4>
                <div class="community-item-info">
                    <div class="community-item-sum">人数： 491</div>
                </div>
            </div>
        </div>
    </a>
</div>

<div class="col-md-4" >
    <a class="community-item" href="
    
        /edu/xidian
    ">
        <div class="media">
            <div class="media-left community-item-left">
                <div class="community-item-img">
                    <img class="media-object" src="https://dn-anything-about-doc.qbox.me/daxue西安电子科技大学logo.jpg">
                </div>
            </div>
            <div class="media-body community-item-body">
                <h4 class="media-heading community-item-name">西安电子科技大学</h4>
                <div class="community-item-info">
                    <div class="community-item-sum">人数： 467</div>
                </div>
            </div>
        </div>
    </a>
</div>

<div class="col-md-4" >
    <a class="community-item" href="
    
        /edu/hnie
    ">
        <div class="media">
            <div class="media-left community-item-left">
                <div class="community-item-img">
                    <img class="media-object" src="https://dn-simplecloud.qbox.me/1463463320092.png">
                </div>
            </div>
            <div class="media-body community-item-body">
                <h4 class="media-heading community-item-name">湖南工程学院</h4>
                <div class="community-item-info">
                    <div class="community-item-sum">人数： 423</div>
                </div>
            </div>
        </div>
    </a>
</div>

<div class="col-md-4" >
    <a class="community-item" href="
    
        /edu/cqupt
    ">
        <div class="media">
            <div class="media-left community-item-left">
                <div class="community-item-img">
                    <img class="media-object" src="https://dn-anything-about-doc.qbox.me/daxue重庆邮电大学logo.jpg">
                </div>
            </div>
            <div class="media-body community-item-body">
                <h4 class="media-heading community-item-name">重庆邮电大学</h4>
                <div class="community-item-info">
                    <div class="community-item-sum">人数： 415</div>
                </div>
            </div>
        </div>
    </a>
</div>

<div class="col-md-4" >
    <a class="community-item" href="
    
        /edu/whut
    ">
        <div class="media">
            <div class="media-left community-item-left">
                <div class="community-item-img">
                    <img class="media-object" src="https://dn-anything-about-doc.qbox.me/daxue武汉理工大学logo.jpg">
                </div>
            </div>
            <div class="media-body community-item-body">
                <h4 class="media-heading community-item-name">武汉理工大学</h4>
                <div class="community-item-info">
                    <div class="community-item-sum">人数： 387</div>
                </div>
            </div>
        </div>
    </a>
</div>

<div class="col-md-4" >
    <a class="community-item" href="
    
        /edu/pku
    ">
        <div class="media">
            <div class="media-left community-item-left">
                <div class="community-item-img">
                    <img class="media-object" src="https://dn-anything-about-doc.qbox.me/daxue北京大学logo.png">
                </div>
            </div>
            <div class="media-body community-item-body">
                <h4 class="media-heading community-item-name">北京大学</h4>
                <div class="community-item-info">
                    <div class="community-item-sum">人数： 360</div>
                </div>
            </div>
        </div>
    </a>
</div>

<div class="col-md-4" >
    <a class="community-item" href="
    
        /edu/tsinghua
    ">
        <div class="media">
            <div class="media-left community-item-left">
                <div class="community-item-img">
                    <img class="media-object" src="https://dn-anything-about-doc.qbox.me/daxue清华大学logo.jpg">
                </div>
            </div>
            <div class="media-body community-item-body">
                <h4 class="media-heading community-item-name">清华大学</h4>
                <div class="community-item-info">
                    <div class="community-item-sum">人数： 353</div>
                </div>
            </div>
        </div>
    </a>
</div>

<div class="col-md-4" >
    <a class="community-item" href="
    
        /edu/seu
    ">
        <div class="media">
            <div class="media-left community-item-left">
                <div class="community-item-img">
                    <img class="media-object" src="https://dn-simplecloud.qbox.me/community_11.jpg">
                </div>
            </div>
            <div class="media-body community-item-body">
                <h4 class="media-heading community-item-name">东南大学</h4>
                <div class="community-item-info">
                    <div class="community-item-sum">人数： 343</div>
                </div>
            </div>
        </div>
    </a>
</div>

<div class="col-md-4" >
    <a class="community-item" href="
    
        /edu/zju
    ">
        <div class="media">
            <div class="media-left community-item-left">
                <div class="community-item-img">
                    <img class="media-object" src="https://dn-anything-about-doc.qbox.me/daxue浙江大学logo.jpg">
                </div>
            </div>
            <div class="media-body community-item-body">
                <h4 class="media-heading community-item-name">浙江大学</h4>
                <div class="community-item-info">
                    <div class="community-item-sum">人数： 343</div>
                </div>
            </div>
        </div>
    </a>
</div>
</body>
</html>

更多文章：Web前端期末大作业 

公众号：IT跃迁谷【更多精彩文章】

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓如果大家有任何疑虑，请在下方昵称位置详细咨询。

计算机编程-吉哥
关注
专栏目录
HTML5期末大作业：游戏网站设计与实现——基于bootstrap响应式游戏资讯网站制作HTML+CSS+JavaScript
专注于dreamweaver网页设计制作
08-08 439
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保......
web前端期末大作业——基于HTML+CSS+JavaScript实现中国茶文化(30页)
HTML网页设计
08-12 1183
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒......
HTML网页设计制作——响应式网页影视动漫资讯bootstrap网页(9页)
最新发布
网页设计与制作 | HTML+CSS+JS
06-23 383
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
绿色实验楼bootstrap响应式教育模板.rar
08-20
绿色实验楼bootstrap响应式教育模板.rar
Bootstrap期末作品
12-18
整体运用了栅格系统布局，局部应用了固定到顶部的导航栏组件，下拉菜单组件，轮播图插件，以及Bootstrap自带的按钮样式。希望通过学习Bootstrap从这种布局的思想，实现的方式中加深对CSS html 的理解
一份Bootstrap框架的期末作业
06-17
这是我对平时bootstrap使用练习的一个集合，欢迎下载，使用的时候一定要注意更改页面底部标签-_-
【Web网页设计制作-毕业设计期末大作业源码】绿色响应式wordpress博客bootstrap3模板5256.zip
05-15
Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计...
【Web网页设计制作-毕业设计期末大作业源码】IT前端开发科技公司bootstrap模板下载4909.zip
05-11
Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web...
【Web网页设计制作-毕业设计期末大作业源码】PRESENCE大屏Retina响应式bootstrap模板5082.zip
05-11
Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web...
web前端期末大作业——基于Bootstrap响应式汽车经销商4S店官网21页
08-10
该项目是一项面向学生的web前端期末大作业，主要目标是设计与制作一个基于Bootstrap响应式的汽车经销商4S店官方网站。该网站共包含21个页面，不仅涵盖了传统的HTML静态网页设计，还引入了现代前端技术，如CSS布局、...
一份bootstrap框架期末作业，请注意查收
06-17
这是我对平时bootstrap使用练习的一个集合，欢迎下载，使用的时候一定要注意更改页面底部标签-_-
白蓝色bootstrap课程模板_精选教育模板
09-06
白蓝色bootstrap课程模板_精选教育模板，
绿色IT技术在线教育响应式HTML模板
05-01
绿色IT技术在线教育响应式HTML模板基于Bootstrap3.3.7制作，自适应分辨率，兼容PC端和移动端，全套模板，包括首页、课程、路径、讨论区、训练营、会员、注册、登录等网站模板页面。
绿色IT技术在线学习响应式HTML模板
06-06
绿色IT技术在线教育响应式HTML模板基于Bootstrap3.3.7制作，自适应分辨率，兼容PC端和移动端，全套模板，包括首页、课程、路径、讨论区、训练营、会员、注册、登录等网站模板页面。
Bootstrap期末课程设计
03-09
资源名称：Bootstrap期末课程设计 内容使用语言：HTML5+css3+js+bootstrap框架 使用/学习场景：完成整个学期成果，了解框架的好处 应用场景：对于使用框架对于完成一个网页的实现更加容易 特点：加深对前端语言的应用（HTML，css, js） 适用人群：想短时间内完成Bootstrap的初学者 使用/学习说明：在学习的过程中，体会框架对于设计整个网页的好处，在实践中进步
bootstrap响应式布局练习
a88480的博客
10-16 785
bootstrap响应式布局练习 在三种不同的屏幕下呈现不同的效果 大屏(pc端) 小屏下(平板) 超小屏(手机) html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht
Web前端大作业：基于bootstrap响应式页面，家具装修公司网站
qq_38515380的博客
04-09 311
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

计算机编程-吉哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值