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。

相关文章

CSS place-items: center解析与用法详解

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性，用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性，用于同时控制 网格(Grid) 和 弹性盒(F
阅读更多...
CSS实现元素撑满剩余空间的五种方法

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中，我们经常需要让某个元素占据容器的剩余空间，本文将介绍5种不同的方法来实现这个需求，并分析各种方法的优缺点，感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中，我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求
阅读更多...
CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

《CSSAnchorPositioning重新定义锚点定位的时代来临(最新推荐)》CSSAnchorPositioning是一项仍在草案中的新特性，由Chrome125开始提供原生支持需... 目录 css Anchor Positioning：重新定义「锚定定位」的时代来了！ 什么是 Anchor Pos
阅读更多...
CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

《CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比》CSS中的position属性用于控制元素的定位方式，不同的定位方式会影响元素在页面中的布... css 中的 position 属性用于控制元素的定位方式，不同的定位方式会影响元素在页面中的布局和层叠关
阅读更多...
HTML5 getUserMedia API网页录音实现指南示例小结

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API，结合WebAudioAPI，实现网页录音功能,从获取音频流到处理和保存录音，整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3
阅读更多...
全面解析HTML5中Checkbox标签

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一，通过合理使用其属性和样式自定义方法，可以为用户提供丰富多样的交互体验，这篇文章给大家介绍HTML5中C... 在html5中，Checkbox（复选框）是一种常用的表单元素，允许用户在一组选项中选择多个项目。本
阅读更多...
HTML5 搜索框Search Box详解

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具，能够有效提升用户体验,通过结合自动补全功能和适当的样式，可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框（Search Box）详解搜索框是一个用于输入查询内容的控件，通常用于网站或应用程
阅读更多...
CSS3中的字体及相关属性详解

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》：本文主要介绍了CSS3中的字体及相关属性，详细内容请阅读本文，希望能对你有所帮助... 字体网页字体的三个来源：用户机器上安装的字体，放心使用。保存在第三方网站上的字体，例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字
阅读更多...
基于Python实现一个简单的题库与在线考试系统

基于Python实现一个简单的题库与在线考试系统

《基于Python实现一个简单的题库与在线考试系统》在当今信息化教育时代,在线学习与考试系统已成为教育技术领域的重要组成部分,本文就来介绍一下如何使用Python和PyQt5框架开发一个名为白泽题库系... 目录概述功能特点界面展示系统架构设计类结构图Excel题库填写格式模板题库题目填写格式表核心数据结构
阅读更多...
html 滚动条滚动过快会留下边框线的解决方案

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》：本文主要介绍了html滚动条滚动过快会留下边框线的解决方案，解决方法很简单，详细内容请阅读本文，希望能对你有所帮助... 滚动条滚动过快时，会留下边框线但其实大部分时候是这样的，没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2