作业 week2 day01+day02"/>
作业 week2 day01+day02
day01:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>;/title><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"><script src="jQuery/jquery-3.4.1.min.js"></script><script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><style>body {width: 1520px;height: 1500px;margin: 0;padding-top: 30px;font-size: 14px;color: #333;background-color: #fff;}a {text-decoration: none;}.reddot:after {content: "";position: absolute;top: 10px;right: 5px;padding: 3px;z-index: 9999999;background-color: #d9534f;font-size: 0;line-height: 0;border: 1px solid #d43f3a;border-radius: 50%;}:after {box-sizing: border-box;}.bc {content: "";display: block;position: absolute;top: 0;right: 0;bottom: 0;left: 0;height: 498px;background:url("img/bootstrap背景图.jpg") repeat 50%;/*opacity: .4;*/}.uu {list-style: none;color:rgba(255,255,255,0.5) ;}.bc-social {height: 55px;text-align: center;background-color: #f5f5f5;border-top: 1px solid #fff;border-bottom: 1px solid #ddd;margin-top: 470px;} {position: relative;z-index: 2;margin-top: 100px;}.a {font-size: 100px;color: #ffffff;}.bc-social-button {margin-left: 0;margin-bottom: 0;padding-left: 0;list-style: none;margin-top: 15px;}.social-forum {display: inline-block;line-height: 1;color: #555555;padding: 0 10px;}.social-weibo {display: inline-block;line-height: 1;}.bc-social-button>li+li:before {padding: 0 10px;color: #cccccc;content: "|";}.progress-header {width: 60%;text-align: center;font-weight: 200;display: block;margin: 60px auto 40px;}.bd {font-size: 40px;}c {border-bottom: 1px solid #eeeeee;}.footer {color: #777777;padding: 30px 0;border-top: 1px solid #e5e5e5;margin-top: 70px;}h4 {color: #563d7c;font-size: 16px;}.footer a {color: #777777;}.list-inline>li+li:before {padding: 0 10px;color: #cccccc;content: "|";}.footer-button {font-size: 13px;}#scroll {background-color: #777777;color: #eeeeee;font-size: 40px;line-height: 1;text-align: center;text-decoration: none;bottom: 100px;right: 20px;overflow: hidden;width: 46px;height: 46px;border: none;opacity: .8;}.ver {position: fixed;z-index: 2147483647;}.fa {display: inline-block;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-variant-numeric: normal;font-variant-east-asian: normal;font-weight: normal;font-stretch: normal;line-height: normal;margin-top: 5px;}</style>
</head>
<body>
<!--导航栏--><div class="navbar navbar-inverse navbar-fixed-top"><div class="container"><div class="navbar-collapse collapse" role="navigation"><ul class="nav navbar-nav"><li class="navbar-header"><a class="navbar-brand hidden-sm" href="">Bootstrap中文网</a></li><li class="hidden-sm hidden-md"><a href="/">Bootstrap2中文文档</a></li><li class="hidden-sm hidden-md"><a href="/">Bootstrap3中文文档</a></li><li class="hidden-sm hidden-md"><a href="/">Bootstrap4中文文档</a></li><li class="hidden-sm hidden-md"><a href="/">Less 教程</a></li><li class="hidden-sm hidden-md"><a href="/">jQuery API</a></li><li class="hidden-sm hidden-md"><a class="reddot" href="/">网站实例 </a></li></ul><ul class="nav navbar-nav navbar-right hidden-sm"><li><a href="/">关于</a></li></ul></div></div></div>
<!--第二块--><div class="bc masthead " ><div class="container cc"><h1 class="text-center a">Bootstrap</h1><h2 class="text-center" style="color: #ffffff;margin-bottom: 30px">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</h2><p class="masthead-button-links text-center"><a class="btn btn-lg btn-primary btn-shadow " role="button" href="/">Bootstrap3中文文档(v3.3.7)</a></p><ul class="masthead-links uu"><li class="text-center"><a style="color: rgba(255,255,255,0.5)" role="button" href="/">Bootstrap2中文文档(v2.3.2)</a></li></ul></div></div>
<!--第三块--><div class="bc-social"><div class="container"><ul class="bc-social-button"><li class="social-forum" ><a href=""><img style="margin: 0 auto" src="img/社区.png" height="18" width="17.6" /><span style="color: #555555">Bootstrap问答社区</span></a></li><li class="social-weibo"><a href=""><img src="img/weibo.png" height="20" width="20"/><span style="color: #555555">新浪微博：@Bootstrap中文网</span></a></li></ul></div></div>
<!--中间——第四块--><div class="container"><div class="ccc progress-header page-header"><h2 class="bd">Bootstrap相关优质项目推荐</h2><p>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</p></div><div class="row"><div class="col-sm-6 col-md-4 col-lg-3"><div class="thumbnail" style="height: 337px"><a href="/"><img src="img/bootstrap.png" height="150" width="300"data-src="/@bootcss/www.bootcss@0.0.3/dist/img/expo.png"/></a><div class="caption"><h3 class="text-center"><a href="/">优站精选<br><small> Bootstrap 网站实例</small></a></h3><p style="text-align: center;color: #555555">Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p></div></div></div><div class="col-sm-6 col-md-4 col-lg-3"><div class="thumbnail" style="height: 337px"><a href="/"><img src="img/webpack.png" height="150" width="300"data-src="/@bootcss/www.bootcss@0.0.3/dist/img/webpack.png"/></a><div class="caption"><h3 class="text-center"><a href="/">Webpack<br><small>是前端资源模块化管理和打包工具</small></a></h3><p style="text-align: center;color: #555555">Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。</p></div></div></div><div class="col-sm-6 col-md-4 col-lg-3"><div class="thumbnail" style="height: 337px"><a href="/"><img src="img/react.png" height="150" width="300"data-src="/@bootcss/www.bootcss@0.0.3/dist/img/react.png"/></a><div class="caption"><h3 class="text-center"><a href="/">React<br><small>用于构建用户界面的 JavaScript 框架</small></a></h3><p style="text-align: center;color: #555555">React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。</p></div></div></div><div class="col-sm-6 col-md-4 col-lg-3"><div class="thumbnail" style="height: 337px"><a href="/"><img src="img/typescript.png" height="150" width="300"data-src="/@bootcss/www.bootcss@0.0.3/dist/img/typescript.png"/></a><div class="caption"><h3 class="text-center"><a href="/">TypeScript<br><small>中文手册</small></a></h3><p style="text-align: center;color: #555555">TypeScript 是由微软开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。</p></div></div></div><div class="col-sm-6 col-md-4 col-lg-3"><div class="thumbnail" style="height: 337px"><a href="/"><img src="img/jqueryapi.png" height="150" width="300"data-src="/@bootcss/www.bootcss@0.0.3/dist/img/jqueryapi.png"/></a><div class="caption"><h3 class="text-center"><a href="/">jQuery API<br><small>中文手册</small></a></h3><p style="text-align: center;color: #555555">根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。</p></div></div></div><div class="col-sm-6 col-md-4 col-lg-3"><div class="thumbnail" style="height: 337px"><a href="/"><img src="img/nextjs.png" height="150" width="300"data-src="/@bootcss/www.bootcss@0.0.3/dist/img/nextjs.png"/></a><div class="caption"><h3 class="text-center"><a href="/">Next.js<br><small>中文文档</small></a></h3><p style="text-align: center;color: #555555">Next.js 是一个轻量级的 React 服务端渲染应用框架。</p></div></div></div><div class="col-sm-6 col-md-4 col-lg-3"><div class="thumbnail" style="height: 337px"><a href=""><img src="img/babeljs.png" height="150" width="300"data-src="/@bootcss/www.bootcss@0.0.3/dist/img/babeljs.png"/></a><div class="caption"><h3 class="text-center"><a href="">Babel<br><small>是一个 JavaScript 编译器。</small></a></h3><p style="text-align: center;color: #555555">Babel 是一个 JavaScript 编译器。Babel 通过语法转换器支持最新版本的 JavaScript 语法。</p></div></div></div><div class="col-sm-6 col-md-4 col-lg-3"><div class="thumbnail" style="height: 337px"><a href="/"><img src="img/nodejs.png" height="150" width="300"data-src="/@bootcss/www.bootcss@0.0.3/dist/img/nodejs.png"/></a><div class="caption"><h3 class="text-center"><a href="/">Node.js<br><small>中文文档 / 手册</small></a></h3><p style="text-align: center;color: #555555">Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。</p></div></div></div></div></div>
<!--底部--><footer class="footer"><div class="container">
<!-- 底部上面--><div class="row"><div class="col-md-6 col-lg-6"><h4><img data-src="/@bootcss/www.bootcss@0.0.3/dist/img/logo.png" src="img/logo.png" height="33" width="241"/></h4><p>我们一直致力于为广大开发者提供更多的优质技术文档和辅助开发工具！</p></div><div class="col-md-6 col-lg-5 col-lg-offset-1"><div class="row about"><div class="col-sm-3"><h4>关于</h4><ul class="list-unstyled"><li><a href="/">关于我们</a></li><li><a href="/">广告合作</a></li><li><a href="/">友情链接</a></li><li><a href="/">招聘</a></li></ul></div><div class="col-sm-3"><h4>联系方式</h4><ul class="list-unstyled"><li><a href="">新浪微博</a></li><li><a href=":admin@bootcss">电子邮件</a></li></ul></div><div class="col-sm-4"><h4>旗下网站</h4><ul class="list-unstyled"><li><a href="/">Laravel中文网</a></li><li><a href="/">Ghost中国</a></li><li><a href="/">BootCDN</a></li><li><a href="/">Packagist中国镜像</a></li></ul></div><div class="col-sm-2"><h4>特别致谢</h4><ul class="list-unstyled"><li><a href="/">猫云</a></li><li><a href="/">京东云</a></li><li><a href="">又拍云</a></li></ul></div></div></div></div><hr>
<!-- 底部最下面--><div class="row footer-button"><ul class="list-inline text-center"><li><a href="/">京ICP备11008151号-6</a></li><li>京公网安备11010802014853</li></ul></div></div></footer>
<!--回到顶部--><a id="scroll" class="ver" href=""><i class="fa">^</i></a></body>
</html>
day02
登录界面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Bootstrap登录界面</title><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"><style>.box {width: 500px;height: 500px;background-color: white;color: #333333;font-size: 14px;margin: 0 auto;}.la {width: 400px;height: 400px;margin: 30px auto;border: 1px solid #eeeeee;}.one {margin-top: 20px;margin-bottom: 20px;}.top {height: 350px;margin: 0 auto;}.one-d:before {content: "";position: absolute;text-align: center;margin-top: 25px;background-color: #999999;width: 5px;height: 5px;line-height: 0;border: 1px solid #999999;border-radius: 50%;}.one-t {margin-left: 20px;font-size: 20px;text-align: center;}.two {height: 80px;}.two>input {width: 330px;height: 40px;padding-left: 5px;margin-left: 15px;margin-bottom: 20px;}.three {height: 20px;margin-left: 20px;margin-top: 40px;font-size: 12px;color: #999999;}.four {width: 330px;height: 80px;margin-top: 10px;margin-left: 15px;}.four>input {background-color: #3f89ec;width: 330px;height: 40px;border: 1px solid #3f89ec;color: white;font-size: 20px;}.mm {color: dodgerblue;font-size: 12px;margin-top: 10px;}.ml {float: left;}.mr {float: right;}.footer {width: 400px;height: 60px;background-color: #f0f6ff;margin: 0 auto;border-left: 1px solid #eeeeee;border-right: 1px solid #eeeeee;border-bottom: 1px solid #eeeeee;border-top: 1px solid #f0f6ff;}.fo-l {width: 300px;height: 20px;margin: 15px auto;}.fo-l>a {color: dodgerblue;font-size: 16px;float: left;}.aaa {float: left;}.aa {float: left;}.aaa>a:before {padding: 0 5px;color: dodgerblue;content: "|";}.bot {font-size: 16px;margin-left: 110px;}</style></head>
<body><div class="box">
<!-- top--><div class="top"><div class="container la"><div class="one"><img src="img/baidu.JPG" height="50" width="120"/><span class="one-d"></span><span class="one-t">用户名密码登录</span></div><div class="two"><input type="text" placeholder="手机/邮箱/用户名"><input type="text" placeholder="密码"></div><div class="three"><lable><input type="checkbox"> 下次自动登录</lable></div><div class="four"><input type="submit" value="登录"><a class="mm ml"href="/?getpassindex&tt=1568180872913&gid=297107F-36D0-486B-9099-07E73237FA19&tpl=mn&u=https%3A%2F%2Fwww.baidu%2F">忘记密码？</a><a class="mm mr"href="/?getpassindex&tt=1568180872913&gid=297107F-36D0-486B-9099-07E73237FA19&tpl=mn&u=https%3A%2F%2Fwww.baidu%2F">短信快捷方式</a></div></div></div>
<!-- bottom--><div class="footer"><div class="fo-l"><a href="#">扫码登录</a><div class="aaa"><a href=".0/show?which=Login&display=pc&client_id=100312028&response_type=code&redirect_uri=https%3A%2F%2Fpassport.baidu%2Fphoenix%2Faccount%2Fafterauth%3Fmkey%3Dd827e4602e044b392067392e76e65ccc53d2a3ec918daf6f63&state=1568197807&display=page&scope=get_user_info%2Cadd_share%2Cget_other_info%2Cget_fanslist%2Cget_idollist%2Cadd_idol%2Cget_simple_userinfo&traceid="><img src="img/QQ.png" height="16" width="16"/></a></div><div class="aa"><a href="=2512457640&response_type=code&redirect_uri=https%3A%2F%2Fpassport.baidu%2Fphoenix%2Faccount%2Fafterauth%3Fmkey%3Dfcb7d33ba8774c6a8ac7e35562ed8e4c681053b306869eae93&forcelogin=1&state=1568197857&display=page&traceid="><img src="img/wei.png" height="20" width="20"/></a></div><a class="bot" href="">立即注册</a></div></div></div>
</body>
</html>
人员管理
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>人员管理界面</title><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"><script src="jQuery/jquery-3.4.1.min.js"></script><script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script><style>.top {background-color: #eeeeee;color: #777777;font-size: 16px;margin: 0 auto;padding: 0;height: 40px;}.sp-one {text-align: center;font-size: 20px;margin-left:15px;line-height: 1.8;float: left;}.txt {margin-left: 15px;text-align: center;line-height: 40px;}.ta {margin-top: 20px;}</style>
</head>
<body><div class="container"><div class="top"><span class="col-md-2 sp-one">一个学院管理界面</span><div class="col-md-1 dropdown"><button type="button" class="btn dropdown-toggle" data-toggle="dropdown"style="height: 40px;font-size: 16px">学员管理</button></div><div class="col-md-1 txt"><span>教师管理</span></div><!--下拉框--><div class="col-md-1 dropdown"><button type="button" class="btn dropdown-toggle" data-toggle="dropdown"style="height: 40px;font-size: 16px">其他管理<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="">其他1</a> </li><li><a href="">其他2</a></li><li><a href="">其他3</a></li><li class="divider"></li></ul></div></div>
<!-- 表格--><div class="ta"><table class="table table-bordered "><thead><th class="col-md-2">学号</th><th class="col-md-3">姓名</th><th class="col-md-2">班级</th><th class="col-md-3">学院</th><th class="col-md-2">管理</th></thead><tbody><tr><td>1</td><td>李子明</td><td>102</td><td>xx学院</td><td ><button type="button" class="btn dropdown-toggle" data-toggle="dropdwon" style="color:white;background-color: red">删除</button><button type="button" class="btn dropdown-toggle" data-toggle="dropdwon"style="color:black;background-color: white;border: 1px solid #777777">修改</button><button type="button" class="btn dropdown-toggle" data-toggle="dropdwon"style="color:white;background-color: blue">编辑</button></td></tr><tr><td>1</td><td>李子明</td><td>102</td><td>xx学院</td><td ><button type="button" class="btn dropdown-toggle" data-toggle="dropdwon" style="color:white;background-color: red">删除</button><button type="button" class="btn dropdown-toggle" data-toggle="dropdwon"style="color:black;background-color: white;border: 1px solid #777777">修改</button><button type="button" class="btn dropdown-toggle" data-toggle="dropdwon"style="color:white;background-color: blue">编辑</button></td></tr><tr><td>1</td><td>李子明</td><td>102</td><td>xx学院</td><td ><button type="button" class="btn dropdown-toggle" data-toggle="dropdwon" style="color:white;background-color: red">删除</button><button type="button" class="btn dropdown-toggle" data-toggle="dropdwon"style="color:black;background-color: white;border: 1px solid #777777">修改</button><button type="button" class="btn dropdown-toggle" data-toggle="dropdwon"style="color:white;background-color: blue">编辑</button></td></tr><tr><td>1</td><td>李子明</td><td>102</td><td>xx学院</td><td ><button type="button" class="btn dropdown-toggle" data-toggle="dropdwon" style="color:white;background-color: red">删除</button><button type="button" class="btn dropdown-toggle" data-toggle="dropdwon"style="color:black;background-color: white;border: 1px solid #777777">修改</button><button type="button" class="btn dropdown-toggle" data-toggle="dropdwon"style="color:white;background-color: blue">编辑</button></td></tr></tbody></table></div></div>
</body>
</html>
更多推荐
作业 week2 day01+day02
发布评论