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。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
csu 1446 Problem J Modified LCS （扩展欧几里得算法的简单应用）

csu 1446 Problem J Modified LCS （扩展欧几里得算法的简单应用）

这是一道扩展欧几里得算法的简单应用题，这题是在湖南多校训练赛中队友ac的一道题，在比赛之后请教了队友，然后自己把它a掉 这也是自己独自做扩展欧几里得算法的题目 题意：把题意转变下就变成了：求d1*x - d2*y = f2 - f1的解,很明显用exgcd来解 下面介绍一下exgcd的一些知识点：求ax + by = c的解 一、首先求ax + by = gcd(a,b)的解 这个
阅读更多...
hdu2289（简单二分）

hdu2289（简单二分）

虽说是简单二分，但是我还是wa死了  题意：已知圆台的体积，求高度 首先要知道圆台体积怎么求：设上下底的半径分别为r1,r2,高为h,V = PI*(r1*r1+r1*r2+r2*r2)*h/3 然后以h进行二分 代码如下： #include<iostream>#include<algorithm>#include<cstring>#include<stack>#includ
阅读更多...
usaco 1.3 Prime Cryptarithm(简单哈希表暴搜剪枝)

usaco 1.3 Prime Cryptarithm(简单哈希表暴搜剪枝)

思路： 1. 用一个 hash[ ] 数组存放输入的数字，令 hash[ tmp ]=1 。 2. 一个自定义函数 check( ) ，检查各位是否为输入的数字。 3. 暴搜。第一行数从 100到999，第二行数从 10到99。 4. 剪枝。 代码： /*ID: who jayLANG: C++TASK: crypt1*/#include<stdio.h>bool h
阅读更多...
uva 10387 Billiard（简单几何）

uva 10387 Billiard（简单几何）

题意是一个球从矩形的中点出发，告诉你小球与矩形两条边的碰撞次数与小球回到原点的时间，求小球出发时的角度和小球的速度。 简单的几何问题，小球每与竖边碰撞一次，向右扩展一个相同的矩形；每与横边碰撞一次，向上扩展一个相同的矩形。 可以发现，扩展矩形的路径和在当前矩形中的每一段路径相同，当小球回到出发点时，一条直线的路径刚好经过最后一个扩展矩形的中心点。 最后扩展的路径和横边竖边恰好组成一个直
阅读更多...
poj 1113 凸包+简单几何计算

poj 1113 凸包+简单几何计算

题意： 给N个平面上的点，现在要在离点外L米处建城墙，使得城墙把所有点都包含进去且城墙的长度最短。 解析： 韬哥出的某次训练赛上A出的第一道计算几何，算是大水题吧。 用convexhull算法把凸包求出来，然后加加减减就A了。 计算见下图： 好久没玩画图了啊好开心。 代码： #include <iostream>#include <cstdio>#inclu
阅读更多...
uva 10130 简单背包

uva 10130 简单背包

题意： 背包和 代码： #include <iostream>#include <cstdio>#include <cstdlib>#include <algorithm>#include <cstring>#include <cmath>#include <stack>#include <vector>#include <queue>#include <map>
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2