admin管理员组文章数量:1530275
来自作者的话
这是我第一次写博客，也是为了激励自己学习，分享一些前端学习的知识，有写的不好的多多包涵。下面是参考的一些博客的链接
https://blog.csdn/weixin_43976890/article/details/89473101
下面先放上成品网页图（个别字体图标因本人过懒简略了）
1.网页的布局分析
一个网页拿到手，首先看它的整体布局，分为哪几部分，然后我们一部分一部分地去完成，对于这次的小米商城官网我们主要就考虑它的前面一小部分，如上图所示
总的来看我们把它分为五个部分：
（每个人想法都是不一样的，不必一定要跟我的一致，说不定我的想法还繁杂了些）
- 页眉的的宣传广告栏
- 快速导航栏
- LOGO+小导航栏+搜索栏
- 中间分类栏+轮播图
- 模块栏+3张图片
分好部分就可以开始逐个去写代码了。
2.网页代码部分
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>仿小米商城官网</title>
<link rel="stylesheet" href="css/index.css">
<!-- 引用添加ico图标（就是网页标题栏前的小图标） -->
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<!-- 1.页眉部分 -->
<header>
<a href="#"></a>
</header>
<!-- 2.导航栏 -->
<div class="shortcut">
<div class="base">
<ul class="fl">
<li><a href="#">小米商城</a></li>
<li class="space"></li>
<li><a href="#">MIUI</a></li>
<li class="space"></li>
<li><a href="#">云服务</a></li>
<li class="space"></li>
<li><a href="#">IoT</a></li>
<li class="space"></li>
<li><a href="#">金融</a></li>
<li class="space"></li>
<li><a href="#">有品</a></li>
<li class="space"></li>
<li><a href="#">小爱开发平台</a></li>
<li class="space"></li>
<li><a href="#">企业团购</a></li>
<li class="space"></li>
<li><a href="#">资质证照</a></li>
<li class="space"></li>
<li><a href="#">协议规则</a></li>
<li class="space"></li>
<li><a href="#">下载app</a></版权声明：本文标题：仿小米商城电脑官网-纯HTML+CSS（含轮播图） 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1726414909a1069695.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论