html实现美观有简约的个人主页

最新推荐文章于 2025-07-11 16:09:08 发布

原创

最新推荐文章于 2025-07-11 16:09:08 发布 · 2.3k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#html

本文分享了一款使用HTML编写的美观且实用的个人主页代码模板，适合想要打造个性化网站的读者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

哈喽，大家好，我们又见面了

下面是小编带给大家的既好看又实用的网站（html）代码模板，大家看看吧！

<html>
<head>
    <meta name="code-stutio" content="code-123" />
    </head>
        <meta charset="utf-8">
<title>My...</title>
<style>
.a {
  background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
.b {
  overflow: hidden;
  color:#f2f2f2;
  background-color: rgb(72,72,72);
}
 

.b a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 

.b a:hover {
  background-color: #ddd;
  color: black;
}

  
  
.f {
  overflow: hidden;
  color:#f2f2f2;
  background-color: gray;
  height:740px;
  text-align:center;
    width:188px;
    float:right;
}
 

.f a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 10px 70px;
  text-decoration: none;
}
 

.f a:hover {
  background-color: #ddd;
  color: black;
}

.c {
    line-height:30px;
    background-color:gray;
    color:white;
    height:700px;
    width:104px;
    float:left;
    padding:20px;          
}
.d {
    width:350px;
    float:left;
    padding:10px;          
}
.e {
    background-color:rgb(40,40,40);
    color:rgb(200,200,200);
    clear:both;
    text-align:center;
   padding:1px;          
}
.e a {
  color: rgb(200,200,200);
  padding: 0px 0px;
  text-decoration: none;
}
.e a:hover {
  color: rgb(250,250,250);
}

</style></head>

<body>


<div class="a">
<div id="box" style="opacity: 0.01;"> <h1>Vcode的个人主页</h1></div>
        <script>
            var i = 1;
            var flag = true;
            function fade() {
                var box = document.getElementById('box');
                if (document.all) {
                    b