一个好看的用html写的个人简介
发布时间 :
字数:1.1k
阅读 :
今天想帮兄弟写一个个人简介,然后去网上转了一圈,发现了一个比较好看而且简单的html个人简介,然后就想把它记录一下。
源码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
| <!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让它不要渲染此页面,这样才能正常显示你的个人简介。
1 2
| skip_render: - "个人简介.html"
|
然后你就可以打开你的GitHub Pages/个人简介.html看到你的个人简介了。
demo预览
用刚刚上面的代码以及方法制作出来的效果(头像是我博客的头像,背景是Windows10壁纸,然后html文件叫个人简介demo.html
)
demo演示代码
css1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
| <!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} 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]