html+css+js实现一个简单的电商商城首页

1. index.html：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商城</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script type="text/javascript" src="js/index.js"></script>
</head>
<body>
    <!-- --------------------页眉板块-------------------- -->
    <div class="header">
        <!-- 设置logo -->
        <div class="logo">
            <img src="image/logo.png">
        </div>
        <!-- 设置菜单 -->
        <div class="menu" onmouseleave="show_menu1()"> 
            <div class="menu_title" onclick="show_menu()">
                <a href="#">内容分类</a></div>
            <ul id="menu1" >
                <li>现实主义</li>
                <li>抽象主义</li>
            </ul>
        </div>
        <!-- 设置用户登录 -->
        <div class="auth">
            <ul>
                <li><a href="#">注册</a></li>
                <li><a href="#">登录</a></li>
            </ul>
        </div>
    </div>
 
    <!-- --------------------正文板块-------------------- -->
    <div class="content">
        <!-- 设置广告栏 -->
        <div class="banner">
            <img src="image/welcome.png" class="banner_img">
        </div>
        <div class="img_content">
            <ul>
                <li>
                    <img src="image/wumingnvlang.jpg" class="img_li">
                    <div class="info">
                        <h3>无名女郎</h3>
                        <p>
                            图片描述可以分为多种，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块
                        </p>
                        <div class="img_btn">
                            <!-- 价格，购买logo -->
                            <div class="price">¥ 2300</div>
                            <!-- 购物车按钮 -->
                            <div class="btn">
                                <a href="#" class="cart">
                                    <img src="image/cart.svg">
                                </a>
                            </div>
                        </div>
                    </div>
                </li>
 
                <li>
                    <img src="image/wumingnvlang.jpg" class="img_li">
                    <div class="info">
                        <h3>无名女郎</h3>
                        <p>
                            图片描述可以分为多种，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块
                        </p>
                        <div class="img_btn">
                            <!-- 价格，购买logo -->
                            <div class="price">¥ 2300</div>
                            <!-- 购物车按钮 -->
                            <div class="btn">
                                <a href="#" class="cart">
                                    <img src="image/cart.svg">
                                </a>
                            </div>
                        </div>
                    </div>
                </li>
 
                <li>
                    <img src="image/wumingnvlang.jpg" class="img_li">
                    <div class="info">
                        <h3>无名女郎</h3>
                        <p>
                            图片描述可以分为多种，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块
                        </p>
                        <div class="img_btn">
                            <!-- 价格，购买logo -->
                            <div class="price">¥ 2300</div>
                            <!-- 购物车按钮 -->
                            <div class="btn">
                                <a href="#" class="cart">
                                    <img src="image/cart.svg">
                                </a>
                            </div>
                        </div>
                    </div>
                </li>
 
                <li>
                    <img src="image/wumingnvlang.jpg" class="img_li">
                    <div class="info">
                        <h3>无名女郎</h3>
                        <p>
                            图片描述可以分为多种，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块
                        </p>
                        <div class="img_btn">
                            <!-- 价格，购买logo -->
                            <div class="price">¥ 2300</div>
                            <!-- 购物车按钮 -->
                            <div class="btn">
                                <a href="#" class="cart">
                                    <img src="image/cart.svg">
                                </a>
                            </div>
                        </div>
                    </div>
                </li>
 
                <li>
                    <img src="image/wumingnvlang.jpg" class="img_li">
                    <div class="info">
                        <h3>无名女郎</h3>
                        <p>
                            图片描述可以分为多种，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块
                        </p>
                        <div class="img_btn">
                            <!-- 价格，购买logo -->
                            <div class="price">¥ 2300</div>
                            <!-- 购物车按钮 -->
                            <div class="btn">
                                <a href="#" class="cart">
                                    <img src="image/cart.svg">
                                </a>
                            </div>
                        </div>
                    </div>
                </li>
 
                <li>
                    <img src="image/wumingnvlang.jpg" class="img_li">
                    <div class="info">
                        <h3>无名女郎</h3>
                        <p>
                            图片描述可以分为多种，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块
                        </p>
                        <div class="img_btn">
                            <!-- 价格，购买logo -->
                            <div class="price">¥ 2300</div>
                            <!-- 购物车按钮 -->
                            <div class="btn">
                                <a href="#" class="cart">
                                    <img src="image/cart.svg">
                                </a>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
             
        </div>
        <!-- 分页 -->
        <div class="page_nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">上一页</a></li>
 
                <li><span class="first_page">1</span></li>
 
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">...</a></li>
                <li><a href="#">98</a></li>
                <li><a href="#">99</a></li>
 
                <li><a href="#">下一页</a></li>
                <li><a href="#">尾页</a></li>
            </ul>
        </div>
         
    </div>
    <!-- --------------------页脚板块-------------------- -->
    <div class="footer">
        <p class="p2">造烛求明，读书求理© 2019 POWERED BY <span>WanKcn</span></p>
    </div>
</body>
</html>

　

2. index.css

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
/*将所有的距离，间距都设置为0*/
*{
    padding: 0px;
    margin: 0px;
}
body{
    background-color: #F5F5F5 /*白烟色*/
}
/*--------------------logo,menu,login区域设计--------------------*/
/*设置页眉的位置*/
.header{
    width: 1200px;
    margin: 25px auto; /*注意空格分开而不是逗号*/
}
 
/*子菜单不显示*/
.header .menu ul{
    display: none;
    list-style: none; /*去点*/
    /*关联banner布局*/
    position: absolute;
    width: 80px; 
    opacity: 0.5; /*透明效果*/
    background-color: white;
}
 
/*设置菜单和logo位置*/
.header .logo{
    float: left;
    position: relative;
}
/*菜单位置*/
.header .menu{
    float: left;
    position: relative;
    margin-top: 12px;
    margin-left: 16px;
}
/*menu浮动事件 菜单折叠*/
/*.header .menu:hover ul{
    display: block;
}*/
/*---------------菜单样式设置---------------*/
/*菜单间距*/
.header .menu ul li{
    margin-top: 20px;
    text-align: center; /*和菜单标题同时居中*/
}
/*菜单边框*/
.header .menu .menu_title{
    border-bottom: 1px solid black;
    padding-bottom: 20px;
    width: 80px;
    text-align: center;
}
/*超级链接去下划线*/
a{
    text-decoration: none;
}
/*---------------login样式设置---------------*/
.header .auth{
    float: right;
}
.header .auth ul li{
    float: left;
    margin-right: 70px;
    margin-top: 12px;    /*上边距*/
    list-style: none;
}
 
/*--------------------正文区域设计--------------------*/
/*---------------banner样式---------------*/
.content{
    /*响应式布局始终居中*/
    width: 1200px;
    margin: 25px auto;
}
/*图片距离*/
.content .banner .banner_img{
    margin-top: 20px;
}
/*---------------正文图片样式---------------*/
/*整体图片横向布局*/
.content .img_content ul{
    width: 1280px;
}
.content .img_content ul li{
    width: 360px;  /*360*3+120*/
    float: left;
    margin: 0 60px 60px 0;
    list-style: none;
    background-color: #FFFFFF;
    /*处理边框*/
    margin-top: 30px;
    height: 500px; /*列表边框*/
    /*阴影位置， 垂直阴影位置，渐变距离，阴影尺寸，阴影颜色*/
    /*box-shadow: 0 0 5px 3px #ccc */
    /*浏览器兼容*/
    -webkit-box-shadow: 0 0 5px 3px #ccc; /*谷歌浏览器*/
    -moz-box-shadow: 0 0 5px 3px #ccc; /*火狐浏览器*/
}
/*标题设置*/
.content .img_content .info h3{
    font-size: 25px;
    color: red;
    margin-top: 20px;
    margin-bottom: 20px;
}
/*图片的段落信息设置*/
.content .img_content .info p{
    line-height: 25px;
    /*加一个下边距和价格隔开*/
    margin-bottom: 10px;
}
.content .img_content .info{
    margin-left: 30px;
    margin-right: 30px;
}
/*价格样式*/
.content .img_content .info .img_btn .price{
    color: red;
    font-size: 20px;
}
 
/*购物车设置*/
.content .img_content .info .img_btn{
    width: 300px;
}
.content .img_content .info .img_btn .btn{
    width: 60px;
    height: 30px;
    background-color: red;
    text-align: center;
    border-radius: 5px; /*圆角矩形*/
    float: right;
}
.content .img_content .info .img_btn .btn .cart img{
    width: 60px;
    height: 20px;
    margin-top: 5px;
 
}
.content .img_content .info .img_btn .price{
    float: left;
}
/*页码导航栏*/
.content .page_nav{
    width: 100%; /*大小不超出content*/
    height: 60px;
    line-height: 60px;
    /*border: 1px solid black;*/
    /*溢出处理*/
    overflow:hidden;
}
.content .page_nav ul li{
    float: left;
    margin-right: 20px;
    list-style: none;
}
.content .page_nav ul{
    width: 500px;
    margin: auto;
    overflow:hidden;
}
/*第一页设置背景圆*/
.content .page_nav .first_page{
    border-radius: 50%;
    background-color: #c5c5c5;
    padding: 3px 9px; /*圆心内部边距把圆撑起来*/
}
 
/*-------------------------页脚区域设计-------------------------*/
.footer{
    width: 1200px;
    height: 100px;
    margin: 60px auto;
    /*加一条上边框分割线*/
    border-top:1px solid #ccc;
    overflow: hidden;
}
.footer p{
    text-align: center;
    line-height: 80px;
}  
.footer p span{
    color: #ff1490;
}

　　

3. index.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// js实现菜单折叠
var flag=true; //开关按钮
function show_menu(){
    var menu1 = document.getElementById("menu1");
    if(flag){
        menu1.style.display="block";
        flag = false;
    }else{
        menu1.style.display="none";
        flag = true;
    }  
}
 
function show_menu1(){
    var menu1 = document.getElementById("menu1");
    menu1.style.display="none";
    flag = true; //鼠标离开时将flag默认回true
}

　　

posted @   经管时评  阅读(2236)  评论(0)  编辑  收藏  举报
编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
· 使用C#创建一个MCP客户端
点击右上角即可分享
微信分享提示
SQL AI 助手