【两天搞定小米商城】【第一步】小米商城之初始准备_小米商城iconfont

作者：weixin_40725706 | 2024-04-02 19:48:34

踩

小米商城iconfont

我们写的小米商城：

https://www.mi.com/shop

图标文件自行去该网站下载，如搜索图标，购物车图标，箭头图标等

https://www.iconfont.cn/

首先我们开始写小米商城之前，要先引入文件，依次是图标文件、全局样式文件、样式文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 网页图标 -->
    <link rel="stylesheet" href="../images/favicon.ico">
    <!-- 全局样式 -->
    <link rel="stylesheet" href="../css/reset.css">
    <!-- 字体图标 -->
    <link rel="stylesheet" href="../css/iconfont.css">
    <!-- 自己的样式 -->
    <link rel="stylesheet" href="../css/mi.css">
    <title>xiaomiMall</title>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

其中，全局样式代码如下：

@charset 'utf-8';
/*这些元素都建议重新初始化*/
body,div,dl,dt,dd,ul,ol,li,tr,td,th,
h1,h2,h3,h4,h5,h6,hr,br,img,table,
input,form,a,p,textarea{
    padding:0;
    margin:0;
    font-family:Arial,'Microsoft YaHei','宋体';
}
/*去掉列表默认排列*/
ul,ol,li{
    list-style:none;
}
/*去掉底部横线*/
/*把a元素更改设置成块级元素，这个根据实际情况决定要不要*/
a{
    text-decoration:none;
    display:block;
    color: #333;
}
/*img标签要清除border。*/
/*display设为block设置为块级元素，默认为display:inline;
存在下边线多出4px状况,所以一般设为block*/
img{
    border:0;
    display:block;
}
/*清除浮动破坏带来的塌陷问题*/
/*清除浮动的兼容IE*/
.clearfloat {
	zoom: 1;
}
.clearfloat:after {
	display:block;
	clear:both;
	content:"";
	visibility:hidden;
	height:0;
}
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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/353540