登陆
以下是一个简单网站的源码示例，包括 HTML、CSS 和 JavaScript：
HTML 代码：
```
我是一名 Web 开发者，热爱编程和设计。
版权所有 © 2021 我的网站
```
CSS 代码：
```
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
color: #333;
background-color: #f5f5f5;
}
header {
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
h1, h2 {
margin: 0;
font-weight: normal;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin: 0 10px;
}
nav a {
color: #333;
text-decoration: none;
transition: color 0.2s;
}
nav a:hover {
color: #007bff;
}
main {
margin-top: 100px;
padding: 20px;
}
section {
margin-bottom: 40px;
}
form label {
display: block;
margin-bottom: 10px;
}
form input, form textarea {
padding: 5px;
border-radius: 3px;
border: 1px solid #ccc;
width: 100%;
margin-bottom: 20px;
}
form button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
form button:hover {
background-color: #0062cc;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
margin-top: 40px;
}
```
JavaScript 代码：
```
// 在页面加载完毕后执行
window.onload = function() {
// 把所有链接的默认行为改成滚动到指定位置
var links = document.querySelectorAll('a[href^="#"]');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', function(e) {
e.preventDefault();
var target = document.querySelector(this.getAttribute('href'));
target.scrollIntoView({ behavior: 'smooth' });
});
}
};
```
这个网站包括一个固定在页面顶部的导航栏，三个部分分别介绍了网站的拥有者、其提供的服务和联系方式，以及一个简单的表单用于发送消息。导航栏链接使用了 JavaScript 代码实现平滑滚动到对应部分。CSS 代码使用了一些常用的样式来让页面看起来更漂亮。