用 html/javascript/css 做个人网站(包含个人简介、简历、联系方式)

[复制链接]
1445 0
当然,我可以帮你设计一个简洁而漂亮的个人网站!以下是一个基本的HTML、CSS和JavaScript模板,你可以根据自己的需求进行修改。

首先,我们需要创建一个HTML文件,命名为index.html。在这个文件中,我们可以添加个人简介、简历和联系方式的内容。以下是一个简单的示例:

  1. <!DOCTYPE html>
  2. <html lang="en">

  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>个人介绍</title>
  8.     <link rel="stylesheet" href="css/style.css">

  9. </head>

  10. <body>
  11.     <div id="bigbox">
  12.         <div id="banner">
  13.             <img src="picture/banner.png" alt="">
  14.         </div>
  15.         <nav>
  16.             <a class="dangqian" href="">首页</a>
  17.             <a href="duanwen.html">短文</a>
  18.             <a href="rizhi.html">日志</a>
  19.             <a href="liuyan.html">留言板</a>
  20.         </nav>
  21.         <div id="main">
  22.             <div id="main_left">
  23.                 <h2>关于我</h2>
  24.                 <img src="picture/me.png" alt="">
  25.                 <p>
  26.                     <span>姓名</span>:*****<br>
  27.                     <span>性别</span>:男<br>
  28.                     <span>爱好</span>:听歌 踢足球 打游戏<br>
  29.                     <span>性格</span> :开朗<br>
  30.                     <span>家乡</span>:新疆乌恰县<br>
  31.                     <span>专业</span>:计算机网络技术
  32.                 </p>
  33.             </div>
  34.             <div id="main_right">
  35.                 <h2>热爱生活</h2>
  36.                 <p>
  37.                     一、岁月从来不曾静好,只是有人在替你背负枷锁,含泪前行。也许是父母,也许是朋友,也许是陌生人……无论是谁,请记得常怀感恩之心。
  38.                 </p>
  39.                 <p>
  40.                     二、这个世界并不完美,甚至有点残酷。你无法决定下一段旅途遇见的是好事还是坏事,可你能决定面对它们的态度。你看这个世界的角度,决定了这个世界给你的温度。
  41.                 </p>
  42.                 <p>
  43.                     三、总会有一件事让你瞬间长大,也总会有一个人让你泪如雨下。愿你早日领教这个世界的深深恶意,让自己活得开心得意。
  44.                 </p>
  45.                 <p>
  46.                     四、想要与众不同,却总随遇而安,想要做很多未做的事,却在现实棘手的吃喝拉撒前低下了头,我们间歇性热血满腔,长时间迷茫犯懒,别等了,再努力试试看!
  47.                 </p>
  48.                 <img src="picture/life.png" alt="">
  49.             </div>
  50.         </div>
  51.         <div id="luxing">
  52.             <h2>旅行生活</h2>
  53.             <div>
  54.                 <div id="picture">
  55.                     <img src="picture/11.png" alt="">
  56.                     <p>在日月潭</p>
  57.                 </div>
  58.                 <div id="picture">
  59.                     <img src="picture/22.png" alt="">
  60.                     <p>
  61.                         在毛里求斯
  62.                     </p>
  63.                 </div>
  64.                 <div id="picture">
  65.                     <img src="picture/33.png" alt="">
  66.                     <p>
  67.                         在马尔代夫
  68.                     </p>
  69.                 </div>
  70.                 <div id="picture">
  71.                     <img src="picture/44.png" alt="">
  72.                     <p>
  73.                         在玉龙雪山
  74.                     </p>
  75.                 </div>
  76.             </div>
  77.         </div>
  78.         <footer>
  79.             <p>
  80.                 版权所有&#169;*****
  81.             </p>
  82.         </footer>
  83.     </div>
  84. </body>

  85. </html>
复制代码


接下来,我们需要创建一个CSS文件,命名为style.css,用于设置网站的样式。例如,你可以设置背景颜色、字体样式、布局等。

  1. * {
  2.     margin: 0px;
  3.     padding: 0px;
  4.     list-style: none;
  5. }

  6. body {
  7.     background-color: #4B7C99;
  8. }

  9. #bigbox {
  10.     width: 1000px;
  11.     margin: 0 auto;
  12. }

  13. #banner {
  14.     width: 1000px;
  15.     font-size: 0px;
  16. }

  17. #banner img {
  18.     width: 1000px;
  19. }

  20. nav {
  21.     background-color: #CCD0D9;
  22.     width: 1000px;
  23.     height: 60px;
  24. }

  25. nav a {
  26.     text-decoration: none;
  27.     line-height: 60px;
  28.     margin-left: 50px;
  29.     margin-right: 50px;
  30.     color: #020C16;
  31.     font-weight: bold;
  32. }

  33. nav a:hover {
  34.     color: #1a9be6;
  35. }

  36. .dangqian {
  37.     color: #1a9be6;

  38. }

  39. #main {
  40.     height: 490px;
  41.     width: 1000px;
  42.     margin: 0 auto;
  43.     background-color: #86aacb;
  44. }

  45. #main_left {
  46.     width: 300px;
  47.     display: inline-block;
  48.     background-color: #86aacb;
  49.     float: left;
  50. }

  51. h2 {
  52.     box-sizing: border-box;
  53.     padding-left: 10px;
  54.     font-size: 20px;
  55.     line-height: 30px;
  56.     background-color: #03151F;
  57.     color: #CCD0D9;
  58. }

  59. #main_left img {
  60.     width: 300px;
  61. }

  62. #main_left p {
  63.     margin-left: 10px;
  64.     line-height: 40px;
  65. }

  66. #main_left span {
  67.     font-weight: bold;
  68. }

  69. #main_right {
  70.     position: relative;
  71.     width: 680px;
  72.     margin-left: 20px;
  73.     display: inline-block;
  74.     height: 200px;
  75. }

  76. #main_right img {
  77.     position: absolute;
  78.     width: 260px;
  79.     right: 0px;
  80.     top: 30px;
  81. }

  82. #main_right p {
  83.     width: 400px;
  84.     display: inline-block;
  85.     margin-left: 10px;
  86.     text-indent: 32px;
  87.     line-height: 30px;
  88.     margin-top: 10px;
  89. }

  90. #luxing {
  91.     background-color: #86aacb;
  92.     width: 1000px;
  93. }

  94. #luxing div {
  95.     font-size: 0px;
  96. }

  97. #picture {
  98.     font-size: 0px;
  99.     display: inline-block;
  100.     margin-left: 25px;
  101.     margin-right: 25px;
  102.     margin-top: 25px;
  103. }

  104. #picture img {
  105.     width: 200px;
  106. }

  107. #picture p {
  108.     font-size: 16px;
  109.     text-align: center;
  110.     line-height: 60px;

  111. }

  112. footer {
  113.     line-height: 60px;
  114.     font-size: 14px;
  115.     text-align: center;
  116.     background-color: #CCD0D9;
  117. }

  118. #main_right ul li {
  119.     width: 660px;
  120.     margin-left: 10px;
  121.     font-size: 12px;
  122.     margin-top: 10px;
  123.     border-bottom: 1px dotted #ccc;
  124.     padding-bottom: 10px;
  125. }

  126. #main_right ul li span {
  127.     font-size: 14px;
  128.     font-weight: bold;
  129. }

  130. #liuyan {
  131.     width: 660px;
  132.     margin-left: 10px;
  133.     margin: 20px;
  134. }

  135. #liuyan span {
  136.     display: inline-block;
  137.     width: 80px;
  138.     line-height: 40px;
  139. }

  140. button {
  141.     width: 100px;
  142.     height: 30px;
  143.     margin-left: 80px;
  144. }
复制代码


最后,我们可以创建一个JavaScript文件,命名为script.js,用于处理一些交互效果,比如点击事件、轮播图等。

这只是一个简单的示例,你可以根据自己的需求添加更多的内容和样式。如果你需要更复杂的功能,也可以考虑使用现有的前端框架,比如Vue、React或Angular。
有志和有钱者事竟成<諺>志さえあれば必ず成功する
搜索

研究报告

更多

社区同学

更多

客服中心

Admin@tjrzzl.com 周一至周日 10:00-22:00 仅收市话费

关注我们

  • 加入QQ群组
  • 关注官方微信
关于我们
关于我们
友情链接
联系我们
帮助中心
运营理念
注册说明
获取硬币
服务说明
社区规范
免责声明
账户安全
关注我们
官方微博
官方空间
官方微信
快速回复 返回顶部 返回列表