css之路-CSDN博客

本文链接：https://blog.csdn.net/yushangjun/article/details/40278425

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.div{
width:1265px ;
height: 560px;
margin: 0px;
padding: 0px;
margin: auto;

}
.div1{
width: 1265px;
height: 133px;
background: #F6F0E4;
border-top: 1px solid #393B34;
}
.div1-1{
margin: 0px;
margin-bottom: 50px;

}
.div1-2{
margin: 0px;
margin-bottom: 52px;
position: relative;
right: 10px;

}
.div1-3{
margin-bottom: 11px;
}
.div2{
width: 1265px;
height:436px;
background-image: url(1.jpg);
background-size: 100% 100%;
font-family: doubi;
}
.div2-1{
width: 270px;
height: 85px;
margin: auto;
/*background-color: blue;*/
border-left: 1px solid white;
padding-left: 30px;
float: left;
margin-left:177px;
margin-top: 10px;

}
@font-face{
font-family: doubi;
src:url(Sansation_Light.ttf);
}
.div2-1-1{

color: white;
font-size: 20px;
font-weight: 900;
display: block;
padding-top: 20px;
float: left;
}
.div2-1-2{
color: black;
float: left;
font-size: 20px;
padding-left: 10px;
padding-top: 20px;

}
.div2-1-3{
display: block;
clear: left;
color: white;
float: left;
font-size: 20px;
font-weight: 600;
}
.div2-1-4{
float: left;
color: black;
font-size: 20px;
padding-left: 10px;
font-weight: 600;
}
.div2-2{
width: 270px;
height: 85px;
margin: auto;
/*background-color: blue;*/
border-left: 1px solid white;
padding-left: 30px;
float: left;

margin-top: 10px;
}
.div2-2-1{

color: white;
font-size: 20px;
font-weight: 900;
display: block;
padding-top: 20px;
float: left;
}
.div2-2-2{
color: white;
clear: left;
float: left;
font-size: 20px;

}
.div2-2-3{
display: block;
color: black;
float: left;
font-size: 20px;
font-weight: 600;
padding-left: 10px;
}
.div2-3{
width: 270px;
height: 85px;
margin: auto;
/*background-color: blue;*/
border-left: 1px solid white;
padding-left: 30px;
float: left;

margin-top: 10px;
}
.div2-3-1{

color: white;
font-size: 20px;
font-weight: 900;
display: block;
padding-top: 20px;
float: left;
}
.div2-3-2{
color: white;
clear: left;
float: left;
font-size: 20px;

}
.div2-3-3{
display: block;
color: black;
float: left;
font-size: 20px;
font-weight: 600;
padding-left: 10px;
}
.div2-4{
height:123px;

float: left;
margin-top: 15px;
margin-left: 177px;
}
.div2-5{
width: 900px;
margin-left: 179px;
padding-bottom: 20px;
float: left;
font-family: arial;
font-size: 12px;
line-height: 20px;

}
.div2-5-1{
width: 279px;
height: 103px;
background-color: #C6CE95;
float: left;
padding: 10px;
}
.div2-5-2{
width: 279px;
height: 103px;
background-color: #D2C0B4;
float: left;
padding: 10px;
}
.div2-5-3{
width: 280px;
height: 103px;
background-color: #AAB8A7;
float: left;
padding: 10px;
}

</style>
</head>
<body>
<div class="div">
<div class="div1">
<img src="2.jpg" class="div1-1">
<img src="3.jpg" class="div1-2">
<img src="4.jpg" class="div1-3">
</div>
<div class="div2">
<div class="div2-1">
<span class="div2-1-1">GRAPHIC</span>
<span class="div2-1-2">&</span>
<span class="div2-1-3">WEB</span>
<span class="div2-1-4">design</span>
</div>
<div class="div2-2">
<span class="div2-2-1">MODERN</span>
<span class="div2-2-2">HOME</span>
<span class="div2-2-3">design</span>

</div>
<div class="div2-3">
<span class="div2-3-1">MODERN</span>
<span class="div2-3-2">HOME</span>
<span class="div2-3-3">design</span>
</div>
<div class="div2-4">
<img src="5.jpg" class="div3-1"><img src="6.jpg" class="div3-2"><img src="7.jpg" class="div3-3">
</div>
<div class="div2-5">
<div class="div2-5-1">
<span>Design is my work,my play,my world view I'm driven to share all that grabs my heart about graphic design,artists,typography,CSS/(X)HTML,and the web in these posts,
tutorials,and interviews
</span>
</div>
<div class="div2-5-2">
<span>My design obsession extends beyond the web to home, furniture,office,and garden design——and the objects we use.ifcontemporary design captivates you,too,please enjoy my articles here.
</span>
</div>
<div class="div2-5-3">
<span>
Belgians aren't just cheerfully churning out chocolate and beer! For centuries,we've created influential and striking graphic design, typography,and illustration.Delight in a gallery of Belgian work.
</span>
</div>

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