購物網站常見的展現商品的div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>welcometomywebsite</title>
<style type="text/css">
/*reset*/
*{
margin:0;
padding:0;
}
body{
background: rgba(235,235,235,1.0);
}
div.outer:hover{
box-shadow: 0px 0px 20px 1px #888888;
}
div.outer{
width: 250px;
height: 500px;
padding: 2px 2px;
margin: 10px;
border: 1px solid rgba(198,198,198,1.0);
border-bottom: 2px solid rgba(198,198,198,1.0);
background: white;
border-radius: 5px;
float: left;
}
div.inner{
padding: 10px 20px 10px 20px;
border: dashed 1px rgba(188,188,188,1.0);
height: 476px;
}
div.middle{
border: solid 1px rgba(231,231,231,1.0);
}
</style>
</head>
<body >
<!--<h1>welcome to my website</h1>
<a href="#">錨連接</a>-->
<!--<div class="comment">
<p style="background: white;height: 50px;">一些評論</p>
</div>-->
<div class="outer">
<div class="middle">
<div class="inner">
<h1>這裏是文章的標題</h1>
<p>這裏是文章的段落</p>
</div>
</div>
</div>
<div class="outer">
<div class="middle">
<div class="inner">
<h1>這裏是文章的標題</h1>
<p>這裏是文章的段落</p>
</div>
</div>
</div>
<div class="outer">
<div class="middle">
<div class="inner">
<h1>這裏是文章的標題</h1>
<p>這裏是文章的段落</p>
</div>
</div>
</div>
<div class="outer">
<div class="middle">
<div class="inner">
<h1>這裏是文章的標題</h1>
<p>這裏是文章的段落</p>
</div>
</div>
</div>
</body>
</html>
相關文章
- 1. 電商購物網站 - 實現註冊
- 2. 【CSS+DIV】（3）——網上購物網站
- 3. 利用JS實現購物網站商品放大鏡效果
- 4. 購物網站的商品推薦算法有哪些？
- 5. 購物網站
- 6. 購物網站的redis相關實現
- 7. 展示商品信息以及加入購物車，點擊商品條目可跳轉到購物車查看購物車中的商品
- 8. 購物車添加商品
- 9. 購物車++商品詳情
- 10. 基於java的零食訂購商城購物網站
- 更多相關文章...
- • 網站主機提供商 - 網站主機教程
- • 網站品質 教程 - 網站品質教程
- • ☆基於Java Instrument的Agent實現
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 電商購物網站 - 實現註冊
- 2. 【CSS+DIV】（3）——網上購物網站
- 3. 利用JS實現購物網站商品放大鏡效果
- 4. 購物網站的商品推薦算法有哪些？
- 5. 購物網站
- 6. 購物網站的redis相關實現
- 7. 展示商品信息以及加入購物車，點擊商品條目可跳轉到購物車查看購物車中的商品
- 8. 購物車添加商品
- 9. 購物車++商品詳情
- 10. 基於java的零食訂購商城購物網站