<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>bulletin_board</title>
<link rel="stylesheet" href="./bootstrap.min.css">
<script src="./jquery.min.js"></script>
<script src="./bootstrap.min.js"></script>
<style>
.test1{
width: 400px;
margin: 100px auto;
position: absolute;
top: -100px;
left: 0px;
}
.test2{
position: absolute;
top: 280px;
text-align: center;
}
.test2 li{
width: 30px;
height: 5px;
border: 1px solid transparent;
background-color: #717171;
border-radius: 2px;
}
.test2 .active{
width: 30px;
height: 5px;
border: 1px solid transparent;
background-color:#fff;
border-radius: 2px;
}
body{
background-color: white;
}
</style>
</head>
<body>
<div id="carousel-of-product" class="carousel slide test1" data-ride="carousel" data-interval=3000>
<!--轮播指标-->
<ol class="carousel-indicators test2">
<li data-target="#carousel-of-product" data-slide-to="0" class="active"></li>
<li data-target="#carousel-of-product" data-slide-to="1" ></li>
<li data-target="#carousel-of-product" data-slide-to="2" ></li>
<li data-target="#carousel-of-product" data-slide-to="3" ></li>
<li data-target="#carousel-of-product" data-slide-to="4" ></li>
</ol>
<!--轮播项目-->
<div class="carousel-inner test1" role="listbox">
<div class="item active">
<iframe src="./05.html" width="400" height="300" frameborder="0" scrolling="no" seamless></iframe>
</div>
<div class="item">
<iframe src="./05.html" width="400" height="300" frameborder="0" scrolling="no" seamless></iframe>
</div>
<div class="item">
<iframe src="./05.html" width="400" height="300" frameborder="0" scrolling="no" seamless></iframe>
</div>
<div class="item">
<iframe src="./05.html" width="400" height="300" frameborder="0" scrolling="no" seamless></iframe>
</div>
<div class="item">
<iframe src="./05.html" width="400" height="300" frameborder="0" scrolling="no" seamless></iframe>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>往年贡献度</title>
<script src="https://cdn.staticfile.org/Chart.js/3.9.1/chart.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="280"></canvas>
<script>
const ctx = document.getElementById('myChart');
const data = {
labels: [
'一月份',
'二月份',
'三月份'
],
datasets: [{
type: 'bar',
label: '柱形图数据集',
data: [45, 49,52],
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.2)'
}, {
type: 'line',
label: '折线图数据集',
data: [50, 40, 45],
fill: false,
borderColor: 'rgb(54, 162, 235)'
}]
};
const config = {
type: 'scatter',
data: data,
options: {
responsive: false, // 设置图表为响应式，根据屏幕窗口变化而变化
maintainAspectRatio: false,// 保持图表原有比例
scales: {
y: {
beginAtZero: true
}
}
}
};
const myChart = new Chart(ctx, config);
</script>
</body>
</html>
- 将轮播图和混合图上传到github page，使用iframe标签查看，不能在博客园后台页首HTML代码中使用，可以在博客园后台分类列表的描述中使用
<iframe src="https://dogleftover.github.io/blog-beautify/extend/bulletin_board.html" width="400" height="300" frameborder="0" scrolling="no" seamless></iframe>
