登陆
这篇文章将向您展示一个完整的网站源代码样本，用于说明如何编写和组织一个简单但功能齐全的网站。这个网站是基于HTML、CSS和JavaScript技术构建的，可以在现代Web浏览器中运行。
HTML文件：
This is my website. It's very cool.
I'm a web developer living in the beautiful city of San Francisco.
© 2021 My Website
CSS文件：
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
color: #fff;
display: block;
padding: 0.5rem 1rem;
text-decoration: none;
}
section {
padding: 2rem;
}
h2 {
margin-top: 0;
}
label {
display: block;
margin-bottom: 0.5rem;
}
input, textarea {
border: 2px solid #ccc;
border-radius: 4px;
display: block;
font-size: 1rem;
margin-bottom: 1rem;
padding: 0.5rem;
width: 100%;
}
button[type="submit"] {
background-color: #333;
border: none;
color: #fff;
padding: 0.5rem 1rem;
}
button[type="submit"]:hover {
background-color: #555;
}
footer {
background-color: #333;
color: #fff;
padding: 1rem;
}
JavaScript文件：
// Add smooth scrolling to all links
$('a').on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});