帮我写一个星空的html,携带超链接
时间: 2023-08-28 16:35:43 浏览: 39
好的,下面是一个简单的星空html页面,包含一个超链接:
```html
<!DOCTYPE html>
<html>
<head>
<title>星空</title>
</head>
<body>
<h1>星空</h1>
<p>这是一个美丽的星空。</p>
<img src="https://images.unsplash.com/photo-1521747116042-5a810fda9662?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8c3RhaXJzfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80" alt="星空" width="500">
<p>想要了解更多关于星空的知识,请点击<a href="https://zh.wikipedia.org/wiki/%E6%98%9F%E5%A4%A9">这里</a>。</p>
</body>
</html>
```
在这个页面中,我们使用了`<h1>`标签来显示标题,`<p>`标签来显示段落,`<img>`标签来显示图片,`<a>`标签来创建超链接。你可以根据需要修改其中的文本和图片链接,以及超链接的目标地址。
相关问题
帮我写一个html星空页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Star Sky</title>
<style>
body {
background-color: #000;
overflow: hidden;
}
.star {
position: absolute;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 2px #fff;
}
#star1 {
width: 10px;
height: 10px;
top: 100px;
left: 150px;
}
#star2 {
width: 15px;
height: 15px;
top: 200px;
left: 300px;
}
#star3 {
width: 20px;
height: 20px;
top: 50px;
left: 500px;
}
#star4 {
width: 25px;
height: 25px;
top: 300px;
left: 700px;
}
#star5 {
width: 30px;
height: 30px;
top: 150px;
left: 900px;
}
#star6 {
width: 35px;
height: 35px;
top: 250px;
left: 1100px;
}
#star7 {
width: 40px;
height: 40px;
top: 50px;
left: 1300px;
}
#star8 {
width: 45px;
height: 45px;
top: 350px;
left: 1500px;
}
#star9 {
width: 50px;
height: 50px;
top: 200px;
left: 1700px;
}
#star10 {
width: 55px;
height: 55px;
top: 100px;
left: 1900px;
}
</style>
</head>
<body>
<div class="star" id="star1"></div>
<div class="star" id="star2"></div>
<div class="star" id="star3"></div>
<div class="star" id="star4"></div>
<div class="star" id="star5"></div>
<div class="star" id="star6"></div>
<div class="star" id="star7"></div>
<div class="star" id="star8"></div>
<div class="star" id="star9"></div>
<div class="star" id="star10"></div>
</body>
</html>
帮我写一个炫丽多彩的html星空页面
<!DOCTYPE html>
<html>
<head>
<title>炫丽多彩的星空</title>
<style>
body {
background-color: black;
}
.star {
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background-color: white;
animation: sparkle 1s infinite;
z-index: -1;
}
#star1 {
top: 10%;
left: 50%;
animation-delay: 0.1s;
}
#star2 {
top: 20%;
left: 70%;
animation-delay: 0.2s;
}
#star3 {
top: 30%;
left: 30%;
animation-delay: 0.3s;
}
#star4 {
top: 40%;
left: 80%;
animation-delay: 0.4s;
}
#star5 {
top: 50%;
left: 10%;
animation-delay: 0.5s;
}
#star6 {
top: 60%;
left: 90%;
animation-delay: 0.6s;
}
#star7 {
top: 70%;
left: 20%;
animation-delay: 0.7s;
}
#star8 {
top: 80%;
left: 60%;
animation-delay: 0.8s;
}
#star9 {
top: 90%;
left: 40%;
animation-delay: 0.9s;
}
@keyframes sparkle {
0% {
opacity: 0;
}
50% {
opacity: 1;
transform: scale(1.5);
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div id="star1" class="star"></div>
<div id="star2" class="star"></div>
<div id="star3" class="star"></div>
<div id="star4" class="star"></div>
<div id="star5" class="star"></div>
<div id="star6" class="star"></div>
<div id="star7" class="star"></div>
<div id="star8" class="star"></div>
<div id="star9" class="star"></div>
</body>
</html>