发表于： 2021-03-31 23:02:57
1 927
今天完成的事情：
做任务6
ps切图
完成了Welcome页面, 后台页。article列表页，article详情页的html完成，css暂未设置
学习折叠菜单栏（Bootstrap 折叠）
引入文件
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
制作折叠样式
<div class="g">
<div class="an1"></div>
<button type="button" data-toggle="collapse" data-target="#demo" class="a">
article管理
</button>
<div class="an2"></div>
</div>
<div id="demo">article列表</div>
制作表格
<table border="1" id="tab">
<tr>
<td>id</td>
<td>名称</td>
<td>类型</td>
<td>发布时间</td>
<td>修改时间</td>
<td>发布者</td>
<td>状态</td>
<td>操作</td>
</tr>
<tr>
<td>..../td>
<td>..../td>
<td>..../td>
<td>..../td>
</tr>
修改表格样式去除多余的
#tab tr td {
width: 100px;
border: 1px solid green;
border-bottom-width: thin;
border-right-style: none;
border-left-style: none;
border-top-style: none;
}
点击事件添加页面：
点击article列表时使 welcome! 页面变为新页面
var demo = document.getElementById('demo');
var page = document.getElementById('page');
demo.onclick = function () {
newPage();
}
function newPage() {
$('#page').append(function () {
return `
<div class="newpage">
<div class="div1">发布时间</div>
<div class="div2">状态</div>
<div class="div3">类型</div>
</div>`;
});
}
问题：
进入网页时，由Bootstrap完成的article列表样式会自动打开。
js操作部分遗忘。
明天的计划：
返回列表
评论