day6
程序员文章站
2022-07-13 22:30:17
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap网站首页</title>
<script src="JQuery/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<style>
.item {
margin: 0px 10px 30px;
padding: 4px;
border: 1px solid #dddddd;
width: 260px;
}
.item a{
font-size: 25px ;
}
asd {
font-size: 16px;color: #cccccc;
}
li {
list-style: none;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation" style="background-color: #0f0f0f">
<div class="container-fluid" >
<div class="navbar-header">
<a class="navbar-brand" href="#">Bootstrap中文网</a>
</div>
<div>
<ul class="nav navbar-nav">
<li><a href="#">Bootstrap2中文网</a></li>
<li><a href="#">Bootstrap3中文网</a></li>
<li><a href="#">Bootstrap4中文网</a></li>
<li><a href="#">less教程</a></li>
<li><a href="#">jQueryAPI</a></li>
<li><a href="#">网站实例</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">关于</a></li>
</ul>
</div>
</div>
</nav>
<div class="container text-center" style="background-color: #204d74">
<h1 style="font-size: 100px;color: white;margin: 20px auto" class="text-center">BootStrap</h1>
<h2 class="text-center" style="color: white">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</h2>
<a class="btn btn-lg btn-primary btn"style="margin: 20px auto">Bootstrap3中文文档(v3.3.7)</a>
<br/>
<a style="color: white;margin: 20px auto">Bootstrap2中文文档(v2.3.2)</a>
</div>
<div class="container text-center" style="background-color: #f5f5f5;padding: 15px 0">
<p><a><span class="glyphicon glyphicon-cloud"></span>BootStrap问答社区</a><a><span
class="glyphicon glyphicon-cloud">新浪微博：@Bootstrap中文网</span></a></p>
</div>
<div class="container text-center">
<h2>Bootstrap相关优质项目推荐</h2>
<p>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</p>
<div class="row" style="width: 1170px">
<div class="col-md-3" style="">
<div class="item">
<img src="https://cdn.jsdelivr.net/npm/@bootcss/aaa@qq.com/dist/img/expo.png"
width="250px" height="150px">
<a href="" style="" class="text-center">优站精选</a>
<br>
<asd>BootStrap网站实例</asd>
<br>
<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
</div>
</div>
<div class="col-md-3" style="">
<div class="item">
<img src="https://cdn.jsdelivr.net/npm/@bootcss/aaa@qq.com/dist/img/webpack.png"
width="250px" height="150px">
<a href="" style="" class="text-center">Webpack</a>
<br>
<asd>是前端资源模块化管理和打包工具</asd>
<br>
<p>Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符。</p>
</div>
</div>
<div class="col-md-3" style="">
<div class="item">
<img src="https://cdn.jsdelivr.net/npm/@bootcss/aaa@qq.com/dist/img/react.png"
width="250px" height="150px">
<a href="" style="" class="text-center">React</a>
<br>
<asd>React</asd>
<br>
<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
</div>
</div>
<div class="col-md-3" style="">
<div class="item">
<img src="https://cdn.jsdelivr.net/npm/@bootcss/aaa@qq.com/dist/img/typescript.png"
width="250px" height="150px">
<a href="" style="" class="text-center">TypeScript</a>
<br>
<asd>TypeScript </asd>
<br>
<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
</div>
</div>
<div class="col-md-3" style="">
<div class="item">
<img src="https://cdn.jsdelivr.net/npm/@bootcss/aaa@qq.com/dist/img/jqueryapi.png"
width="250px" height="150px">
<a href="" style="" class="text-center">jQuery API </a>
<br>
<asd>jQuery API </asd>
<br>
<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
</div>
</div>
<div class="col-md-3" style="">
<div class="item">
<img src="https://cdn.jsdelivr.net/npm/@bootcss/aaa@qq.com/dist/img/nextjs.png"
width="250px" height="150px">
<a href="" style="" class="text-center">Next.js</a>
<br>
<asd>Next.js</asd>
<br>
<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
</div>
</div>
<div class="col-md-3" style="">
<div class="item">
<img src="https://cdn.jsdelivr.net/npm/@bootcss/aaa@qq.com/dist/img/babeljs.png"
width="250px" height="150px">
<a href="" style="" class="text-center">Babel </a>
<br>
<asd>Babel </asd>
<br>
<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
</div>
</div>
<div class="col-md-3" style="">
<div class="item">
<img src="https://cdn.jsdelivr.net/npm/@bootcss/aaa@qq.com/dist/img/nodejs.png"
width="250px" height="150px">
<a href="" style="" class="text-center">Node.js</a>
<br>
<asd>Node.js</asd>
<br>
<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
</div>
</div>
</div>
</div>
<footer>
<div class="footer_top">
<div class="col-md-6">
<h4>
<img src="https://cdn.jsdelivr.net/npm/@bootcss/aaa@qq.com/dist/img/logo.png" alt="">
<p>我们一直致力于为广大开发者提供更多的优质技术文档和辅助开发工具！</p>
</h4>
</div>
<div class="col-md-6">
<div class="col-md-3">
<h4>关于</h4>
<ul>
<li>关于我们</li>
<li>广告合作</li>
<li>友情连接</li>
<li>招聘</li>
</ul>
</div>
<div class="col-md-3">
<h4>联系方式</h4>
<ul>
<li>新浪微博</li>
<li>电子邮件</li>
</ul>
</div>
<div class="col-md-4">
<h4>旗下网站</h4>
<li>Laravel中文网</li>
<li>Ghost中国</li>
<li>BootCDN</li>
<li>Packagist中国镜像</li>
</div>
<div class="col-md-2">
<h4>特别致谢</h4>
<li>猫云</li>
<li>京东云</li>
<li>又拍云</li>
</div>
</div>
</div>
<div class="footer_button text-center">
<ul>
<a href="" style="text-decoration: none;color: #0f0f0f;">京ICP备11008151号-6|京公网安备11010802014853</a>
</ul>
</div>
<div
style="width:50px;height: 50px;position: fixed;bottom: 100px;right:100px;background-color: gray;text-align: center">
<span class="glyphicon glyphicon-chevron-down"
style="color: white;font-size: 20px;margin-top: 15px"></span>
</div>
</footer>
</div>
</body>
</html>
**<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="JQuery/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<style>
li {
list-style: none;
float: left;
margin-left: 10px;
}
td {
vertical-align: middle!important;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">一个学院管理界面</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">学员管理</a></li>
<li><a href="#">教师管理</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
其他管理
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">其他1</a></li>
<li><a href="#">其他2</a></li>
<li><a href="#">其他3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<table border="1" cellspacing="0px" class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr style="background-color: #2aabd2">
<th>学号</th>
<th>姓名</th>
<th>成绩</th>
<th>学院</th>
<th>管理</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>zxc</td>
<td>100</td>
<td>传媒学院</td>
<td style="width: 300px">
<ul>
<li><button class="btn bg-danger">删除</button></li>
<li><button class="btn">修改</button></li>
<li><button class="btn bg-primary">编辑</button></li>
</ul>
</td>
</tr>
<tr>
<td>002</td>
<td>asd</td>
<td>100</td>
<td>电信学院</td>
<td style="width: 300px">
<ul>
<li><button class="btn bg-danger">删除</button></li>
<li><button class="btn">修改</button></li>
<li><button class="btn bg-primary">编辑</button></li>
</ul>
</td>
</tr>
<tr>
<td>003</td>
<td>qwe</td>
<td>100</td>
<td>大便学院</td>
<td style="width: 300px">
<ul>
<li><button class="btn bg-danger">删除</button></li>
<li><button class="btn">修改</button></li>
<li><button class="btn bg-primary">编辑</button></li>
</ul>
</td>
</tr>
<tr>
<td>004</td>
<td>fgh</td>
<td>100</td>
<td>经管学院</td>
<td style="width: 300px">
<ul>
<li><button class="btn bg-danger">删除</button></li>
<li><button class="btn">修改</button></li>
<li><button class="btn bg-primary">编辑</button></li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>**
上一篇： Verilog DAY6
下一篇： day6