css

最新推荐文章于 2025-05-28 16:06:45 发布

山寨工程师

最新推荐文章于 2025-05-28 16:06:45 发布

阅读量275

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/yushangjun/article/details/40022957

本文通过一个具体的实例展示了如何使用HTML和CSS进行网页布局。详细介绍了各部分的样式设置及图片插入方法，对于初学者理解网页布局原理非常有帮助。

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

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<meta charset="utf-8">
<style type="text/css">
.div{
width: 350px;
background-color: white;
font-family: calibri;
margin: auto;
}
.div1{
background-color: #4FC0E8;
width: 350px;
height: 100px;
border-bottom: 5px solid;
border-color: #3AB5DE;
}
.div2-1{
position: relative;
left: 45px;
top: 26px;
}
.div2{
background-color: #4FC0E8;
border-radius: 100%;
width:140px;
height: 120px;
position: relative;
bottom: 90px;
left: 110px;
border-bottom: 5px solid;
border-color: #3AB5DE;
}
.div3{
width: 350px;
background-color: white;
position: relative;
bottom: 90px;
}
.div3-1{
color: #4FC0E8;
text-align: center;
}
.div3-2{
color: #D7D8DC;
position: relative;
left: 15px;
}
.div4{
background-color: #4FC0E8;
height: 80px;
width: 350px;
position: relative;
bottom: 70px;
}
.div4-1{
color: white;
text-align: center;
position: relative;
top: 30px;
}
</style>
<body>
<div class="div">
<div class="div1">

</div>
<div class="div2">
<img src="1.jpg" class="div2-1">
</div>
<div class="div3">
<h2 class="div3-1">LOREM IPSUM DOLOR</h2>
<span class="div3-2">
Quisque posuere risus erat at scelerisque felis <br />
pulvinar quis.Maecenas arcu lorem,laoreet at <br />
dui in,hendrerit mattis mi.Sed eu vehicula lectus <br />
felis pulvinar quis.Maecenas arcu lorem,laoreet <br />
at posuere risus erat.
</span>
</div>
<div class="div4">
<h3 class="div4-1">LOAD MORE</h3>
</div>
</div>
</body>
</html>