自动生成的静态代码示例
zhezhongyun 2025-05-25 16:47 3 浏览
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>
无标题文档
</title>
<link href="jscss/bootstrap.min.css" rel="stylesheet">
<link href="jscss/jquery.contextMenu.min.css" rel="stylesheet">
<link href="jscss/font-awesome.min.css" rel="stylesheet">
<link href="jscss/animate.min.css" rel="stylesheet">
<link href="jscss/style.min.css" rel="stylesheet">
<link href="jscss/skins.css" rel="stylesheet">
<link href="jscss/ry-ui.css" rel="stylesheet">
<link href="jscss/extend.css" rel="stylesheet">
<link href="jscss/layui.css" rel="stylesheet">
<link href="jscss/global.css" rel="stylesheet">
<link href="jscss/styleCard.css" rel="stylesheet">
<link rel="stylesheet" href="jscss//css/layui.css">
<style>
body{padding: 16px;}
</style>
<script src="jscss/jquery.min.js"></script>
<script src="jscss/bootstrap.min.js"></script>
<style type="text/css">
<style type="text/css">
<!-- .STYLE0{ font-family: "宋体"; font-size: 8pt; color: #000000; } --></style>
</head>
<body>
<div>
<form class="layui-form" method="get" lay-filter="top" id="AAA">
<div class="row">
<div class="col-xl-3 col-sm-6 col-12">
<div class="card flex-fill fb sm-box">
<i class="fab fa-facebook"></i>
<h6>
50,095
</h6>
<p>
Likes
</p>
</div>
</div>
<div class="col-xl-3 col-sm-6 col-12">
<div class="card flex-fill twitter sm-box">
<i class="fab fa-twitter"></i>
<h6>
48,596
</h6>
<p>
Follows
</p>
</div>
</div>
<div class="col-xl-3 col-sm-6 col-12">
<div class="card flex-fill insta sm-box">
<i class="fab fa-instagram"></i>
<h6>
52,085
</h6>
<p>
Follows
</p>
</div>
</div>
<div class="col-xl-3 col-sm-6 col-12">
<div class="card flex-fill linkedin sm-box">
<i class="fab fa-linkedin-in"></i>
<h6>
69,050
</h6>
<p>
Follows
</p>
</div>
</div>
</div>
<!-- 使用 layui-container 作为主要容器 -->
<div class="layui-container">
<!-- 创建一行 -->
<div class="layui-row">
<div class="layui-col-md6">
<div id="lineChart" style="width:100%; height: 400px;"></div>
</div>
<div class="layui-col-md6">
<div id="barChart" style="width:100%; height: 400px;"></div>
</div>
</div>
<!-- 创建一行 -->
<div class="layui-row">
<div class="layui-col-md6">
<div id="stripChart" style="width:100%; height: 400px;"></div>
</div>
<div class="layui-col-md6">
<div id="pieChart" style="width:100%; height: 400px;"></div>
</div>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="jscss/layui.js"></script>
<script type="text/javascript" src="jscss/echarts.min.js"></script>
<script>
layui.use(["form", "util", "laydate", "rate", "slider"],
function() {
var $ = layui.$;
var form = layui.form;
var layer = layui.layer;
var util = layui.util;
var laydate = layui.laydate;
//日期
laydate.render({
elem: "#date"
});
var lineChartDom = document.getElementById('lineChart');
var lineChart = echarts.init(lineChartDom);
var option;
option = {
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
name: 'Email',
type: 'line',
smooth: true,
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
smooth: true,
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
smooth: true,
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
smooth: true,
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
smooth: true,
data: [820, 932, 901, 934, 1290, 1330, 1320]
}]
};
option && lineChart.setOption(option);
var barChartDom = document.getElementById('barChart');
var barChart = echarts.init(barChartDom);
var option;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
option && barChart.setOption(option);
// 基于准备好的dom，初始化echarts实例
var stripChartDom = document.getElementById('stripChart');
var stripChart = echarts.init(stripChartDom);
// 指定图表的配置项和数据
var option = {
yAxis: {
type: 'category',
data: ['苹果', '香蕉', '橙子', '葡萄', '草莓']
},
xAxis: {
type: 'value'
},
series: [{
data: [5, 20, 36, 10, 10],
type: 'bar'
}]
};
// 使用刚指定的配置项和数据显示图表。
option && stripChart.setOption(option);
var pieChartDom = document.getElementById('pieChart');
var pieChart = echarts.init(pieChartDom);
var option;
option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [{
value: 1048,
name: 'Search Engine'
},
{
value: 735,
name: 'Direct'
},
{
value: 580,
name: 'Email'
},
{
value: 484,
name: 'Union Ads'
},
{
value: 300,
name: 'Video Ads'
}],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
option && pieChart.setOption(option);
});
</script>
</body>
</html>
- 上一篇：如何用代码快速制作营销网站底部广告?
- 下一篇：带你看好玩的CSS-霓虹灯按钮
相关推荐
- 带你看好玩的CSS-霓虹灯按钮
-
对于前端开发人员来说，css是我们再熟悉不过的朋友的，它就相当于是我们页面的衣服，页面好不好看，就看我们css运用的是否炉火纯青。css学起来简单，但是我们要把它“修炼”到出神入化境界，那这可不是一丁...
- 自动生成的静态代码示例
-
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/...
- 如何用代码快速制作营销网站底部广告?
-
当前在很多的旅游网站，底部固定广告已经成为一种常见的形式，可以参看下图。以途牛为例，下边我们一起来说一下整个制作流程显然底部是固定定位的盒子，并且是分为两组，一组为显示状态下，一组为隐藏状态下，并且通...
- CSS中清除浮动的几种方法，快来学习一下吧
-
前言首先我们通过一张图来解释下元素浮动是什么样的状态。元素浮动情况上图的html部分代码为：html代码css部分代码为：css代码通过上面的图片可以看出，当内部的div设置float后，外部的元素的...
- css reset 标签属性默认值
-
在现在的网站设计中使用reset.css用重置整个站点的标签的CSS属性的做法很常见，但有时候我们已经为了reset而reset，我们经常看到这样的reset代码其实大部分CSSreset是没必要...
- CSS实现溢出显示省略号
-
小伙伴们，对于省略号呢，咱们前端攻城狮的实现方法可就是多种多样了，那接下来呢我就给你罗列一下如果用css书写这些特殊效果，来一起看看吧~~~1.单行文本超出显示省略号效果图：实现代码:HTML部分&l...
- CSS 基础大揭秘:打造酷炫网页的魔法钥匙
-
在当今这个数字化时代，网页已经成为我们生活中不可或缺的一部分。无论是购物、学习还是娱乐，我们每天都会与各种各样的网页打交道。而你是否曾好奇，那些设计精美的网页是如何实现的呢？今天，我们就来揭开网页设计...
- 治愈焦虑!清晨两道 CSS 面试题，轻松开启元气学习日
-
晨光透过窗户洒在键盘上，又是充满希望的一天。前端的小伙伴们，在忙碌的工作和面试压力下，不妨趁着清晨和上午这段宁静时光，静下心来，和我一起解锁CSS的奇妙世界。今天咱们就用两道高频面试题，开启元气满...
- 浅谈position中absolute和relative
-
CSSposition属性中absolute和relative很容易让人弄混，基本的概念什么着，你去参考W3C，就不啰嗦了--------------------------------------...
- Highcharts基础教程(二):图表配置
-
一、图表容器Highcharts实例化中绑定容器的方式有两种：1.通过dom调用highcharts函数的方式$("#container").highcharts({//...
- CSS之垂直导航条
-
今天的内容比较简单，我们来学习一种常见的垂直导航条的实现方法，首先看一下效果图：1.首先我们创建一个有效的列表<li><ahref="http://www.？？？.com">...
- Inkscape 1.4 新功能介绍
-
各位Inkscape爱好者们，备受期待的Inkscape1.4版本已经正式发布，现在就可以从Inkscape官网下载体验了！这次更新带来了许多强大的新功能和改进，旨在提升你的矢量图形编辑...
- 前端内功修炼:5大主流布局系统进阶
-
获课：keyouit.xyz/14642/前端布局进阶：从盒模型到弹性布局，深入解析5大主流布局系统核心原理前端布局是构建用户界面的基石，理解不同布局系统的底层逻辑和适用场景对于开发高效、可维护的...
- MVP最小可用产品实践:用Pywebio库写一个接口加解密的小工具
-
背景最近在接口测试的过程中，由于请求报文需要先进行加密再发起请求，响应报文也需要先解密才能提取指定字段的返回值传递给下一个接口，每次都要通过代码运行相应的加/解密方法进行解析，操作起来特别麻烦，所以我...
- 网易的互动版涂小瓶子爆火，究竟是如何做到的?
-
https://mp.weixin.qq.com/s/5vmXPBWcJZ_oZ4p1znNNLw附上爆火图文链接，复制打开即可查看其实最开始看见的时候没想到这个小小的瓶子会这么火，现在的SVG交互图...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- HTML 参考手册 (28)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)