用HTML-CSS创建一个属于自己的个人网页

最新推荐文章于 2024-06-09 22:29:58 发布

YBZJ&奕

最新推荐文章于 2024-06-09 22:29:58 发布

阅读量875

点赞数 1

文章标签： html css servlet

本文链接：https://blog.csdn.net/m0_74697393/article/details/130118723

版权

效果图：（融入了音频与视频元素）

html代码（首次制作，多多见谅）

<!DOCTYPE html >
<html >
<head>  

<title>我的网页</title>  
<link href="1.css" rel="stylesheet" type="text/css">

</head>
 
<body  bgcolor ="lightblue">
<table width="100%" border="5" cellpadding="5" cellspacing="0" >
  <tr>
    <td><img src="图3.png"  height="100" /></td>
    <td width="100" align="center"><a href="w1.html">主页</a></td>
    <td width="100" align="center"><a href="w2.html">我的</a></td>
    <td width="100" align="center"><a href="w3.html">相册</a></td>
    <td width="100" align="center"><a href="w4.html">日志</a></td>
    <td width="100" align="center"><a href="w0.html">音乐</a></td>
  </tr>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 

<tr>
       
        <td>
	    <p >我的个人简介。 </p>
          <p >姓名：wj</p>
          <p >性别：男</p>
          <p >生日：0809</p>
          <p >学校：某某大学</p>
          <p >爱好：摄影，乒乓球，学习，王者荣耀</p></td>
         <td>
		<td/>
		<img src="图4.png" width="400">
       </td>



</tr>


  

  
<tr>
        <td><img src="图1.png" width="400" /></td>
        <td>
          <p >我不太温柔，但对于你，我尽我所能 </p>
          <p > 我会一直爱你，你可以反复想我确认</p>
          <p >没关系，我不听他们说，我听你说 </p>
          <p > 乖，待着别动，我来找你</p>
          <p > 不忙，你说，我在听</p>
        </td>
 </tr>


 <tr>
        <td>
	<p>歌曲——起风了</p>
	<audio  color="green"  autoplay="autoplay" id="audio" loop="loop" 	preload="auto" controls="pausebutton" >   
 	<source src="起风了 (DJ版).mp3" type="audio/MP3"  >  
     </audio>

	</td>
	<td/>
      <td>
	<p>视频——吹梦到西洲</p>
	<video controls  width="400" src="吹梦到西洲.mp4">
    	</video>

	</td>
</tr>



  
</table>
</body>
</html>

p {
    color:green ;
    text-align: center;
  }





body{
                /* 加载背景图片 */
				background-image: url(图5.png);
				/* 背景图垂直、水平均居中 */
				background-position: center center;
                /* 背景图不平铺 */
                background-repeat: no-repeat;
                /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
                background-attachment: fixed;  /*此条属性必须设置否则可能无效*/
                /* 让背景图基于容器大小伸缩 */
                background-size: cover;
			}