在线图像处理与编辑教程-优快云博客

本文链接：https://blog.youkuaiyun.com/zhangtaoloving/article/details/40279037

本文提供了一套从上传到享受的在线图像处理流程，包括关键步骤和实用技巧，帮助您将照片转换为数字艺术品。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<title>作业2</title>
<meta charset="utf-8">
<style type="text/css">
.Div{
width: 600px;
height: 342px;
position: relative;
left: 400px;
top: 50px;
}
.div1{
width: 600px;
}
.div1-1{
width: 100px;
height: 4px;
background-color: #DE6955;
}
.div1-2{
width: 100px;
height: 4px;
background-color: #4DC5DE;
position: relative;
left: 100px;
bottom: 4px;
}
.div1-3{
width: 100px;
height: 4px;
background-color: #1CAA82;
position: relative;
left: 200px;
bottom: 8px;
}
.div1-4{
width: 100px;
height: 4px;
background-color: #F4DF4E;
position: relative;
left: 300px;
bottom:12px;
}
.div1-5{
width: 100px;
height: 4px;
background-color: #444444;
position: relative;
left: 400px;
bottom: 16px;
}
.div1-6{
width: 100px;
height: 4px;
background-color: #DE6955;
position: relative;
left: 500px;
bottom: 20px;
}
.div2{
width: 600px;
height: 26px;
text-align: center;
font-family: criblir;
font-size: 16px;
position: relative;
top: -20px;
left: -20px;
}
.div2-1{
position: relative;
left: -110px
}
.div3{
width: 600px;
height: 223px;
background-image: url(5.jpg);
background-size: 20em;
position: relative;
top: -30px;

}
.div3-1{
color: #4D4D4F;
position: relative;
left: 80px;
top: 20px;
}
.div3-2{
color: red;
font-family: Arial;
font-size: 8px;
position: relative;
left: 75px;
}
.div3-3{
width: 80px;
height: 18px;
background-color: #DD6A57;
color: white;
font-size: 8px;
font-family: Arial;
font-weight: bold;
text-align: center;
border-radius:20px;
border-bottom: 0px;
border-right: 0px;
border-left: 0px;
border-top: 0px;
position: relative;
left: -125px;
top: 20px;

}
.div3-4{
font-size: 28px;
font-weight: bold;
color: #606261;
position: relative;
left: 15px;
top: 10px;
}
.div3-5{
width: 10px;
height: 10px;
border-radius: 50px;
background-color: #048183;
position: relative;
left: 240px;
top: 60px;

}
.div3-6{
width: 10px;
height: 10px;
border-radius: 50px;
background-color: white;
position: relative;
left: 255px;
top: 49px;
border: 0.5px solid;
}
.div3-7{
width: 10px;
height: 10px;
border-radius: 50px;
background-color: white;
position: relative;
left: 270px;
top: 38px;
border: 0.5px solid;
}
.div4{
width: 600px;
height: 90px;
background-color: #46C6E3;
position: relative;
top: -30px
}
.div4-1{
position: relative;
left: 110px;
top: 20px;
}
.div4-2{
position: relative;
left: 230px;
top: 20px;
}
.div4-3{
position: relative;
left: 350px;
top: 20px;
}
.div4-4{
color: white;
position: relative;
left: -40px;
top: 40px;
font-family: Arial;
font-weight: bold;
}
.div4-5{
color: white;
position: relative;
left: 70px;
top: 40px;
font-weight: bold;
font-family: Arial;
}
.div4-6{
color: white;
position: relative;
left: 170px;
top: 40px;
font-weight: bold;
font-family: Arial;
}
</style>
</head>
<body>
<div class="Div">
<div class="div1">
<div class="div1-1"></div>
<div class="div1-2"></div>
<div class="div1-3"></div>
<div class="div1-4"></div>
<div class="div1-5"></div>
<div class="div1-6"></div>
</div>
<div class="div2">
<img src="4.jpg" class="div2-1">
<span>CREATE    ABOUT    GALLERY</span>
</div>
<div class="div3">
<h3 class="div3-1">Ler's Get Started.</h3>
<span class="div3-2">Turn yout photo linto a piece of of digtial artwerk In there wety steps</span>
<input type="button" value="LEARN MORE >" class="div3-3">
<p class="div3-4"><</p>
<div class="div3-5"></div>
<div class="div3-6"></div>
<div class="div3-7"></div>
</div>
<div class="div4">
<img src="6.jpg" class="div4-1">
<img src="7.jpg" class="div4-2">
<img src="8.jpg" class="div4-3">
<span class="div4-4">1.Upload</span>
<span class="div4-5">2.Edit</span>
<span class="div4-6">3.Enjoct</span>
</div>
</div>

</body>
</html>