制作一个简单HTML个人网页网页（HTML+CSS）
2024-05-16 12:23:41
一个简单的HTML网页，这是我大学的一个期末作业，照片都是网上找的
看一下成品图
主页代码，这里的<link href="images/css.css" rel="stylesheet" type="text/css" />是引入css样的，images里面装的是css文件
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的驿站</title>
<link href="images/css.css" rel="stylesheet" type="text/css" />
<style type="text/css"></style>
</head><body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="nav"><tr><td><img src="data:images/logo2.png" height="100" /></td><td width="100" align="center"><a href="index.html">主页</a></td><td width="100" align="center"><a href="haoyou.html">我的偶像</a></td><td width="100" align="center"><a href="photo.html">我的相册</a></td><td width="100" align="center"><a href="rizhi.html">我的日志</a></td><td width="100" align="center"><a href="yinyue.html">我的音乐</a></td></tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="main"><tr><td></td></tr><tr><td><table width="760" border="0" cellspacing="10" cellpadding="0"><tr><td><p >我的个人简介。 </p><p >姓名：lz</p><p >性别：男</p><p >生日：0809</p><p >学校：某某大学</p><p >爱好：摄影，乒乓球，学习，王者荣耀</p><p >你看——</p></td><td><img src="data:images/1.jpg" width="383" height="289" /></td></tr><tr><td><img src="data:images/2.jpg" width="400" /></td><td><p >好吧，我承认我兴趣广泛。 </p><p >包括吃喝玩乐睡。 </p><p >当然还有一些低调奢华有内涵的部分了。 </p><p >什么没事捧着我的小单反出去摄摄影啦。 </p><p >闲的无聊用手捣鼓两下我的小钢琴啦。 </p><p ></p></td></tr><tr><td><p >什么吉他，竹笛，那都不在话下。嘿嘿。 </p><p >是不是很崇拜我啊。 </p><p >恩。。。我的朋友很多。但是敌人也很多。 </p><p >综上所述要想更多地了解我，就来看看我的小世界吧。 </p></td><td><img src="data:images/3.jpg" width="400" /></td></tr></table></td></tr><tr><td> </td></tr>
</table>
</body>
</html>我的偶像
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的驿站</title>
<link href="images/css.css" rel="stylesheet" type="text/css" />
<style type="text/css"></style>
</head><body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="nav"><tr><td><img src="data:images/logo2.png" height="100" /></td><td width="100" align="center"><a href="index.html">主页</a></td><td width="100" align="center"><a href="haoyou.html">我的偶像</a></td><td width="100" align="center"><a href="photo.html">我的相册</a></td><td width="100" align="center"><a href="rizhi.html">我的日志</a></td><td width="100" align="center"><a href="yinyue.html">我的音乐</a></td></tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="main"><tr><td></td></tr><tr><td><table width="800" border="0" cellspacing="10" cellpadding="0"><tr><td colspan="2"><div class="title">我的偶像----周杰伦</div></td></tr><tr><td><p >周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，中国台湾流行乐男歌手、音乐人、演员、导演、编剧、监制、商人。</p><p >2000年发行首张个人专辑《Jay》。2001年发行的专辑《范特西》奠定其融合中西方音乐的风格。2002年举行“The One”世界巡回演唱会。2003年成为美国《时代周刊》封面人物。2004年获得世界音乐大奖中国区最畅销艺人奖。2005年凭借动作片《头文字D》获得台湾电影金马奖、香港电影金像奖最佳新人奖。2006年起连续三年获得世界音乐大奖中国区最畅销艺人奖。2007年自编自导的文艺片《不能说的秘密》获得台湾电影金马奖年度台湾杰出电影奖。</p>
<p >2008年凭借歌曲《青花瓷》获得第19届金曲奖最佳作曲人奖。2009年入选美国CNN评出的“25位亚洲最具影响力的人物”；同年凭借专辑《魔杰座》获得第20届金曲奖最佳国语男歌手奖。2010年入选美国《Fast Company》评出的“全球百大创意人物” 。2011年凭借专辑《跨时代》再度获得金曲奖最佳国语男歌手奖，并且第4次获得金曲奖最佳国语专辑奖；同年主演好莱坞电影《青蜂侠》。2012年登福布斯中国名人榜榜首。2014年发行华语乐坛首张数字音乐专辑《哎呦，不错哦》。2018年举行“地表最强2世界巡回演唱会”。 </p><p >演艺事业外，他还涉足商业、设计等领域。2007年成立杰威尔有限公司。2011年担任华硕笔电设计师并入股香港文化传信集团。 </p><p >周杰伦热心公益慈善，多次向中国内地灾区捐款捐物。2008年捐款援建希望小学。2014年担任中国禁毒宣传形象大使。 </p></td><td><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td align="center"><img src="data:images/a2.jpg" width="200" border="0" /></td></tr><tr><td align="center"><img src="data:images/a4.jpg" width="200" border="0" /></td></tr></table></td></tr><tr><td> </td><td align="center"><img src="data:images/015.jpg" width="200" border="0" /></td></tr></table></td></tr><tr><td> </td></tr>
</table>
</body>
</html>
我的相册
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的驿站</title>
<link href="images/css.css" rel="stylesheet" type="text/css" />
<style type="text/css"></style>
</head><body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="nav"><tr><td><img src="data:images/logo2.png" height="100" /></td><td width="100" align="center"><a href="index.html">主页</a></td><td width="100" align="center"><a href="haoyou.html">我的偶像</a></td><td width="100" align="center"><a href="photo.html">我的相册</a></td><td width="100" align="center"><a href="rizhi.html">我的日志</a></td><td width="100" align="center"><a href="yinyue.html">我的音乐</a></td></tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="main"><tr><td></td></tr><tr><td><table width="800" border="0" cellspacing="10" cellpadding="0"><tr><td><div class="title">我的相册</div></td></tr><tr><td valign="top"><table width="800" border="0" cellspacing="0" cellpadding="0"><tr><td><img src="data:images/b01.jpg" width="250" border="0" /></td><td><img src="data:images/b04.jpg" width="260" border="0" /></td><td><img src="data:images/b03.jpg" width="260" /></td></tr><tr><td><img src="data:images/b06.jpg" width="260" /></td><td><img src="data:images/b07.jpg" width="260" /></td><td><img src="data:images/b02.jpg" width="260" /></td></tr><tr><td> </td><td> </td><td> </td></tr></table> </td></tr><tr><td> </td></tr></table></td></tr><tr><td> </td></tr>
</table>
</body>
</html>
我的日志
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的驿站</title>
<link href="images/css.css" rel="stylesheet" type="text/css" />
<style type="text/css"></style>
</head><body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="nav"><tr><td><img src="data:images/logo2.png" height="100" /></td><td width="100" align="center"><a href="index.html">主页</a></td><td width="100" align="center"><a href="haoyou.html">我的偶像</a></td><td width="100" align="center"><a href="photo.html">我的相册</a></td><td width="100" align="center"><a href="rizhi.html">我的日志</a></td><td width="100" align="center"><a href="yinyue.html">我的音乐</a></td></tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="main"><tr><td></td></tr><tr><td><table width="800" border="0" cellspacing="10" cellpadding="0"><tr><td><div class="title"><p >致一些被遗失了的自己。</p></div></td></tr><tr><td valign="top"><p> 其实，我喜欢上学，只是不喜欢上课，怀念那些曾经一起闹，一起笑的时光。<br /><br /><img width="510" src="data:images/index.jpg" /><br /><br /> 好朋友不需要太多，两个就够了，一个肯把钱借给你，当他向你要债时，另一个肯把他打死。<br /><br /><img width="500" height="353" src="data:images/rizhi3_wps_clip_image-33.png" /> <br /><br /> 生活坏到一定程度就会好起来，因为他无法更坏。努力过后，才知道许多事情，坚持坚持，就过来了——<br /><br /> <img width="349" height="350" src="data:images/rizhi3_wps_clip_image-11297.png" /><br /><br /><p ><br /> 别在喜悦时承诺，别在悲伤时回答，别在愤怒时决定。<br />  </p><p ><img width="500" height="375" src="data:images/rizhi3_wps_clip_image-10366.png" /><br /><br /><p><br /></p></td></tr><tr><td> </td></tr></table></td></tr><tr><td> </td></tr>
</table>
</body>
</html>
我的音乐
<!DOCTYPE html">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的驿站</title>
<link href="images/css.css" rel="stylesheet" type="text/css" />
<style type="text/css"></style>
</head><body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="nav"><tr><td><img src="data:images/logo2.png" height="100" /></td><td width="100" align="center"><a href="index.html">主页</a></td><td width="100" align="center"><a href="haoyou.html">我的偶像</a></td><td width="100" align="center"><a href="photo.html">我的相册</a></td><td width="100" align="center"><a href="rizhi.html">我的日志</a></td><td width="100" align="center"><a href="yinyue.html">我的音乐</a></td></tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="main"><tr><td></td></tr><tr><td><table width="800" border="0" cellspacing="10" cellpadding="0"><tr><td colspan="2"><div class="title"><p >我的音乐</p></div></td></tr><tr><td valign="top"><p> 引 </p><p >我与音乐 </p><p >我和我的钢琴是最好的伙伴。 </p><p >没有家人陪伴的日子，我用手指在琴键上敲出一个个充满温暖的琴音。 </p><p >我也爱流行。 </p>
<p >五月天，是我最有力的精神后盾。 </p><p >我其实喜欢他们歌里的文字与倔强。 </p><p >没有风的日子里，我凝视幸福。 </p>
<p >放声歌唱。 </p><p >世界突然变得 那么静、那么静、那么美。 </p><p >人之所以为人，是因为—— </p>
<p >他会爱。 </p><p >所以我鲜活着。 </p><p >我爱我的音乐。 </p>
<p >爱我的生活。 </p><p >爱我所钟爱的 一切一切。</p><p><br /></p></td><td valign="top"><table width="200" border="0" cellspacing="0" cellpadding="0"><tr><td></td></tr><tr><td></embed></td></tr><tr><td><img src="data:images/g.jpg" width="300" border="0" /></td></tr><tr><td> </td></tr></table></td></tr><tr><td colspan="2"> </td></tr></table></td></tr><tr><td> </td></tr>
</table>
</body>
</html>
css样式
@charset "utf-8";
body {background-image: url(254844.jpg);font-family: "宋体";font-size: 12px;line-height: 25px;color: #333;
}
.nav {border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #738CAA;width: 800px;margin-right: auto;margin-left: auto;
}
.main {background-image: url(bj.png);color: #000;
}
a {font-size: 14px;font-family: "微软雅黑";
}
a:link {color: #333;text-decoration: none;
}
a:visited {text-decoration: none;color: #333;
}
a:hover {text-decoration: none;color: #FFF;
}
a:active {text-decoration: none;color: #333;
}
.title {border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #200F15;border-left-width: 5px;border-left-style: solid;border-left-color: #200F15;padding-left: 10px;color: #AD5A5A;
}
图片的话，可以根据自己的喜好自己添加哦。
链接：https://pan.baidu.com/s/1Iz4_2gQvDgjn2do6SXzHNg
提取码：lzlz
，网页放在百度网盘了，需要可以自提哦，记得给博主点赞哦
制作一个简单HTML个人网页网页（HTML+CSS）相关推荐
- 【meng_项目】python+flask+html+css制作一个简单的生日祝福语网页
python+flask+html+css制作一个简单的生日祝福语网页 一个py文件: test.py 一个html文件: birthday_index.html 一张图片: ...
- 制作一个简单七夕情人节表白网页（HTML+CSS）
❤ 精彩专栏推荐
- 制作一个简单HTML宠物猫网页（HTML+CSS）
- 制作一个简单HTML+CSS个人网页设计（web前端大作业）
这是一个电影网页制作,非常简单,非常适合大学生网页制作 html <!doctype html> <html> <head> <meta charset=&q ...
- 如何制作一个简单的html网页
1.新建一个记事本 2.开始写html代码 制作一个简单的网页<html><head><title>网页的名字</title></head> ...
- 使用HBuilder制作一个简单的HTML5网页
使用HBuilder制作一个简单的HTML5网页 写在前面:开始入门网页制作,写下第一篇博文作为记录.纯纯小白一个,如有阅览者,欢迎批评指正!❤ 先放上效果图: 使用HBuilderX编辑器创建一个& ...
- 一个简单的登录注册网页的实现
一个简单的登录注册网页的实现 通过 标签让标签内的内容居中显示,再通过标签中的method属性来设置请求方式为post(一般涉及密码等机密数据都用post请求):再通过action来设置请求地址.这其 ...
- 【完整代码】用HTML/CSS制作一个美观的个人简介网页
[完整代码]用HTML/CSS制作一个美观的个人简介网页 整体结构 完整代码 用HTML/CSS制作一个美观的个人简介网页--学习周记1 HELLO!大家好,由于<用HTML/CSS制作一个美观 ...
- 编写一个简单的“个人简历”网页
新建HTML5文档,另存为"index01.html". 根据个人简历各元素,每一个元素用一个<p></p>标签,每个<p>标签为并列关系,且& ...
- 【博主推荐】HTML制作一个美观的个人简介网页（附源码）
文章目录 HTML制作一个美观的个人简介网页 模块1(个人信息)示例图 模块2(基本资料)示例图 模块3(项目经验)示例图 模块4(专业技能)示例图 模块5(工作经历)示例图 模块6(自我评价)示例图 ...
最新文章
- [转]Android敏捷开发指南
- 有了四步解题法模板，再也不害怕动态规划！
- 佐治亚理工学院硕士建议：2022年你应该掌握这些机器学习算法
- CRM与SCM整合 让企业供应链无缝连接
- matlab画二维网格贴吧,Matlab二维网格划分—预告
- Linux之文档与目录结构
- 使用SQLALCHEMY 出现warning的问题解决
- scala 连接oracle_一分钟教你学会用java连接Oracle数据库
- [css] 使用sass的方式有哪些？
- Java集合 -- HashSet 和 HashMap
- notepad++行首行尾添加字符
- matlab figure函数_如何在Matlab中使用GUI做一个简易音乐播放器？ ---- （六）控件间的数据传递...
- Windows10临时关闭数字签名认证
- cron表达式每一个小时_嵊泗新闻网丨两千小时的热爱——任春华：用志愿服务守护每一个笑容...
- _beginthreadex，CreateThread和_beginthread
- 房地产大数据管理系统——房地产大数据融合平台
- python毕业论文参考文献格式_毕业论文参考文献规范格式
- 记录第一次用阿里云（Windows主机）部署SSM项目（Spring+SpringMVC+Mybatis）
- 网络流行简笔画图片大全,网络的简笔画图片
- 基于OpenCV的摄像头人脸检测
热门文章
- ajax java servlet_$.ajax(); 对应后台java servlet?
- 红米note 4x Android 8,红米note 4X升级安卓7.0：小米MIUI8第331周公测
- 割平面法 matlab,割平面法matlab
- ID2021安装教程【科技猿说】
- c# excel vsto 表格偏移Offset
- highcharts 解决数据提示框展示的内容太多 ，部分内容无法显示的问题
- 数学 平面内 两直线 两个向量的夹角计算公式 C++实现
- 专访方立勋：开发者应该保持好奇和热情
- macbook 终端命令怎么使用_Mac终端怎么打开？带你全面了解在macOS中使用终端命令行...
- 酷客数据python基础实战答案_英语听力练习_日语_韩语_法语听力训练网站-沪江听力酷...