![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
首页：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 可选的Bootstrap主题文件（一般不使用） -->
<script src="/dist/css/bootstrap-theme.min.css"></script>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="/dist/js/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/dist/js/main.js"></script>
<title>首页</title>
</head>
<style>
.body{margin:0;padding:0}
.fl{float:left}
.fr{float:right}
.top{height:90px;}
.top .top_title{font-size:40px;line-height:90px;}
.top .search{width:300px;height:90px;line-height:90px;margin-left:30px;}
.top .search input{float: unset;}
.top .login-reg{width:200px;height:90px;line-height:90px;}
.news_item{width:100%;height:100px;border-bottom:1px solid lightgrey;margin-bottom:10px;}
.news_item div{height:90px;line-height:90px;}
.news_item img{width:120px;}
</style>
<body>
<!-- 头部 -->
<div class="bg-primary top">
<div>
<span class="top_title fl">xxx的博客</span>
<div class="search fl">
<div>
<input type="text" placeholder="输入博客名称搜索">
<span>
<button class="btn btn-default" type="button">搜索</button>
</span>
</div>
</div>
<div class="login-reg fr">
<button class="btn btn-success" onclick="login()"> 登录 </button>
<button class="btn btn-warning"> 发布博客 </button>
</div>
</div>
</div>
<div>
<div>
<ul class="nav nav-pills nav-stacked">
<li role='presentation'><a href='#'>内容选项</a></li>
<br>
<?php
for ($i=0; $i < 11; $i++) {
echo "<li role='presentation'><a href='#'>Profile".$i."</a></li>";
}
?>
</ul>
</div>
<div>
<div class="col-sm-4 col-md-offset-8 border">
<ul class="nav nav-pills">
<li role="presentation"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
<hr><hr>
<?php
for ($i=0; $i < 8; $i++) {
?>
<div>
<div>
<img src="http://japan.people.com.cn/NMediaFile/2015/0107/MAIN201501070808000365751804505.jpg" alt="">
</div>
<div>
<div style="width:100%;height:60px;line-height:30px;overflow:hidden;">
<a href="">IdentityServer4实战 - 谈谈 JWT Token 的安全策略IdentityServer4实战 - 谈谈 JWT Token 的安全策实战<<<<</a>
</div>
<div style="width:100%;height:40px;line-height:40px;">
<span>30次浏览</span><span>2018-10-08 21:33:33</span>
</div>
</div>
<div class="col-md-2 col-md-offset-1">
<a href="">详细>></a>
</div>
</div>
<?php
}
?>
<div>
<nav aria-label="Page navigation">
<ul>
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">下一页</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<script>
function login(){
UI.alert({title:'提示标题',msg:'提示内容',icon:'error'})
// UI.open({title:'提示标题'})
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
var UI = {
alert:function(obj){
//属性有： title:标题，msg:提示内容,icon,显示图标
var title = (obj == undefined || obj.title == undefined) ? '系统消息' : obj.title;
var msg = (obj == undefined || obj.msg == undefined) ? '' : obj.msg;
var icon = (obj == undefined || obj.icon == undefined) ? 'warn' : obj.icon;
var html = this.get_html()
html = html.replace('{title}',title).replace('{msg}',msg).replace('{icon}',icon)
$('body').append(html)
$('#uiModal').modal({backdrop:'static'})
// $('#uiModal').modal('show');
$('#uiModal').on('hidden.bs.modal', function (e) {
this.remove()
})
},
get_html:function(){
var html = '<div class="modal fade" tabindex="-1" role="dialog" id="uiModal">\
<div class="modal-dialog" role="document">\
<div class="modal-content">\
<div class="modal-header">\
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>\
<h4 class="modal-title">{title}</h4>\
</div>\
<div class="modal-body">\
<p><img src="/dist/img/{icon}.png" style="margin-right:10px;" />{msg}</p>\
</div>\
<div class="modal-footer">\
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>\
<button type="button" class="btn btn-primary">确认</button>\
</div>\
</div>\
</div>\
</div>';
return html;
},
open:function(obj){
//属性有： title:标题，url:打开url,icon,显示图标，width：宽度,height:高度
var title = (obj == undefined || obj.title == undefined) ? '系统消息' : obj.title;
var url = (obj == undefined || obj.msg == undefined) ? 'http://www.bootcss.com' : obj.url;
var icon = (obj == undefined || obj.icon == undefined) ? 'warm' : obj.icon;
var width = (obj == undefined || obj.width == undefined) ? 500 : obj.width;
var height = (obj == undefined || obj.height == undefined) ? 400 : obj.height;
var html = this.get_win()
html = html.replace('{title}',title).replace('{url}',url).replace('{width}',width).replace('{height}',height)
$('body').append(html)
$('#uiModal').modal({backdrop:'static'})
// $('#uiModal').modal('show');
$('#uiModal').on('hidden.bs.modal', function (e) {
this.remove()
})
},
get_win:function(){
var html = '<div class="modal fade" tabindex="-1" role="dialog" id="uiModal">\
<div class="modal-dialog" role="document">\
<div class="modal-content" style="width:{width}px">\
<div class="modal-header">\
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>\
<h4 class="modal-title">{title}</h4>\
</div>\
<div class="modal-body" style="height:{height}px">\
<iframe style="width:100%;height:100%" frameborder="0" scrolling="auto" src="{url}"></iframe>\
</div>\
<div class="modal-footer">\
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>\
<button type="button" class="btn btn-primary">确认</button>\
</div>\
</div>\
</div>\
</div>';
return html;
}
}点击 "运行实例" 按钮查看在线实例
