html5&css&js代码 009 我的网址簿
在HTML和CSS中，创建一个简单的网址簿界面通常包括一个表单和一组链接列表。以下是一个基本的实现示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Clip</title>
<style>
body { font-family: Arial, sans-serif; }
.link-list { list-style-type: none; padding: 0; }
.link-list li a { text-decoration: none; color: #000; display: block; padding: 5px; }
.link-list li a:hover { background-color: #f0f0f0; }
form { margin-top: 20px; }
input[type="text"] { width: 100%; padding: 10px; margin-bottom: 10px; }
input[type="submit"] { width: 100%; padding: 10px; background-color: #5cb85c; color: white; border: none; }
input[type="submit"]:hover { background-color: #449d44; }
</style>
</head>
<body>
<h1>My Web Clip</h1>
<ul class="link-list">
<li><a href="https://www.example1.com" target="_blank">Example 1</a></li>
<li><a href="https://www.example2.com" target="_blank">Example 2</a></li>
<!-- Add more links as needed -->
</ul>
<form action="/submit-url" method="post">
<label for="url">Add a URL:</label>
<input type="text" id="url" name="url" required>
<input type="submit" value="Add">
</form>
<!-- JavaScript to add a new link to the list -->
<script>
document.getElementById('urlform').onsubmit = function(event) {
event.preventDefault(); // Prevent form from submitting
var url = document.getElementById('url').value;
var newItem = document.createElement('li');
newItem.innerHTML = '<a href="' + url + '" target="_blank">' + url + '</a>';
document.querySelector('.link-list').appendChild(newItem);
};
</script>
</body>
</html>在这个示例中，我们有一个网址簿的简单界面，包括一个链接列表和一个表单，用户可以输入新的网址并提交。提交后，JavaScript 代码会捕获这个事件，阻止表单的默认提交行为，并添加一个新的列表项到链接列表中。这个例子假设了提交的 URL 是有效的，并且存在一个服务端脚本 /submit-url 来处理表单数据。在实际应用中，你需要根据你的服务端逻辑来修改这部分代码。
评论已关闭