您现在的位置是：首页 > 技术教程 正文

html网页设计小作业(个人主页)

admin 阅读： 2024-03-26
后台-插件-广告管理-内容页头部广告（手机）

目录

作品介绍：

效果展示

代码部分：

作品介绍：

简易的个人网页小作业，只用了html+css 布局制作，没啥好说的，直接上图！！！

效果展示

Home 页面：

 About页面：

 

 Hobbies页面：

代码部分：

Home界面:

  1. html>
  2. <head>
  3. <title>title>
  4. <link rel="stylesheet" href="css/index.css">
  5. head>
  6. <body>
  7. <div class="home">
  8. <div class="content">
  9. <div class="stars">div>
  10. <img class="" src="images/index1.jpg" width="100%" alt="">
  11. <h3 class="title">欢迎来到我的个人网站h3>
  12. <h3 class="titles">我时常回到童年，用一片童心思考问题，很多烦恼的问题就变得易解。h3>
  13. <img class="icon" src="https://img.lccyj.ltd/img/down.png" alt="">
  14. <div class='ribbon'>
  15. <a href='./index.html'><span>Homespan>a>
  16. <a href='./about.html'><span>Aboutspan>a>
  17. <a href='./hobbies.html'><span>Hobbiesspan>a>
  18. div>
  20. div>
  21. <div class="icons">
  22. <div class="icons_items">
  23. <img class="icons_items_imgs" src="images/星空.webp" alt="">
  24. <span>仰望星空span>
  25. div>
  26. <div class="icons_items">
  27. <img class="icons_items_imgs" src="images/无仙.webp" alt="">
  28. <span>飘渺的心span>
  29. div>
  30. <div class="icons_items">
  31. <img class="icons_items_imgs" src="images/鲸鱼.webp" alt="">
  32. <span>蓝色海洋span>
  33. div>
  34. <div class="icons_items">
  35. <img class="icons_items_imgs" src="images/22.webp" alt="">
  36. <span>幻想世界span>
  37. div>
  38. div>
  39. <div class="introduce">
  40. <div class="introduce_item">
  41. <img class="introduce_item_img" src="images/星空.webp" alt="">
  42. <span class="introduce_item_title">
  43. 我们整天忙忙碌碌，像一群群没有灵魂的苍蝇，喧闹着，躁动着，听不到灵魂深处的声音。时光流逝，童年远去，我们渐渐长大，岁月带走了许许多多的回忆，也消蚀了心底曾今拥有的那份童稚的纯真，我们不顾心灵桎梏，沉溺于人世浮华，专注于利益法则，我们把自己弄丢了。<br><br>
  44. 所有的大人都曾经是小孩，虽然，只有少数的人记得。<br><br>
  45. 只有用心灵才能看得清事物本质，真正重要的东西是肉眼无法看见的
  46. span>
  48. div>
  49. <div class="introduce_item">
  51. <span class="introduce_item_titles">小王子在离开了玫瑰后才明白爱的道理：“我那时什么也不懂！我应该根据她的行为，而不是她的话来判断她。她使我的生活芬芳多彩，我真不该离开她跑出来。我本应该猜出在她那笨拙的假话背后所隐藏的情爱。玫瑰花是多么的自相矛盾！可是我当时太年轻，还不懂得去爱她。”
  52. <br><br>我的花生命是短暂的，她只有四根刺可以保护自己，抵御世界，我却将她独自留在我的星球上了！
  53. span>
  54. <img class="introduce_item_img" src="images/无仙.webp" alt="">
  55. div>
  56. <div class="introduce_item">
  57. <img class="introduce_item_img" src="images/鲸鱼.webp" alt="">
  58. <span class="introduce_item_title">狐狸说：“对我来说，你只是一个小男孩，就像其他成千上万个小男孩一样没有什么两样。我不需要你。你也不需要我。对你来说，我也只是一只狐狸，和其他成千上万的狐狸没有什么不同。但是，如果你驯养了我，我们就会彼此需要。对我来说，你就是我的世界里独一无二的了；我对你来说，也是你的世界里的唯一了。”span>
  59. div>
  60. <div class="introduce_item">
  61. <span class="introduce_item_titles">玫瑰花：＂我并非如此的弱不禁风...夜晚的凉风对我倒有好处。我是一朵花啊。＂<br><br>
  62. 她天真地显露出她那四根刺，随后又说道： “别这么磨蹭了。真烦人！你既然决定离开这儿，那么，快走吧！” 她其实是不愿意让小王子看到自己哭泣。她曾经是多么高傲的一朵花……<br><br>
  63. 玫瑰在小王子离开时这样说，我当然爱你，没有让你感觉到，是我的不对。
  64. span>
  65. <img class="introduce_item_img" src="images/22.webp" alt="">
  66. div>
  67. div>
  69. div>
  71. body>
  74. html>

About页面：

  1. html>
  2. <head>
  3. <link rel="stylesheet" href="css/about.css">
  4. head>
  5. <body>
  6. <div class="about">
  7. <div class="stars">div>
  8. <h3 class="about_tit">About me? About you!h3>
  10. <img class="about_bgc" src="images/哆啦a梦.jpg" alt="">
  11. <div class='ribbon'>
  12. <a href='./index.html'><span>Homespan>a>
  13. <a href='./about.html'><span>Aboutspan>a>
  14. <a href='./hobbies.html'><span>Hobbiesspan>a>
  16. div>
  17. <div class="me">
  19. <iframe src="./me.html" scrolling="no" frameborder="0" width="800px" height="700px">iframe>
  20. <span class="me_tit animate ">
  21. 真要开始写写自己，发现却无从写起。我了解自己吗？我想是不了解的，像现在这样与自己独处的时间，很少很少。大部分的时间都在忙碌，我也会反复逃避这样的状态，以试图拥有休闲时光。可是不久就要再度投入到忙碌的生活当中去。在生活和学习当中，我总是平衡不了。我想，这可能是要花一辈子的时间去抗衡。
  22. 信息大爆炸的时代，想知道想了解的东西太多了，可是理解的东西却更少了。海量的信息下，每个人都变得渺小了起来，我想我的焦虑也来源于此。我经常处于自我堵塞的状态下。我想我需要改变自己的思维了。我不再需要记忆的能力，相反，我需要的是删除的能力。我有不知情权。
  23. 其实，最近，我的状态也挺好的。我并没有焦虑。每一天起来也是轻快的，多了写思考，而不是做一个记忆机器。记忆的事情就交给互联网吧。也不知道过段时间再看现在写的东西，是什么感觉，希望可以起个警醒的作用吧。
  24. span>
  25. div>
  26. <div class="videos">
  27. <span>
  28. About you?<br><br>
  31. 关于未来的我？<br><br>
  35. 你会是什么样了。
  36. span>
  38. <img class="me_img" src="images/未来.jpg" alt="" width="80%" height="80%">
  39. div>
  40. div>
  41. body>

 Hobbies页面：

  1. html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <link rel="stylesheet" href="css/me.css">
  6. <title>个人介绍title>
  7. head>
  9. <body>
  10. <div class="jianli">
  11. <div class="left">
  12. <div class="head">div>
  13. <div class="container">
  14. <image class="ima" src="images/高达2.jpg">
  15. <span>无常span>
  16. image>
  17. div>
  18. <div class="bottom">div>
  19. div>
  20. <div class="right">
  21. <div class="first">
  22. <span>span>
  23. <span>教育背景/Eudcationspan>
  24. div>
  25. <div class="second">
  26. <div class="edu">
  27. <span>学院span>
  28. <span>数据科学与大数据技术专业/本科span>
  29. div>
  30. <span>毕业时间：2020.09-2024.06span>
  31. div>
  32. <div class="first">
  33. <span>span>
  34. <span>个人介绍/Introductionspan>
  35. div>
  36. <ul class="third">
  37. <li class="title">爱好:li>
  38. <li class="other">看电影、阅读、打乒乓球、睡觉、轻音乐li>
  39. <li class="title">性格:li>
  40. <li class="other">性格因心情而定，偏内向，倾向于和少数人交流li>
  41. <li class="title">其他:li>
  42. <li class="other">喜欢植物，喜欢动物，喜欢旅游li>
  43. <li class="other">喜欢纯理论，喜欢机械和爆炸li>
  44. <li class="other">喜欢小说，单纯喜欢。喜欢里面的曲折离奇，波澜壮阔，喜欢作者的文笔构思，带来的新鲜感li>
  45. <li class="other">喜欢唐诗，唐诗豁达。略喜欢宋词，宋词哀婉。不喜欢元曲，元曲幽怨。li>
  46. <li class="other">喜欢安静，但也不介意喧嚣li>
  47. <li class="other">终极矛盾患者li>
  48. ul>
  49. <div class="four">
  50. 22/11/8
  51. div>
  52. div>
  54. div>
  55. div>
  56. body>
  57. html>
  58. <hr />

oKK，就这么多啦。。

标签:
声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

在线投稿：投稿 站长QQ：1888636

后台-插件-广告管理-内容页尾部广告（手机）
相关文章
关注我们

扫一扫关注我们，了解最新精彩内容

搜索
排行榜
最近发表
标签列表