生成一个文房四宝的JS代码
时间: 2024-05-13 17:19:17 浏览: 20
以下是一个简单的生成文房四宝的JS代码:
```javascript
var brush = "毛笔";
var ink = "墨汁";
var paper = "宣纸";
var inkstone = "砚台";
console.log("文房四宝包括:" + brush + "、" + ink + "、" + paper + "和" + inkstone + "。");
```
这段代码定义了四个变量,分别代表文房四宝中的毛笔、墨汁、宣纸和砚台。然后使用字符串拼接的方式输出了文房四宝的名字。你可以在浏览器控制台中运行这段代码查看输出结果。
相关问题
生成一个文房四宝的CSS代码
以下是一个简单的文房四宝的CSS代码,可以根据需要进行修改和美化:
```css
/* 纸张 */
.paper {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
width: 300px;
height: 400px;
padding: 20px;
margin: 20px;
}
/* 毛笔 */
.brush {
background-color: #000;
border-radius: 50%;
width: 20px;
height: 80px;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
/* 墨水 */
.ink {
background-color: #000;
opacity: 0.5;
width: 50px;
height: 50px;
position: absolute;
top: 80px;
left: 50%;
transform: translateX(-50%);
}
/* 砚台 */
.ink-stone {
background-color: #333;
border: 1px solid #ccc;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
width: 120px;
height: 80px;
position: absolute;
top: 130px;
left: 50%;
transform: translateX(-50%);
}
/* 水 */
.water {
background-color: #fff;
opacity: 0.5;
width: 100px;
height: 50px;
position: absolute;
top: 210px;
left: 50%;
transform: translateX(-50%);
}
```
这段代码实现了一个基本的文房四宝的效果,包括纸张、毛笔、墨水、砚台和水。你可以根据自己的需要对其进行修改和美化。
生成一个文房四宝html
好的,以下是一个简单的文房四宝的HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>文房四宝</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
font-size: 36px;
}
table {
margin: auto;
border-collapse: collapse;
width: 80%;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
th {
background-color: #ccc;
}
</style>
</head>
<body>
<h1>文房四宝</h1>
<table>
<thead>
<tr>
<th>名称</th>
<th>介绍</th>
<th>图片</th>
</tr>
</thead>
<tbody>
<tr>
<td>笔</td>
<td>用于书写、绘画</td>
<td><img src="https://cdn.pixabay.com/photo/2016/03/31/20/51/brush-1296843_960_720.png" width="100"></td>
</tr>
<tr>
<td>墨</td>
<td>用于书写、绘画</td>
<td><img src="https://cdn.pixabay.com/photo/2018/03/04/08/09/ink-3190197_960_720.jpg" width="100"></td>
</tr>
<tr>
<td>纸</td>
<td>用于书写、绘画</td>
<td><img src="https://cdn.pixabay.com/photo/2016/03/31/19/58/paper-1296802_960_720.png" width="100"></td>
</tr>
<tr>
<td>砚</td>
<td>用于磨墨、调色</td>
<td><img src="https://cdn.pixabay.com/photo/2017/07/29/10/49/ink-stone-2552294_960_720.jpg" width="100"></td>
</tr>
</tbody>
</table>
</body>
</html>
```
效果如下:
![文房四宝](https://i.imgur.com/d4o2sZw.png)
相关推荐
![pptx](https://img-home.csdnimg.cn/images/20210720083543.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)