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。

相关文章

JS+HTML实现在线图片水印添加工具

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的
阅读更多...
前端CSS Grid 布局示例详解

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统，可以同时控制行和列，相比Flex（一维布局），更适合用在整体页面布局或复杂模块结构中,：本文主要介绍前端CSSGri... 目录css Grid 布局详解（通俗易懂版）一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行
阅读更多...
前端下载文件时如何后端返回的文件流一些常见方法

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》：本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子：使用 Blob
阅读更多...
使用Node.js制作图片上传服务的详细教程

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例
阅读更多...
Vuex Actions多参数传递的解决方案

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法（推荐）二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript
阅读更多...
Vue3使用router,params传参为空问题

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》：本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo
阅读更多...
使用Python开发一个简单的本地图片服务器

使用Python开发一个简单的本地图片服务器

《使用Python开发一个简单的本地图片服务器》本文介绍了如何结合wxPython构建的图形用户界面GUI和Python内建的Web服务器功能,在本地网络中搭建一个私人的,即开即用的网页相册,文中的示... 目录项目目标核心技术栈代码深度解析完整代码工作流程主要功能与优势潜在改进与思考运行结果总结你是否曾经
阅读更多...
CSS Padding 和 Margin 区别全解析

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性，它们用于控制元素周围的空白区域，本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd
阅读更多...
CSS will-change 属性示例详解

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性，用于告诉浏览器某个元素在未来可能会发生哪些变化，本文给大家介绍CSSwill-change属性详解，感... will-change 是一个 css 属性，用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化
阅读更多...
CSS去除a标签的下划线的几种方法

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中，去除a标签（超链接）的下划线的几种方法，本文给大家介绍的非常详细，感兴趣的朋友一起看看吧... 在 css 中，去除a标签（超链接）的下划线主要有以下几种方法：使用text-decoration属性通用选择器设置：使用a标签选择器，将tex
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2