您的位置：首页 > Web前端 > CSS

html+css的简单界面实现

2014-10-12 21:55 603 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航