<!DOCTYPE html> <html> <head> <title>我的网页</title> <meta charset="UTF-8"> <style> /* CSS 样式表 */ body { margin: 0; background-color: #f2f2f2; font-family: Arial, sans-serif; } header { background-color: #333; color: white; padding: 20px; text-align: center; font-size: 24px; } nav { background-color: #f1f1f1; text-align: center; padding: 10px; margin-bottom: 20px; } nav a { display: inline-block; color: #333; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 18px; font-weight: bold; } nav a:hover { background-color: #ddd; color: black; } section { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 20px; } section img { max-width: 100%; height: auto; margin: 10px; box-shadow: 0 0 5px #ccc; } section p { font-size: 18px; line-height: 1.5; text-align: center; margin: 10px; } /* JavaScript */ section img:hover { transform: scale(1.1); box-shadow: 0 0 10px #ccc; } /* jQuery */ $(document).ready(function(){ $("nav a").click(function(){ $(this).addClass("active").siblings().removeClass("active"); }); }); </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> /* JavaScript */ function showMsg() { alert("欢迎来到我的网页!"); } </script> </head> <body> <header> <h1>欢迎来到我的网页</h1> </header> <nav> <a href="#" class="active">首页</a> <a href="#">关于我们</a> <a href="#">联系我们</a> </nav> <section> <img src="https://picsum.photos/200/300" alt="图片1"> <p>这是一张美丽的图片</p> <img src="https://picsum.photos/200/300" alt="图片2"> <p>这是另一张美丽的图片</p> <img src="https://picsum.photos/200/300" alt="图片3"> <p>这是第三张美丽的图片</p> </section> <footer> <p>2021我的网页</p> </footer> <script> /* JavaScript */ showMsg(); </script> </body> </html>
时间: 2024-03-22 10:39:14 浏览: 101
html我的网页
这是一个简单的 HTML 页面,但是其中包含了 CSS 样式表和 JavaScript。
为了更好的可读性,我把代码进行了排版和注释:
```
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<meta charset="UTF-8">
<style>
/* CSS 样式表 */
body {
margin: 0;
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
font-size: 24px;
}
nav {
background-color: #f1f1f1;
text-align: center;
padding: 10px;
margin-bottom: 20px;
}
nav a {
display: inline-block;
color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
font-weight: bold;
}
nav a:hover {
background-color: #ddd;
color: black;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 20px;
}
section img {
max-width: 100%;
height: auto;
margin: 10px;
box-shadow: 0 0 5px #ccc;
}
section p {
font-size: 18px;
line-height: 1.5;
text-align: center;
margin: 10px;
}
/* JavaScript */
section img:hover {
transform: scale(1.1);
box-shadow: 0 0 10px #ccc;
}
/* jQuery */
$(document).ready(function(){
$("nav a").click(function(){
$(this).addClass("active").siblings().removeClass("active");
});
});
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
/* JavaScript */
function showMsg() {
alert("欢迎来到我的网页!");
}
</script>
</head>
<body>
<header>
<h1>欢迎来到我的网页</h1>
</header>
<nav>
<a href="#" class="active">首页</a>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
</nav>
<section>
<img src="https://picsum.photos/200/300" alt="图片1">
<p>这是一张美丽的图片</p>
<img src="https://picsum.photos/200/300" alt="图片2">
<p>这是另一张美丽的图片</p>
<img src="https://picsum.photos/200/300" alt="图片3">
<p>这是第三张美丽的图片</p>
</section>
<footer>
<p>2021我的网页</p>
</footer>
<script>
/* JavaScript */
showMsg();
</script>
</body>
</html>
```
其中,`<style>` 标签中定义了 CSS 样式,`<script>` 标签中定义了 JavaScript 代码,`$()` 则是 jQuery 的语法,用于处理 DOM 元素的操作。
阅读全文