一个好看的用html写的个人简介

网页 html

发布时间 : 2024-01-30 16:28

字数:1.1k 阅读 :

使用
把它放进hexo里面
demo预览

今天想帮兄弟写一个个人简介，然后去网上转了一圈，发现了一个比较好看而且简单的html个人简介，然后就想把它记录一下。

源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>网页标题</title>
        <style>
        body 
        {
            background-image: url(img/背景.jpg);
            background-size: cover;
        }
        div.transbox
        {
          width: 1050px;
          height: 420px;
          margin: 90px 90px;
          background-color: #ffffff;
          border: 1px solid #FFFFFF;
          opacity:0.8;
        }
        
        h1 {text-align: center;}
        h2.ex1 {margin-left:5cm;}
        h3.ex1 {margin-left:5cm;}
        img.ex1{margin-left:5cm;}
        p{text-align: right;}
        p.ex1{margin-right: 2cm;}
        p{color:mediumpurple}
        
        /*cc:change color*/
        a.cc:visited {color:#0000ff;}
        a.cc:hover {color:#ffcc00;}
        </style>
    </head>
    <body>
        <div class="background">
        <div class="transbox">
            
            <h1>个人简介</h1>
            <img src="img/头像.jpg" height="50px" width="50px" class="ex1" />
            <h2 class="ex1">名字</h2>
            <h3 class="ex1">想说的话或者是兴趣爱好，学校</h3>
            <h3 class="ex1">想说的话或者是兴趣爱好，学校</h3>
            <h3 class="ex1">想说的话或者是兴趣爱好，学校</h3>
            <h3 class="ex1">想说的话或者是兴趣爱好，学校</h3>
            <p class="ex1">想说的话</p>
        </div>
        </div>
        <embed height="50" width="100" src="bgm/Sunburst.mp3">
    </body>
</html>

使用

首先先建一个文件夹，名字随便。然后进入这个文件夹，新建一个html文件（像个人简介.html这样的），然后把上面的代码复制进这个文件里面。然后再在这个文件夹里面新建一个名为img的文件夹，里面需要放两张图片，一张命名为头像.jpg这个是你的头像，一张命名为背景.jpg，然后用edge浏览器打开你刚刚写好的html文件，就可以看到一个属于你的个人简介了。

把它放进hexo里面

当你搞好这个个人简介给你一个朋友看的时候，他可能会说：“欸那你这个只能本地浏览，也没什么用啊，我电脑上又没有，难不成又要弄一个？”

那这个时候，假设你有一个域名和一个hexo的GitHub Pages，那你可以打开hexo根目录下的_config.yml文件，找到skip_render:这行代码按按照下面的格式进行编辑，目的就是告诉hexo让它不要渲染此页面，这样才能正常显示你的个人简介。

skip_render:
  - "个人简介.html"

然后你就可以打开你的GitHub Pages/个人简介.html看到你的个人简介了。

demo预览

用刚刚上面的代码以及方法制作出来的效果(头像是我博客的头像，背景是Windows10壁纸，然后html文件叫个人简介demo.html)

demo演示代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>网页标题</title>
        <style>
        body 
        {
            background-image: url(img/demo背景.jpg);
            background-size: cover;
        }
        div.transbox
        {
          width: 1050px;
          height: 420px;
          margin: 90px 90px;
          background-color: #ffffff;
          border: 1px solid #FFFFFF;
          opacity:0.8;
        }
        
        h1 {text-align: center;}
        h2.ex1 {margin-left:5cm;}
        h3.ex1 {margin-left:5cm;}
        img.ex1{margin-left:5cm;}
        p{text-align: right;}
        p.ex1{margin-right: 2cm;}
        p{color:mediumpurple}
        
        /*cc:change color*/
        a.cc:visited {color:#0000ff;}
        a.cc:hover {color:#ffcc00;}
        </style>
    </head>
    <body>
        <div class="background">
        <div class="transbox">
            
            <h1>个人简介</h1>
            <img src="img/demo头像.jpg" height="50px" width="50px" class="ex1" />
            <h2 class="ex1">许子晋</h2>
            <h3 class="ex1">爱好：编程</h3>
            <h3 class="ex1">会什么编程语言：python c c++ html</h3>
            <h3 class="ex1">学校：</h3>
            <h3 class="ex1">所在地区：广东</h3>
            <p class="ex1">想说的话</p>
        </div>
        </div>
    </body>
</html>

注：这个文件一定要用uft-8格式保存，不然会出现乱码。

demo演示：https://xuzijin.com/%E4%B8%AA%E4%BA%BA%E7%AE%80%E4%BB%8Bdemo.html

原文出处:用HTML/CSS制作一个美观的个人简介网页——学习周记1

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 [email protected]