使用HTML和CSS创建网页布局-优快云博客

本文链接：https://blog.youkuaiyun.com/zhanghaibing0903/article/details/40020577

本文详细介绍了如何使用HTML和CSS创建一个包含背景、导航栏、内容区域和页脚的网页布局。通过使用内联样式和外部样式表，实现了一个响应式的网页设计。

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

<!DOCTYPE html>
<html>
<head>
<title>homework2</title>
<meta charset="utf-8">
<style type="text/css">
.bg{
width: 600px;
height: 342px;
margin: auto;
text-align: center;
font-size: 16px;
font-family: calibri;
}
.div1{
height: 4px;
}
.div1>div{
height: 4px;
width: 100px;
}
.div1_1{
background: #D66B59;
}
.div1_2{
background: #4DC5DE;
position: relative;
top: -4px;
left: 100px;
}
.div1_3{
background: #1AAB82;
position: relative;
top: -8px;
left: 200px;
}
.div1_4{
background: #EBDB62;
position: relative;
top: -12px;
left: 300px;
}
.div1_5{
background: #434343;
position: relative;
top: -16px;
left: 400px;
}
.div1_6{
background: #D66B59;
position: relative;
top: -20px;
left: 500px;
}
.div2{
height: 25px;
}
.div2>label{
display: inline-block;
width: 50px;
height: 25px;
font-size: 8px;
position: relative;
top: -22px;
}
.div2_1{
line-height: 12px;
}
.div3{
height: 193px;
background-image: url(homework2/bg.jpeg);
background-size: 600px;
padding: 15px;
}
.div3_1{
width: 300px;
height: 40px;
padding: 20px;
}
.div3_11{
font-size: 20px;
font-weight: bold;
}
.div3_12{
font-size: 8px;
}
.bt1{
background-color: #DD6856;
border-radius: 20px;
border: none;
font-weight: bold;
color: white;
font-size: 8px;
height: 20px;
}
.div4{
background: #46C6E3;
height: 60px;
padding-top: 30px;
padding-left: 110px;
padding-right: 110px;
}
.div4 label{
font-weight: bold;
color: white;
}
</style>
</head>
<body>
<div class="bg">
<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">
<div class="div2_1" style="width:100px;">
<div>Portraits<span style="color:#8BB0B9;">.</span></div>
<div style="font-size:8px;">with school</div>
</div>
<label>CREATE</label>
<label>ABOUT</label>
<label>CALLERY</label>
</div>

<div class="div3">
<div class="div3_1">
<div class="div3_11">Let's Get Started<span style="color:#BA563C">.</span></div>
<div class="div3_12">Turn your photo into a piece of papers.</div>
<button class="bt1">LEARN MORE ></button>
</div>
<div>
<label style="float:left"><</label>
<label style="float:right">></label>
</div>
<div style="padding-top:109px;">
<span style="color:#018184;">●</span>
<span>○</span>
<span>○</span>
</div>
</div>

<div class="div4">
<div>
<img src="homework2/upload.png" align="left">
<img src="homework2/edit.png">
<img src="homework2/enjoy.png" align="right">
</div>
<div>
<label style="float:left">1.Upload</label>
<label>2.Edit</label>
<label style="float:right">3.Enjoy</label>
</div>
</div>
</div>
</body>
</html>