用 html ,css,js 编写一个炫酷的网页,个人主页方面的
时间: 2023-03-05 12:55:55 浏览: 180
好的,我可以为你提供一些HTML、CSS和JS的代码示例,以帮助你编写一个炫酷的个人主页。
首先,让我们创建一个基本的HTML页面结构,包含一个标题和一个空的body标签。代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Personal Website</title>
</head>
<body>
</body>
</html>
```
接下来,我们可以添加一个顶部导航栏,使用CSS来为导航栏添加样式,使其看起来更加炫酷。代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Personal Website</title>
<style>
/* Style the navigation bar */
.navbar {
background-color: black;
overflow: hidden;
}
/* Style the links in the navigation bar */
.navbar a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<!-- Navigation Bar -->
<div class="navbar">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</body>
</html>
```
现在,我们可以在主页上添加一些内容,例如一张照片和一些介绍。我们还可以使用CSS样式来使这些内容看起来更加漂亮。代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Personal Website</title>
<style>
/* Style the navigation bar */
.navbar {
background-color: black;
overflow: hidden;
}
/* Style the links in the navigation bar */
.navbar a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Style the header section */
header {
background-color: #f2f2f2;
padding: 50px;
text-align: center;
}
/* Style the profile image */
img {
border-radius: 50%;
}
/* Style the introduction section */
.intro {
background-color: #f2f2f2;
padding: 50px;
text-align: center;
}
</style>
</head>
<body>
<!-- Navigation Bar -->
<div class="navbar">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
<!-- Header section -->
<header>
<img src="my-profile-image.jpg" alt="My Profile Image" width="200" height="200">
<h1>Hi, I'm John Doe</h1>
</header>
<!-- Introduction section -->
<div class="intro">
<p
阅读全文