樂
喜
安
平

HTML5-07

1.购物网站-商品购买案例

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <link rel="stylesheet" type="text/css" href="css/reset.css"/>
 7         <link rel="stylesheet" type="text/css" href="css/buy.css"/>
 8     </head>
 9     <body>
10         <div id="main">
11             <!-- 商品图片区 -->
12             <div id="product">
13                 <img src="img/pic1.jpg" >
14             </div>
15             <!-- 中间遮罩区 -->
16             <div id="middle">
17                 
18             </div>
19             <!-- 购买功能区 -->
20             <ul id="buy">
21                 <li>
22                     <a href="#">立即购买</a>
23                 </li>
24                 <li>
25                     <a href="#">加入购物车</a>
26                 </li>
27                 <li>
28                     <a href="#">收藏</a>
29                 </li>
30             </ul>
31         </div>
32     </body>
33 </html>

 

buy.css

 1 /* 底层图片的宽高为320*320 */
 2 div{
 3     /* border: 1px solid black; */
 4 }
 5 #buy{
 6     /* border: 1px solid black; */
 7     width: 320px;
 8     /* 相对定位 */
 9     position: relative;
10     /* 堆叠顺序 1 上层 */
11     z-index: 1;
12     padding-left: 60px;
13     top:-590px;
14     /* 隐藏购买功能区 */
15     /* 元素显示 */
16     display: none;
17 }
18 #product{
19     height: 320px;
20     width: 320px;
21     /* 相对定位 */
22     position: relative;
23     /* 堆叠顺序:-1 下层 */
24     z-index: -1;
25 }
26 #middle{
27     height: 320px;
28     width: 320px;
29     background-color: gray;
30     /* 设置不透明级别:1为完全不透明 */
31     opacity: 0.5;
32     /* 相对定位 */
33     position: relative;
34     /* 堆叠顺序:0 中间层 */
35     z-index: 0;
36     top: -320px;
37     /* 隐藏遮罩区 */
38     display: none;
39 }
40 li{
41     height: 60px;
42     width: 200px;
43 /*     font-size: 16px; */
44     /* 居中对齐 */
45     text-align: center;
46     /* 垂直对齐 */
47     line-height: 60px;
48     background-color: yellow;
49     margin-top: 10px;
50 }
51 /* 后代选择器 */
52 #main:hover #middle,#buy{
53     /* 当鼠标悬停时，中间遮罩区和购买区显现 */
54     display: block;
55 }
56 #main{
57     width: 320px;
58     height: 320px;
59 }
60 li:hover{
61     /* border: 1px solid black; */
62 }
63 li{
64     /* border: 1px solid red; */
65 }
66 a{
67     /* border: 1px solid black; */
68     display: inline-block;
69     height: 100%;
70     width: 100%;
71     font-size: 16px;
72 }

 

posted @ 2021-07-06 21:06  喵酱爱吃鱼  阅读(45)  评论(0)  编辑  收藏  举报