<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>精美设计的网页</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
background-color: #f4f4f9;
color: #333;
}
table {
margin-top: 20px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
h1 {
animation: fadeIn 2s ease-in-out;
}
img {
transition: transform 0.5s ease;
height: 200px;
width: 200px;
}
img:hover {
transform: scale(1.05);
}
</style>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个精心设计的页面,包括动态元素、图片和表格。</p>
<img src="tupian.jpg" alt="示例图片">
<table>
<tr>
<th>编号</th>
<th>名称</th>
<th>描述</th>
</tr>
<tr>
<td>1</td>
<td>项目一</td>
<td>这是第一个项目的描述。</td>
</tr>
<tr>
<td>2</td>
<td>项目二</td>
<td>这是第二个项目的描述。</td>
</tr>
</table>
<button οnclick="showMoreInfo()">显示更多信息</button>
<p id="extraInfo" style="display: none;">这里是更多的信息,包括详细的项目描述。</p>
<script>
function showMoreInfo() {
var info = document.getElementById("extraInfo");
if (info.style.display === "none") {
info.style.display = "block";
} else {
info.style.display = "none";
}
}
</script>
</body>
</html>
————————————————
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/weixin_73920238/article/details/138520255
01-25
822
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
03-11
2046
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)