这是一个简单的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一个简单大一的网页作业
发布评论