首页 > 代码库 > CSS板块练习代码
CSS板块练习代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.main{
width: 400px;
height: 500px;
background-color: #eee;
padding: 20px;
font-family: Arial;
}
.div1,.div2,.div3{
/*width: 400px;*/
height: 120px;
background-color:#fa1;
}
.div2,.div3{
margin-top: 20px;
}
.div1>img{
/*width: 150px;*/
float: left;
/*margin-top: 100px;*/
}
.div1>div{
width: 240px;
height: 92%;
background-color: #faa;
float: right;
padding-top: 10px;
padding-left: 10px;
}
.div1>div>h5{
font: 18px Arial;
margin: 0px;
}
.div1>div>p{
width: 210px;
margin: 0px;
/*overflow: hidden;*/
word-break:break-all;
padding-bottom: 4px;
border-bottom:1px solid #bbb;
}
.samll{
width: 90%;
height: 35px;
background-color: #fff;
}
.samll>strong{
font-size: 24px;
font-weight: 900;
float: left;
margin-top: 3px;
}
.sp{
padding: 4px 9px;
background-color: #A3C809;
border-radius: 3px;
margin-left: 39px;
float: left;
margin-top: 5px;
cursor: pointer;
}
.sp span{
padding: 0px 6px;
font-weight: bolder;
background-color: #567611;
border-radius:100%;
color: #fff;
float: left;
}
.samll span button{
}
</style>
</head>
<body>
<div class="main">
<div class="div1">
<img src="http://www.mamicode.com/1.jpg">
<div>
<h5>KIch 好的呵呵</h5>
<p>fbefhuriewhgiouergbouierbhuiotbo
jkewqflu</p>
<div class="samll">
<strong>1248$</strong>
<a href="http://www.mamicode.com/www.djkewcfu.com" class="sp"><span>i</span></a>
</div>
</div>
</div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
</body>
</html>
CSS板块练习代码