这是一个简单的html的网页制作，

大一刚刚开始学的代码，

里面可能会有一些报错，但是不影响。

这个是做出来的成品图。

图片链接自己修改。

对第一版本已经进行修改，（使图片和主体文字进行绝对定位的居中处理）

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    <style>
		body{ 	/*对body添加属性，添加背景图片*/
			background-image: url( "tu ku/beijing.png");  
			background-repeat: no-repeat;
			background-size: cover;
		}
		span{			/*对内容字体进行修饰*/
			display: inline-block;
			background-color:#B44AD3; 
			width: 200px;  
			font-size: 25px;   
			color: #ECE3E3;  
			text-align: center;  
			letter-spacing:5px;  
		}
		span:nth-child(2n){     /*内容字体关联，2n颜色进行改变*/
			background-color:#69B8C7  
		}
		img {
			width:200px;
			height:200px;
		}
		.conten{   
			text-align:center;  /*对标题字体进行修饰*/
	    	 width:100%;
			letter-spacing: 40px;
		}
		.acc{		/*设置盒子*/
			height: 300px;
			width: 1480.2px;
			position: absolute;		/*绝对定位，去自己想去的位置*/
			left:70px;
			top:290px;
		}
	</style>
 </head>
 <body>
	<img src="tu ku/fdfe90e7d40bcd8b5237a67d6517ee6.jpg" align="left">  <!-- 最后图片设置居左 -->
	 <img src="tu ku/d65942ecd988b1c68a620868a60a4f8.jpg" align="right">  <!-- 最后图片设置居右 -->
	 <h1 class="conten" style="text-indent: 5000mm" >欢迎来到我的世界</h1>   <!-- style这里是指文字高度 -->
	 <p class="acc">		
	 <span >鞠婧祎</span>			<!-- 文字放置位置 -->
	 <span>草莓果酱</span>
	 <span>小桃学姐</span>
	 <span>冬月子时</span>
	 <span>表妹李Kk</span>
	 <span>小点新</span>
	 <span>一条小团团</span>  
	<img src="tu ku/56c04e26c1b865fddf9acb926444704.jpg" >		<!-- 图片放置位置 -->
	 <img src="tu ku/180d39bc855b6871d352024def44265.png" >
	 <img src="tu ku/702b03e80a715bf6caa4090109b23f0.png" >
	 <img src="tu ku/1839eae0ae4319f8dbac271d21bb556.jpg" >
	 <img src="tu ku/aa626ad1d48b153e75a99e4dc593bd8.png" >
	 <img src="tu ku/9540a068c7c220d95c667513ff9bd50.jpg" >
	 <img src= "tu ku/db2602514734f55c1d2f6318b4c5e31.jpg">
		</p>
 </body>
</html>

更多推荐

HTML一个简单大一的网页作业