html制作一个简单的网页_用html做一个简单的网页

html制作一个简单的网页_用html做一个简单的网页制作一个简单的HTML个人网页

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

一个简单的HTML网页,这是我大学的一个期末作业,照片都是网上找的

看一下成品图

html制作一个简单的网页_用html做一个简单的网页

html制作一个简单的网页_用html做一个简单的网页

html制作一个简单的网页_用html做一个简单的网页

 html制作一个简单的网页_用html做一个简单的网页

html制作一个简单的网页_用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="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 >你看&#8212;&#8212;</p></td>
        <td><img src="images/1.jpg" width="383" height="289" /></td>
      </tr>
      <tr>
        <td><img src="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="images/3.jpg" width="400" /></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td>&nbsp;</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="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="images/a2.jpg" width="200" border="0" /></td>
            </tr>
          <tr>
            <td align="center"><img src="images/a4.jpg" width="200" border="0" /></td>
            </tr>
        </table></td>
        </tr>
      <tr>
        <td>&nbsp;</td>
        <td align="center"><img src="images/015.jpg" width="200" border="0" /></td>
        </tr>
    </table></td>
  </tr>
  <tr>
    <td>&nbsp;</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="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="images/b01.jpg" width="250" border="0" /></td>
            <td><img src="images/b04.jpg" width="260" border="0" /></td>
            <td><img src="images/b03.jpg" width="260" /></td>
          </tr>
          <tr>
            <td><img src="images/b06.jpg" width="260" /></td>
            <td><img src="images/b07.jpg" width="260" /></td>
            <td><img src="images/b02.jpg" width="260" />
             </td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
        </table>       
          </td>
        </tr>
      <tr>
        <td>&nbsp;</td>
        </tr>
    </table></td>
  </tr>
  <tr>
    <td>&nbsp;</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="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="images/index.jpg" /><br />
            <br />
           
            &#160;好朋友不需要太多,两个就够了,一个肯把钱借给你,当他向你要债时,另一个肯把他打死。<br />
            <br />
            <img width="500" height="353" src="images/rizhi3_wps_clip_image-33.png" />&#160;<br />
            <br />
            
            &#160;生活坏到一定程度就会好起来,因为他无法更坏。努力过后,才知道许多事情,坚持坚持,就过来了&#8212;&#8212;<br />
            <br />
            &#160;<img width="349" height="350" src="images/rizhi3_wps_clip_image-11297.png" /><br />
            <br />
            
          <p ><br />
            &#160;别在喜悦时承诺,别在悲伤时回答,别在愤怒时决定。<br />
            &#160; </p>
          <p ><img width="500" height="375" src="images/rizhi3_wps_clip_image-10366.png" /><br />
            <br />
           
          <p><br />
        </p></td>
        </tr>
      <tr>
        <td>&nbsp;</td>
        </tr>
    </table></td>
  </tr>
  <tr>
    <td>&nbsp;</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="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 >世界突然变得&nbsp;那么静、那么静、那么美。 </p>
          <p >人之所以为人,是因为&#8212;&#8212; </p>
<p >他会爱。 </p>
          <p >所以我鲜活着。 </p>
          <p >我爱我的音乐。 </p>
<p >爱我的生活。 </p>
          <p >爱我所钟爱的&nbsp;一切一切。</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="images/g.jpg" width="300" border="0" /></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
          </tr>
        </table></td>
        </tr>
      <tr>
        <td colspan="2">&nbsp;</td>
        </tr>
    </table></td>
  </tr>
  <tr>
    <td>&nbsp;</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

,网页放在百度网盘了,需要可以自提哦,记得给博主点赞哦

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/182255.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • vue v-if 多条件_vue if show

    vue v-if 多条件_vue if showv-if在模板中,可以根据条件进行渲染。条件用到的是v-if、v-else-if以及v-else来组合实现的。示例代码如下:<divid="app"><p

    2022年7月30日
    4
  • Java反射介绍[通俗易懂]

    Java反射介绍[通俗易懂] 一、反射的概述JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法;对于任意一个对象,都能够调用它的任意一个方法和属性;这种动态获取的信息以及动态调用对象的方法的功能称为java语言的反射机制。要想解剖一个类,必须先要获取到该类的字节码文件对象。而解剖使用的就是Class类中的方法.所以先要获取到每一个字节码文件对应的Class类型的对象.以上的总结就…

    2022年6月10日
    28
  • vscode写前端代码要装什么插件_AE必备插件

    vscode写前端代码要装什么插件_AE必备插件本篇文章先介绍下常见的插件,如果本文对你有所帮助请三连支持博主,你的支持是我更新的动力。vscode之所以被称为宇宙第一神器(虽然我喜欢用HBuilderX),其中丰富的插件功不可没,安装起来超级简单,给我们开发带来了极大的便捷。注意,新手学习期间,不建议安装t太多的插件,用到啥就安装啥。因为有些插件会到vue学习的时候引起冲突,所以这里就介绍几个常用的插件。vscode刚下载完毕是语言英文的,要先安装这个插件,把语言改为中文版,所以是我们第一个安装的插件就是他想必各位大佬也都用。修改开始标签,结束标签

    2022年9月30日
    1
  • windows安装mysql8.0_windows7哪个版本功能最多

    windows安装mysql8.0_windows7哪个版本功能最多Windows系统Mysql8.0.28的安装教程

    2022年9月14日
    0
  • l1正则化为什么稀疏(特征值重根与秩的关系)

    L1正则化与稀疏性L1正则化使得模型参数具有稀疏性的原理是什么?机器学习经典之作《patternrecognitionandmachinelearning》中的第三章作出的一个解释无疑是权威且直观的,我们也经常都是从这个角度出发,来解释L1正则化使得模型参数具有稀疏性的原理。再回顾一下,以二维为例,红色和黄色的部分是L1、L2正则项约束后的解空间,蓝色的等高线是凸优化问题中的目标函数(…

    2022年4月15日
    89
  • MySql索引类型

    MySql索引类型Mysql支持哪几种索引索引是在MySql的存储引擎层中实现的,而不是在服务器层从数据结构角度1、B+树索引(O(log(n))):关于B+树索引,可以参考 MySQL索引背后的数据结构及算法原理BTREE在MyISAM里的形式和Innodb稍有不同在Innodb里,有两种形态:一是primarykey形态,其leafnode里存放的是数据,而且不仅存放了索引键的数据,还存放了其他字段的数据…

    2022年6月12日
    32

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号