布局和交互复习

最新推荐文章于 2024-06-20 09:40:49 发布

Vanrio

最新推荐文章于 2024-06-20 09:40:49 发布

阅读量426

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/Vanrio/article/details/40084175

版权

HTML 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

实现下图

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>homework</title>
<style type="text/css">
body
{
width: 700px;
height: 550px;
margin: auto;
font-family: Times New Roman;
}
.div
{
background: #FFFDE4;
position: relative;
top: 50px;
width: 640px;
height: 500px;
}
.div1
{
width: 640px;
height: 40px;
}
.h1
{
color: #21877C;
position: relative;
left:35px;
top: 10px;
font-size: 24px;
font-weight: bold;
}
.div2
{
width:640px;
height: 230px;
font-size: 13px;
color: #C0A554;
}
.div2_1
{
width: 220px;
height: 230px;
position: relative;
top: -20px;
left: 35px;
}
.div2_1_1
{
width: 115px;
height: 30px;
position: relative;
top:170px;
left: 27px;
}
.div2_1_1:hover
{
cursor: pointer;
}
.div2_2
{
width: 420px;
height: 80px;
position: relative;
left: 235px;
top: -220px;
}
.div2_3
{
width: 420px;
height: 80px;
position: relative;
left: 235px;
top: -240px;
font-size: 21px;
color: #644749;
}
.div2_3_1
{
width: 365px;
color: #9C323E;
font-weight: bold;
font-size: 13px;
position: relative;
top:6px;
padding-bottom: 5px;
border-bottom: 1px dashed #E6E770;
}
.div2_3_1:hover
{
text-decoration: underline;
color: black;
cursor: pointer;
}
.div2_3_2
{
color: #9C323E;
font-weight: bold;
font-size: 13px;
position: relative;
top:8px;
}
.div2_3_2:hover
{
text-decoration: underline;
color: black;
cursor: pointer;
}
.div2_4
{
width: 420px;
height: 80px;
position: relative;
left: 235px;
top: -235px;
}
.div3
{
width: 640px;
height: 230px;
}
.div3_1
{
width: 640px;
height: 30px;
color: #21877C;
position: relative;
left:35px;
top: -240px;
font-size: 24px;
font-weight: bold;
}
.div3_2
{
width: 640px;
height: 60px;
position: relative;
left:35px;
top: -240px;
}
.div3_3
{
width: 130px;
height: 25px;
position: relative;
left:35px;
top: -240px;
}
.div3_3a
{
width: 130px;
height: 25px;
position: relative;
left:30px;
top: -23px;
}
.div3_3:hover
{
cursor: pointer;
text-decoration: underline;
color: black;
}
.div3_4
{
width: 640px;
height: 60px;
position: relative;
left:35px;
top: -230px;
}
.div3_5
{
width: 130px;
height: 25px;
position: relative;
left:35px;
top: -230px;
}
.div3_5a
{
width: 130px;
height: 25px;
position: relative;
left:30px;
top: -23px;
}
.div3_5:hover
{
cursor: pointer;
text-decoration: underline;
color: black;
}

</style>
</head>
<body>
<div class="div">
<div class="div1">
<div class="h1">Our Spectrum of Services</div>
</div>
<div class="div2">
<div class="div2_1">
<div class="div2_1_1"></div>
<img src="pic1.png">
</div>
<div class="div2_2">
<span style="font-weight:bold">Donec accumsan porta risus.</span>Vestibulum sollicitudinlibero ut semper<br/>
commodo,purus enim sollicitudin nulla,dictum vehicula diam lacus at<br/>
purus.In egesta.
</div>
<div class="div2_3">
Services

<div class="div2_3_1">
<img src="search.png">
&nbsp&nbspNam congue quam non augue ivamus porttitor
</div>
<div class="div2_3_2">
<img src="search.png">
&nbsp&nbspJam aongue buam n augue famus
</div>
</div>
<div class="div2_4">
<span style="font-weight:bold">Pellentesque dolor.</span>Nunc congue est in ante mattis ultrices.liquam<br/>
erat volutpat Nam congue non augue.
</div>
<div class="div3">
<div class="div3_1">
Testimonial
</div>
<div class="div3_2">
<img src="del.png"><span style="font-weight:bold">Nullam vel justo.Mauris viverra mattis neque.
</span>Phasellus feugiat pede ut mauris uis orcies tibulum<br/>
eleifend.Donec est purusiaculis acuautorNullam vet justo.Mauris viverra mattis neque.Phaselius feugiat<br/>
pede ut mauris.Duis orci.
</div>
<div class="div3_3">
<img src="pen.png">
<div class="div3_3a">
by <span style="font-weight:bold;color:#9C323E">David Jackson</span>
</div>
</div>
<div class="div3_4">
<img src="del.png"><span style="font-weight:bold">Vel just.
Mauris viverra mattis neque asellus feugiat pede ut mauris uis orcies tibulum
</span>eleifend<br/>
Donec est purusiaculis acauctorNumllam vel justo.
Mauris viverra mattis neque.
Phasellus feugiat pede ut<br/>
mauris.
</div>
<div class="div3_5">
<img src="pen.png">
<div class="div3_5a">
by <span style="font-weight:bold;color:#9C323E">Tom Sam</span>
</div>
</div>
</div>

</div>
</div>
</body>
</html>