通过html+css制作一个个人主页
其中包括主页、我的偶像、我的相册、我的日志、我的音乐 5个页面，他们之间可以通过点击进行跳转页面。
主页
<div class="box">
<table border="0" cellspacing="10" cellpadding="0">
<tr>
<td width="300px">
<div class="useImgBox">
<img src="./img/use.jpg" alt="">
</div>
</td>
<td width="100px"><a href="./index.html">主页</a></td>
<td width="100px"><a href="./myIdol.html">我的偶像</a></td>
<td width="100px"><a href="./myAlbum.html">我的相册</a></td>
<td width="100px"><a href="./myLog.html">我的日志</a></td>
<td width="100px"><a href="./myMusic.html">我的音乐</a></td>
</tr>
</table>
<hr size="2" color="#cccccc">
<table border="0" cellspacing="10" cellpadding="0">
<tr>
<td width="415">
<p>
我的个人简介。<br />
姓名：刘先生<br />
性别：男<br />
生日：1213<br />
学校：某某大学<br />
爱好：骑行，羽毛球，动漫<br />
你看——
</p>
</td>
<td>
<img width="385" height="250" src="./img/home1.webp" alt="">
</td>
</tr>
<tr>
<td>
<img width="385" height="250" src="./img/home2.jpg" alt="">
</td>
<td width="415">
<p>
好吧，我承认我兴趣广泛。<br />
包括吃喝玩乐睡。<br />
当然还有一些低调奢华有内涵的部分了。<br />
什么没事骑着我的山地车出去玩了。<br />
闲的无聊看会海贼王，斗破苍穹。<br />
</p>
</td>
</tr>
<tr>
<td width="415">
<p>
什么做饭，做家务，那都不在话下。嘿嘿。<br />
是不是很崇拜我啊。<br />
恩。。。我的朋友很多。但是敌人也很多。<br />
综上所述要想更多地了解我，就来看看我的小世界吧。<br />
</p>
</td>
<td>
<img width="385" height="250" src="./img/home3.jpg" alt="">
</td>
</tr>
</table>
</div>我的偶像
<div class="box">
<table border="0" cellspacing="10" cellpadding="0">
<tr>
<td width="300px">
<div class="useImgBox">
<img src="./img/use.jpg" alt="">
</div>
</td>
<td width="100px"><a href="./index.html">主页</a></td>
<td width="100px"><a href="./myIdol.html">我的偶像</a></td>
<td width="100px"><a href="./myAlbum.html">我的相册</a></td>
<td width="100px"><a href="./myLog.html">我的日志</a></td>
<td width="100px"><a href="./myMusic.html">我的音乐</a></td>
</tr>
</table>
<hr size="2" color="#cccccc">
<div class="titleBox">
我的偶像----周杰伦
</div>
<div style="overflow: hidden;">
<p style="width:570px;margin-left: 10px;float: left;margin-right: 10px;">
周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，中国台湾流行乐男歌手、音乐人、演员、导演、编剧、监制、商人。<br/>
2000年发行首张个人专辑《Jay》。2001年发行的专辑《范特西》奠定其融合中西方音乐的风格。2002年举行“The One”世界巡回演唱会。2003年成为美国《时代周刊》封面人物。2004年获得世界音乐大奖中国区最畅销艺人奖。2005年凭借动作片《头文字D》获得台湾电影金马奖、香港电影金像奖最佳新人奖。2006年起连续三年获得世界音乐大奖中国区最畅销艺人奖。2007年自编自导的文艺片《不能说的秘密》获得台湾电影金马奖年度台湾杰出电影奖。<br/>
2008年凭借歌曲《青花瓷》获得第19届金曲奖最佳作曲人奖。2009年入选美国CNN评出的“25位亚洲最具影响力的人物”；同年凭借专辑《魔杰座》获得第20届金曲奖最佳国语男歌手奖。2010年入选美国《Fast Company》评出的“全球百大创意人物” 。2011年凭借专辑《跨时代》再度获得金曲奖最佳国语男歌手奖，并且第4次获得金曲奖最佳国语专辑奖；同年主演好莱坞电影《青蜂侠》。2012年登福布斯中国名人榜榜首。2014年发行华语乐坛首张数字音乐专辑《哎呦，不错哦》。2018年举行“地表最强2世界巡回演唱会”。<br/>
演艺事业外，他还涉足商业、设计等领域。2007年成立杰威尔有限公司。2011年担任华硕笔电设计师并入股香港文化传信集团。<br/>
周杰伦热心公益慈善，多次向中国内地灾区捐款捐物。2008年捐款援建希望小学。2014年担任中国禁毒宣传形象大使。
</p>
<div style="float: left;">
<img src="./img/zjl1.webp" width="200px" alt="">
<br/>
<img src="./img/zjl2.jpg" width="200px" alt="">
</div>
</div>
</div>我的相册
<div class="box">
<table border="0" cellspacing="10" cellpadding="0">
<tr>
<td width="300px">
<div class="useImgBox">
<img src="./img/use.jpg" alt="">
</div>
</td>
<td width="100px"><a href="./index.html">主页</a></td>
<td width="100px"><a href="./myIdol.html">我的偶像</a></td>
<td width="100px"><a href="./myAlbum.html">我的相册</a></td>
<td width="100px"><a href="./myLog.html">我的日志</a></td>
<td width="100px"><a href="./myMusic.html">我的音乐</a></td>
</tr>
</table>
<hr size="2" color="#cccccc">
<div class="titleBox" style="width:763px;">
我的相册
</div>
<div class="albumBox">
<img src="./img/home1.webp" alt="">
<img src="./img/home2.jpg" alt="">
<img src="./img/home3.jpg" alt="">
<img src="./img/home4.jpg" alt="">
<img src="./img/home5.jpg" alt="">
<img src="./img/home6.jpg" alt="">
</div>
</div>我的日志
<div class="box">
<table border="0" cellspacing="10" cellpadding="0">
<tr>
<td width="300px">
<div class="useImgBox">
<img src="./img/use.jpg" alt="">
</div>
</td>
<td width="100px"><a href="./index.html">主页</a></td>
<td width="100px"><a href="./myIdol.html">我的偶像</a></td>
<td width="100px"><a href="./myAlbum.html">我的相册</a></td>
<td width="100px"><a href="./myLog.html">我的日志</a></td>
<td width="100px"><a href="./myMusic.html">我的音乐</a></td>
</tr>
</table>
<hr size="2" color="#cccccc">
<div class="titleBox" style="width:763px;">
致一些被遗失了的自己。
</div>
<div>
其实，我喜欢上学，只是不喜欢上课，怀念那些曾经一起闹，一起笑的时光。<br/>
<img src="./img/home1.webp" width="400px" alt=""><br/>
好朋友不需要太多，两个就够了，一个肯把钱借给你，当他向你要债时，另一个肯把他打死。<br/>
<img src="./img/home2.jpg" width="400px" alt=""><br/>
生活坏到一定程度就会好起来，因为他无法更坏。努力过后，才知道许多事情，坚持坚持，就过来了<br/>
<img src="./img/home3.jpg" width="400px" alt=""><br/>
别在喜悦时承诺，别在悲伤时回答，别在愤怒时决定。<br/>
<img src="./img/home4.jpg" width="400px" alt=""><br/>
</div>
</div>我的音乐
<div class="box">
<table border="0" cellspacing="10" cellpadding="0">
<tr>
<td width="300px">
<div class="useImgBox">
<img src="./img/use.jpg" alt="">
</div>
</td>
<td width="100px"><a href="./index.html">主页</a></td>
<td width="100px"><a href="./myIdol.html">我的偶像</a></td>
<td width="100px"><a href="./myAlbum.html">我的相册</a></td>
<td width="100px"><a href="./myLog.html">我的日志</a></td>
<td width="100px"><a href="./myMusic.html">我的音乐</a></td>
</tr>
</table>
<hr size="2" color="#cccccc">
<div class="titleBox" style="width:763px;">
我的音乐
</div>
<div style="overflow: hidden;">
<div style="float: left;width:590px;">
引<br/>
我与音乐<br/>
我和我的钢琴是最好的伙伴。<br/>
没有家人陪伴的日子，我用手指在琴键上敲出一个个充满温暖的琴音。<br/>
我也爱流行。<br/>
五月天，是我最有力的精神后盾。<br/>
我其实喜欢他们歌里的文字与倔强。<br/>
没有风的日子里，我凝视幸福。<br/>
放声歌唱。<br/>
世界突然变得 那么静、那么静、那么美。<br/>
人之所以为人，是因为——<br/>
他会爱。<br/>
所以我鲜活着。<br/>
我爱我的音乐。<br/>
爱我的生活。<br/>
爱我所钟爱的 一切一切。<br/>
</div>
<div style="float: left;">
<img src="./img/zjl1.webp" width="200px" alt="">
</div>
</div>
</div>这里是通过<a></a>标签进行页面之间的跳转的。
可以通过抖音扫码、哔哩哔哩搜索 web-lyh 观看教学视频
源码地址：
https://pan.baidu.com/s/1Io2AjENunicG5648Eu3N0Q?pwd=1234
7252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
