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

最新推荐文章于 2025-07-05 18:03:10 发布

心碎南瓜粥

最新推荐文章于 2025-07-05 18:03:10 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： css 前端 html 个人开发

本文链接：https://blog.youkuaiyun.com/zhouzhou20002000/article/details/126143295

我们写的小米商城：

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>

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

@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;
}