html+css的简单界面实现

最新推荐文章于 2018-09-11 19:29:02 发布

qq416761940

最新推荐文章于 2018-09-11 19:29:02 发布

阅读量624

点赞数

本文链接：https://blog.csdn.net/qq416761940/article/details/40024053

版权

<!DOCTYPE html>
<html>
<head>
<title>homework1</title>
<meta charset="utf-8">
<style type="text/css">
.main{
width: 346px;
height: 417px;
margin: auto;
background-color: white;
border: solid 1px black;
}
.div1{
width: 346px;
height: 101px;
background-color: #4FC0E8;
border-bottom:solid 3px #39B0D8;
}
.div2{
width: 346px;
height: 235px;
}
.div2-1{
width: 137px;
height: 137px;
background-color: #4FC0E8;
border-radius: 70px;
position: relative;
left: 103px;
top: -104px;
border-bottom:solid 3px #39B0D8;
}
.div2-1-1{
width: 69px;
height: 69px;
margin: auto;
padding-top: 28px;
}
.div2-2{
color: #4AB8ED;
font-size: 18px;
font-family: arial;
font-weight: 500;
margin-top: -80px;
margin-left:78px;

}
.div2-3{
color: #C2C6C9;
font-size: 15px;
font-family: arial;
line-height: 22px;
margin-top: 13px;
margin-left:17px;

}
.div3{
width: 225px;
height: 75px;
background-color: #4FC0E8;
border-bottom:solid 3px #39B0D8;
color: #F4FFFA;
font-weight: 600;
font-family: arial;
font-size: 18px;
padding-left: 121px;
line-height: 75px;

}
</style>
</head>
<body>
<div class="main">

<div class="div1">
</div>

<div class="div2">
<div class="div2-1">
<div class="div2-1-1">
<img src="1.jpg">
</div>

</div>
<div class="div2-2">
LOREM IPSUM DOLOR
</div>
<div class="div2-3">
Quisque posuere risus erat at scelensque felis pulvinar quis.Maecenas arcu lorem,laoreet at dui in,jendrent mattis mi.Sed eu vehicula lectus felis pulvinar quis.Maecemas arcu lorem,laoreet at posuere risus erat.
</div>
</div>
<div class="div3">
LOAD MORE
</div>
</div>
</body>
</html>