来自作者的话
这是我第一次写博客,也是为了激励自己学习,分享一些前端学习的知识,有写的不好的多多包涵。下面是参考的一些博客的链接
https://blog.csdn.net/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></