小米商城项目实战（一）

最新推荐文章于 2024-04-25 17:57:39 发布

是L .啊

最新推荐文章于 2024-04-25 17:57:39 发布

阅读量3.1k

点赞数 5

分类专栏：前端文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_44512567/article/details/119836694

版权

仿小米商城（HTML+CSS+JS）

推荐一个字体图标库，种类丰富，可直接下载保存到本地进行使用，就是这个 iconfont

在这里插入图片描述

一、效果

在这里插入图片描述

二、准备工作

1.分析整个设计图

版心宽度设计图大小

2.公共部分

头部、底部、导航

3.页面中相同的布局

三、顶部HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米商城</title>
		<meta name="keywords" content="小米,redmi,小米11 Ultra,Redmi Note 9,小米MIX Alpha,小米商城" >
		<meta name="description" content="小米官网直营小米公司旗下所有产品，包括小米手机系列小米11 Ultra、MIX FOLD，Redmi 红米系列Redmi Note 9、Redmi K40 Pro，小米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持.">
		<!--处理默认样式-->
		<link rel="stylesheet" href="css/reset.css"/>
		<!--公共的css-->
		<link rel="stylesheet" href="css/style.css"/>
		<!--首页的css-->
		<link rel="stylesheet" href="css/index.css"/>
		<!--字体图标样式-->
		<link rel="stylesheet" href=""/>
		<!--引入网页标题图标-->
		<link rel="shortcut icon" href="//s01.mifile.cn/favicon.ico" type="image/x-icon">
		
	</head>
	<body>
		<!--顶部S-->
		<div class="page-top">
			<div class="container">
				<div class="top-lt">
					<a href="">小米商城</a>
					<span>|</span>
					<a href="">MIUI</a>
					<span>|</span>
					<a href="">IoT</a>
					<span>|</span>
					<a href="">云服务</a>
					<span>|</span>
					<a href="">天星数科</a>
					<span>|</span>
					<a href="">有品</a>
					<span>|</span>
					<a href="">小爱开放平台</a>
					<span>|</span>
					<a href="">企业团购</a>
					<span>|</span>
					<a href=""

最低0.47元/天解锁文章

是L .啊

关注

5
点赞
踩
34

收藏

觉得还不错? 一键收藏
1
评论
小米商城项目实战（一）

仿小米商城（HTML+CSS+JS）推荐一个字体图标库，种类丰富，可直接下载保存到本地进行使用，就是这个 iconfont一、准备工作1.分析整个设计图版心宽度设计图大小2.公共部分头部、底部、导航3.页面中相同的布局二、顶部HTML<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>小米商城</title> <meta
复制链接

扫一扫