请写一个带有websql的html文件,并且该文件包含style等修饰
时间: 2024-03-18 18:39:40 浏览: 56
好的,以下是一个带有websql的HTML文件示例,并且包含了样式和其他修饰:
```html
<!DOCTYPE html>
<html>
<head>
<title>Websql Demo</title>
<style>
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
background-color: #f5f5f5;
}
h1 {
font-size: 24px;
font-weight: bold;
margin: 0 0 20px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 0 0 10px;
padding: 10px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
</style>
<script>
// 打开数据库
var db = openDatabase('mydb', '1.0', 'My Database', 2 * 1024 * 1024);
// 创建表
db.transaction(function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS names (id unique, name)');
});
// 插入数据
db.transaction(function(tx) {
tx.executeSql('INSERT INTO names (id, name) VALUES (?, ?)', [1, 'Alice']);
tx.executeSql('INSERT INTO names (id, name) VALUES (?, ?)', [2, 'Bob']);
});
// 从数据库中获取数据并在HTML页面中显示
db.transaction(function(tx) {
tx.executeSql('SELECT * FROM names', [], function(tx, results) {
var len = results.rows.length;
for (var i = 0; i < len; i++) {
var id = results.rows.item(i).id;
var name = results.rows.item(i).name;
document.getElementById('names').innerHTML += '<li>' + id + ': ' + name + '</li>';
}
});
});
</script>
</head>
<body>
<h1>Names:</h1>
<ul id="names"></ul>
</body>
</html>
```
这个文件与之前的示例相似,但是增加了一些样式和其他修饰。在样式中,我们使用了一些简单的CSS规则来设置页面的字体、颜色、背景色和边框等样式。同时,在每个列表项中,我们还使用了box-shadow和border-radius属性来创建一个简单的阴影效果和圆角边框。
请注意,在使用websql时,一定要遵循相关的API文档,确保你的代码正确无误。同时,为了避免SQL注入等安全问题,请确保你对用户输入的数据进行了适当的过滤和转义处理。
阅读全文