用HTML,css,js写一个好看的网页
时间: 2024-02-19 18:02:37 浏览: 19
好看的网页通常需要HTML,CSS和JavaScript的配合。下面是一个简单的示例网页,包含了HTML,CSS和JavaScript:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Cool Website</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
#header {
background-color: #333;
color: white;
padding: 20px;
}
#header h1 {
margin: 0;
}
#nav {
background-color: #666;
color: white;
padding: 10px;
text-align: center;
}
#nav a {
color: white;
text-decoration: none;
padding: 10px;
}
#nav a:hover {
background-color: #999;
}
#content {
padding: 20px;
}
#footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id="header">
<h1>My Cool Website</h1>
</div>
<div id="nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<div id="content">
<h2>Welcome to my website!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id metus ac arcu congue laoreet. Ut in orci quis lorem sagittis euismod et eu lectus. Nam id magna vel leo vulputate malesuada. Sed vitae mi a velit interdum venenatis. Vivamus commodo ante vel nulla sagittis, in tincidunt erat interdum. Sed sit amet bibendum purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed faucibus, elit sed ultricies feugiat, leo purus rhoncus velit, sit amet fringilla risus mauris vel elit.</p>
</div>
<div id="footer">
<p>© 2021 My Cool Website</p>
</div>
<script>
alert("Welcome to my website!");
</script>
</body>
</html>
```
上面的代码定义了一个简单的网页,包含了一个顶部标题,一个导航栏,页面内容和一个底部版权信息。CSS样式定义了页面的颜色,字体和布局。JavaScript代码在页面加载时弹出一个欢迎对话框。
你可以将上面的代码复制并粘贴到一个HTML文件中,然后在浏览器中打开该文件,即可看到一个好看的网页。你可以通过修改CSS样式和JavaScript代码来定制自己的网页。