html 初出茅庐-简单个人主页制作

2024-04-24 18:18
文章标签 简单 html 制作 frontend 个人主页 初出茅庐

本文主要是介绍html 初出茅庐-简单个人主页制作，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

初出茅庐--个人主页的制作--web第一课

Code:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html>  
  3.     <head>  
  4.         <title>个人主页</title>  
  5.         <style>  
  6.         * {   
  7.           padding: 0px;   
  8.             margin: 0px;   
  9.         }   
  10.         body {   
  11.             background: url("images/bg_body0.gif");   
  12.             font-size: 14px;   
  13.         }   
  14.   
  15.         table {   
  16.             width: 981px;   
  17.             border: 0px;   
  18.             margin: 0px auto;   
  19.         }   
  20.         tr {   
  21.             width: 100%;   
  22.         }   
  23.         td {   
  24.             padding: 0px;   
  25.         }   
  26.         #centertd {   
  27.             border-left-style: dotted;   
  28.             border-right-style: dotted;   
  29.             border-left-color: green;   
  30.             border-right-color: green;   
  31.         }   
  32.         #nav a {   
  33.             text-decoration: none;   
  34.             color: blue;   
  35.         }   
  36.         #nav a:hover {   
  37.             color: white;   
  38.             border-bottom: 2px solid orchid;   
  39.         }   
  40.         a.hover img {   
  41.             width: 400;   
  42.             height: 400;   
  43.         }   
  44.         </style>  
  45.     </head>  
  46.   
  47.     <body>  
  48.       <!--top部分-->  
  49.         <table>  
  50.             <tr height="130">  
  51.                 <td background="images/topbg.jpg" width="581" valign="top">  
  52.                     <table>  
  53.                         <tr height="110">  
  54.                             <td>  
  55.                                 <object width="700" height="108">  
  56.                                     <param name="movie" value="flash/xd.swf" />  
  57.                                     <param name="quality" value="high" />  
  58.                                     <param name="wmode" value="transparent" />  
  59.                                     <embed src="flash/xd.swf" wmode="transparent" width="700" height="108"></embed>  
  60.                                 </object>  
  61.                             </td>  
  62.                             <td align="right">  
  63.                                 <object width="281" height="35">  
  64.                                     <param name="movie" value="flash/clock.swf" />  
  65.                                     <param name="quality" value="high" />  
  66.                                     <param name="wmode" value="transparent" />  
  67.                                     <embed src="flash/clock.swf" wmode="transparent" width="281" height="40"></embed>  
  68.                                 </object>  
  69.                             </td>  
  70.                         </tr>  
  71.                         <tr height="20">  
  72.                             <td>  
  73.                                 <div id="nav">  
  74.                                      <a href="MyFirstPage.html"><b>主页</b></a>  
  75.                                      <a href="http://student.csdn.net/space.php?uid=209919&do=blog&view=me" target="_blank"><b>博客</b></a>  
  76.                                      <a href="MyFirstPage.html"><b>相册</b></a>  
  77.                                      <a href="MyFirstPage.html"><b>个人档案</b></a>  
  78.                                 <div>  
  79.                             </td>  
  80.                         </tr>  
  81.                     </table>  
  82.                 </td>  
  83.             </tr>  
  84.             <!--middle部分-->  
  85.             <tr height="620">  
  86.                 <td bgcolor="#E0FFFF">  
  87.                     <table>  
  88.                         <tr height="620">  
  89.                             <!--left部分-->  
  90.                             <td valign="top" width="260">  
  91.                                 <div style="line-height:150%;"><b style="background-color:#98FB98; color: blue;">|个人档案|</b></div><hr width="120" align="left" style="border: double #00FFFF"/>  
  92.                                 <div style="line-height:150%;">  
  93.                                 <img src="images/tp.jpg" align="left" style="margin-right:10px;"/><br />  
  94.                                     姓名：#####<br />  
  95.                                     职业：学生<br />  
  96.                                     专业：软件工程<br />  
  97.                                     QQ号：<a href="tencent://message/?uin=362990034&Site=im.qq.com&Menu=yes">810883979</a><br />  
  98.                                     Email：<a href="mailto:bluesky_taotao@qq.com">bluesky_taotao@qq.com</a><br />  
  99.                                     嗜好：睡懒觉<br />  
  100.                                     就读学校：<a href="http://www.nwsuaf.edu.cn" target="_blank">西北农林科技大学</a><br />  
  101.                                 </div><hr style="border: double #00FFFF" />  
  102.                                 <div style="line-height:150%;"><b style="background-color:#98FB98; color: blue;">|背景音乐|</b></div><hr width="120" align="left" style="border: double #00FFFF"/>  
  103.                                 <div style="line-height:150%;">  
  104.                                     <center><input id="start" type="button" value="播放" onclick="bgsound.src='http://hb.vnet.cn/wlgs/user/song/102937_201009210730459456234.mp3'"/><font color="red">我是一只小小鸟</font>(IE only)<input id="stop" type="button" value="停止" onclick="bgsound.src=''"/></center>  
  105.                                 </div><hr style="border: double #00FFFF" />  
  106.                                 <div style="line-height:150%;"><b style="background-color:#98FB98; color: blue;">|关于我|</b></div><hr width="120" align="left" style="border: double #00FFFF"/>  
  107.                                 <div style="line-height:150%; font-size:12px;">  
  108. <pre>介绍自己的内容……   
  109. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>  
  110. </pre>  
  111.                                 </div><hr style="border: double #00FFFF" />                        
  112.                             </td>  
  113.                             <!--middle部分-->  
  114.                             <td valign="top" id="centertd" width="531">  
  115.                                 <br /><marquee><font color="red">欢迎访问我的个人主页！<br /></font></marquee>  
  116.                                 <div style="line-height:150%;"><b style="background-color:#98FB98; color: blue;">|最新照片|</b></div><hr width="120" align="left" style="border: double #00FFFF"/>  
  117.                                 <div style="background-color:black;">  
  118.                                     <hr />  
  119.                                         <marquee scrollamount="2" onmouseover="this.stop();" onmouseout="this.start();">  
  120.                                             <a href="images/haha.jpg" target="_blank"><img src="images/haha.jpg" width="100" height="100"></a>  
  121.                                             <a href="images/nc.jpg" target="_blank"><img src="images/nc.jpg" width="100" height="100"></a>  
  122.                                             <a href="images/haha.jpg" target="_blank"><img src="images/haha.jpg" width="100" height="100"></a>  
  123.                                             <a href="images/shu.jpg" target="_blank"><img src="images/shu.jpg" width="100" height="100"></a>  
  124.                                             <a href="images/haha.jpg" target="_blank"><img src="images/haha.jpg" width="100" height="100"></a>  
  125.                                             <a href="images/woniu.jpg" target="_blank"><img src="images/woniu.jpg" width="100" height="100"></a>  
  126.                                             <a href="images/haha.jpg" target="_blank"><img src="images/haha.jpg" width="100" height="100"></a>  
  127.                                             <a href="images/haha.jpg" target="_blank"><img src="images/haha.jpg" width="100" height="100"></a>  
  128.                                             <a href="images/shu.jpg" target="_blank"><img src="images/shu.jpg" width="100" height="100"></a>  
  129.                                             <a href="images/haha.jpg" target="_blank"><img src="images/haha.jpg" width="100" height="100"></a>  
  130.                                         </marquee>  
  131.                                     <hr />  
  132.                                 </div>  
  133.                                 <div style="line-height:150%;"><b style="background-color:#98FB98; color: blue;">|最新笔记|</b></div><hr width="120" align="left" style="border: double #00FFFF"/>  
  134.                                 <div style="line-height:250%;">  
  135.                                     <hr /> <img src="images/tp.jpg" width="30" height="30"/> <a href="http://student.csdn.net/space.php?uid=209919&do=blog&id=45822" target="_blank" style="text-decoration: none;">Javascript实现的日期选择插件</a><br />  
  136.                                     <hr width="80%"/> <img src="images/tp.jpg" width="30" height="30"/> <a href="http://student.csdn.net/space.php?uid=209919&do=blog&id=45459" target="_blank" style="text-decoration: none;">html 根据ip获取当地天气预报</a><br />  
  137.                                     <hr width="80%"/> <img src="images/tp.jpg" width="30" height="30"/> <a href="http://student.csdn.net/space.php?uid=209919&do=blog&id=40205" target="_blank" style="text-decoration: none;">JDBC数据库编程总结(一)</a><br />  
  138.                                     <hr width="80%"/> <img src="images/tp.jpg" width="30" height="30"/> <a href="http://student.csdn.net/space.php?uid=209919&do=blog&id=40245" target="_blank" style="text-decoration: none;">JDBC数据库编程总结(二)</a><br />  
  139.                                     <hr width="80%"/> <img src="images/tp.jpg" width="30" height="30"/> <a href="http://student.csdn.net/space.php?uid=209919&do=blog&id=44691" target="_blank" style="text-decoration: none;">JDBC数据库编程总结(三)</a><br />  
  140.                                     <hr width="80%"/> <img src="images/tp.jpg" width="30" height="30"/> <a href="http://student.csdn.net/space.php?uid=209919&do=blog&id=36195" target="_blank" style="text-decoration: none;">C/S通信，实现多重及时连接通信</a><br />  
  141.                                     <hr width="80%"/> <img src="images/tp.jpg" width="30" height="30"/> <a href="http://student.csdn.net/space.php?uid=209919&do=blog&id=34545" target="_blank" style="text-decoration: none;">通过URL对象获取指定网页的内容</a><br />  
  142.                                     <hr width="80%"/> <img src="images/tp.jpg" width="30" height="30"/> <a href="http://blog.csdn.net/tsyj810883979/archive/2010/09/07/5869001.aspx" target="_blank" style="text-decoration: none;">常用正则表达式收藏</a><br /><hr />  
  143.                                 </div>  
  144.                             </td>  
  145.                             <!--right部分-->  
  146.                             <td valign="top" width="190">  
  147.                                 <div style="line-height:150%;"><b style="background-color:#98FB98; color: blue;">|日历|</b></div><hr width="120" align="left" style="border: double #00FFFF"/>  
  148.                                 <object width="190" height="108">  
  149.                                     <param name="movie" value="http://www.nshen.net/blog/attachments/month_0505/rili.swf" />  
  150.                                     <param name="quality" value="high" />  
  151.                                     <param name="wmode" value="transparent" />  
  152.                                     <embed src="http://www.nshen.net/blog/attachments/month_0505/rili.swf" type="application/x-shockwave-flash"></embed>  
  153.                                 </object>  
  154.                                 <hr style="border: double #00FFFF" />  
  155.                                 <div style="line-height:150%;"><b style="background-color:#98FB98; color: blue;">|常用搜索|</b></div><hr width="120" align="left" style="border: double #00FFFF"/>  
  156.                                     <center><a href="http://www.baidu.com/" target="_blank"><img src="images/bd.gif" border="0px" width="90" height="30"></a></center><br />  
  157.                                     <center><a href="http://www.google.com.hk/" target="_blank"><img src="images/gg.gif" border="0px" width="90" height="30"></a></center><br />  
  158.                                     <center><a href="http://cn.bing.com/" target="_blank"><img src="images/by.jpg" border="0px" width="100" height="30"></a></center><br />  
  159.                                 <hr style="border: double #00FFFF" />  
  160.                                 <div style="line-height:150%;"><b style="background-color:#98FB98; color: blue;">|好友空间|</b></div><hr width="120" align="left" style="border: double #00FFFF"/>  
  161.                                     <div style="line-height:200%;">  
  162.                                         <font color="blue">####的博客空间</font> <a href="http://user.qzone.qq.com/1010904655/infocenter" target="_blank">点击进入</a><br />  
  163.                                         <font color="blue">####的博客空间</font> <a href="http://user.qzone.qq.com/1003413337/infocenter" target="_blank">点击进入</a><br />  
  164.                                         <font color="blue">####的博客空间</font> <a href="http://user.qzone.qq.com/942706211/infocenter" target="_blank">点击进入</a><br />  
  165.                                         <font color="blue">####的博客空间</font> <a href="http://user.qzone.qq.com/292260870/infocenter" target="_blank">点击进入</a><br />  
  166.                                         <font color="blue">####的博客空间</font> <a href="http://user.qzone.qq.com/314560128/infocenter" target="_blank">点击进入</a><br />  
  167.                                         <font color="blue">####的博客空间</font> <a href="http://user.qzone.qq.com/450255476/infocenter" target="_blank">点击进入</a>  
  168.                                     </div>  
  169.                                 <hr style="border: double #00FFFF" />  
  170.                             </td>  
  171.                         </tr>  
  172.                     </table>  
  173.                 </td>  
  174.             </tr>  
  175.             <tr height="40">  
  176.                 <td valign="middle" bgcolor="#4169D1" align="center">网页内容由<a href="mailto:bluesky_taotao@qq.com">BluesSky</a>制作于2010年10月21日</td>               
  177.             </tr>  
  178.         </table>  
  179.         <bgsound id="bgsound" src="http://hb.vnet.cn/wlgs/user/song/102937_201009210730459456234.mp3" loop="-1">  
  180.     </body>  
  181. </html>  

所有内容可以到http://tsyj810883979.download.csdn.net/查看

这篇关于html 初出茅庐-简单个人主页制作的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/932479。

相关文章

vite搭建vue3项目的搭建步骤

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境
阅读更多...
Nginx搭建前端本地预览环境的完整步骤教学

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件：nginx.conf脚本化操作：nginx.shnpm 脚本集成总结：对前端的意义很多
阅读更多...
前端缓存策略的自解方案全解析

前端缓存策略的自解方案全解析

《前端缓存策略的自解方案全解析》缓存从来都是前端的一个痛点,很多前端搞不清楚缓存到底是何物,：本文主要介绍前端缓存的自解方案,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录一、为什么“清缓存”成了技术圈的梗二、先给缓存“把个脉”：浏览器到底缓存了谁？三、设计思路：把“发版”做成“自愈”四、代码
阅读更多...
通过React实现页面的无限滚动效果

通过React实现页面的无限滚动效果

《通过React实现页面的无限滚动效果》今天我们来聊聊无限滚动这个现代Web开发中不可或缺的技术,无论你是刷微博、逛知乎还是看脚本,无限滚动都已经渗透到我们日常的浏览体验中,那么,如何优雅地实现它呢？... 目录1. 早期的解决方案2. 交叉观察者：IntersectionObserver2.1 Inter
阅读更多...
Vue3视频播放组件 vue3-video-play使用方式

Vue3视频播放组件 vue3-video-play使用方式

《Vue3视频播放组件vue3-video-play使用方式》vue3-video-play是Vue3的视频播放组件,基于原生video标签开发,支持MP4和HLS流,提供全局/局部引入方式,可监听... 目录一、安装二、全局引入三、局部引入四、基本使用五、事件监听六、播放 HLS 流七、更多功能总结在 v
阅读更多...
JS纯前端实现浏览器语音播报、朗读功能的完整代码

JS纯前端实现浏览器语音播报、朗读功能的完整代码

《JS纯前端实现浏览器语音播报、朗读功能的完整代码》在现代互联网的发展中,语音技术正逐渐成为改变用户体验的重要一环,下面：本文主要介绍JS纯前端实现浏览器语音播报、朗读功能的相关资料,文中通过代码... 目录一、朗读单条文本：① 语音自选参数，按钮控制语音：② 效果图：二、朗读多条文本：① 语音有默认值：②
阅读更多...
vue监听属性watch的用法及使用场景详解

vue监听属性watch的用法及使用场景详解

《vue监听属性watch的用法及使用场景详解》watch是vue中常用的监听器,它主要用于侦听数据的变化,在数据发生变化的时候执行一些操作,：本文主要介绍vue监听属性watch的用法及使用场景... 目录1. 监听属性 watch2. 常规用法3. 监听对象和route变化4. 使用场景附Watch 的
阅读更多...
前端导出Excel文件出现乱码或文件损坏问题的解决办法

前端导出Excel文件出现乱码或文件损坏问题的解决办法

《前端导出Excel文件出现乱码或文件损坏问题的解决办法》在现代网页应用程序中,前端有时需要与后端进行数据交互,包括下载文件,：本文主要介绍前端导出Excel文件出现乱码或文件损坏问题的解决办法,... 目录1. 检查后端返回的数据格式2. 前端正确处理二进制数据方案 1：直接下载（推荐）方案 2：手动构造
阅读更多...
Vue实现路由守卫的示例代码

Vue实现路由守卫的示例代码

《Vue实现路由守卫的示例代码》Vue路由守卫是控制页面导航的钩子函数,主要用于鉴权、数据预加载等场景,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一、概念二、类型三、实战一、概念路由守卫（Navigation Guards）本质上就是 在路
阅读更多...
uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)

uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)

《uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)》在uni-app开发中,文件上传和图片处理是很常见的需求,但也经常会遇到各种问题,下面：本文主要介绍uni-app小程序项目中实... 目录方式一：使用<canvas>实现图片压缩（推荐，兼容性好）示例代码（小程序平台）：方式二：使用uni
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2