边框-应用01
2018-04-25 本文已影响0人
琪33
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
img {
display: block;
}
.items {
width: 1240px;
height: 260px;
padding-left: 20px;
margin: 100px auto;
}
.item {
width: 224px;
border: 1px solid #EEE;
float: left;
margin-right: 20px;
box-shadow: 0 2px 0 #EEE;
}
.item .pic {
height: 112px;
position: relative;
}
.item .pic > img {
width: 224px;
height: 112px;
}
.item .logo {
width: 80px;
height: 80px;
border: 4px solid #FFF;
position: absolute;
left: 50%;
bottom: -44px;
margin-left: -44px;
border-radius: 50px;
overflow: hidden;
}
.item .brief {
height: 140px;
background-color: #FFF;
}
</style>
</head>
<body>
<div class="items">
<div class="item">
<div class="pic">
<img src="./images/item_1.jpg">
<a href="javascript" class="logo">
<img src="./images/logo_1.jpg">
</a>
</div>
<div class="brief"></div>
</div>
<div class="item">
<div class="pic">
<img src="./images/item_2.jpg">
<a href="javascript" class="logo">
<img src="./images/logo_2.jpg">
</a>
</div>
<div class="brief"></div>
</div>
<div class="item">
<div class="pic">
<img src="./images/item_3.jpg">
<a href="javascript" class="logo">
<img src="./images/logo_3.jpg">
</a>
</div>
<div class="brief"></div>
</div>
<div class="item">
<div class="pic">
<img src="./images/item_4.jpg">
<a href="javascript" class="logo">
<img src="./images/logo_4.jpg">
</a>
</div>
<div class="brief"></div>
</div>
<div class="item">
<div class="pic">
<img src="./images/item_5.jpg">
<a href="javascript" class="logo">
<img src="./images/logo_5.jpg">
</a>
</div>
<div class="brief"></div>
</div>
</div>
</body>
