HTML5 CSS3做的一个静态的苹果官网首页

HTML5 CSS3做的一个静态的苹果官网首页

简介以及使用的工具

**介绍：**这次的一个项目是我年后学习HTML和CSS一个月后做的一个阶段性的项目，花了一整天，这里只讲解写代码时候的具体思维，分析布局的。具体的代码我已经上传到我的资源中。需要的可以去下载，或者加下作者的qq：1349869599，可以私发给你，不收取米，纯属相互交流，共同学习前端。交个朋友。

使用的工具

使用的具体工具是vscode浏览器用的是谷歌浏览器。大家也可以使用自己喜欢的软件，反正能运行就行。

头部导航栏讲解

PC端（电脑）：

首先先说明这次的网页用到了媒体查询式，写了一个PC端的样式和一个手机端的样式，默认在屏幕width700px以下是手机端的样式，在1000px到2000px是电脑端的样式，相当于写了两个页面。是一个响应式的网站。

这里先介绍一下响应式的具体内容：

@media screen and (min-width:1000px) {
//这里的意思是屏幕的最小宽度为1000px时的样式，也就是我文章中说到的PC端
}
//同样的M端为：
@media screen and (max-width:1000px){
	
}

下面来到PC端的导航栏：

首先观察这部分可以发现导航栏分为两个部分，上面颜色浅一点，下面的颜色深一点。

所以这部分使用三个div盒子，第一个div盒子作为父级，剩下两个作为一个是浅色部分，一个是深色部分。其中深色部分的文字使用无序列表ul li，然后在css样式中将li设置为浮动样式 float：left；即可实现li部分横向排列，然后相邻两个li的距离自行设置。(注：深色部分的图标可以去阿里图标下载，具体这部分可以私信我或者后期我写一份博客讲解一下)

<nav>
        <div class="top_nav">
            <div class="top_add">
                <div>&lt;广告&gt;</div>
            </div>
            <div class="top_nav_menu">
                <ul>
                    <li class="iconfont ic01"><a href="#" class="fs01">&#xe71c;</a></li>
                    <li class="nav_font"><a href="#">Mac</a></li>
                    <li class="nav_font"><a href="#">iPad</a></li>
                    <li class="nav_font"><a href="#">iPhone</a></li>
                    <li class="nav_font"><a href="#">Watch</a></li>
                    <li class="nav_font"><a href="#">Music</a></li>
                    <li class="nav_font"><a href="#">技术支持</a></li>
                    <li class="iconfont"><a href="#" >&#xe623;
                    </a></li>
                    <li class="iconfont ic00"><a href="#" class="fs">&#xe6e9;</a></li>
                </ul>
            </div>            
        </div>
    </nav>

手机端：

手机端口和PC端最明显的区别就是导航栏的图标。手机端换成了下拉式：可以在下拉按钮设置触发按钮，点击后下拉菜单（具体代码太多见文件）

中间图片区域

PC端

首先看到前3张图片。这三张图片的样式都差不多，在导航栏下设置一个大的div 它的width是固定值，并且将大div的样式属性设置为margin ：auto居中，这样做的目的是防止父级坍塌。

然后在大的div设置三个div，三个div是兄弟关系，在三个div插入相应的图片。然后在图片上设置相应的文字，设置相应的样式。设置样式这里不多说，具体看分享的资源。

这部分的6张图片和上面图片有着区别，一行有着两张图片，具体的实现方法有多种，一是将照片设置为左浮动。二是和上面那部分讲的一样，先设置一个大盒子，大盒子的样式和上面相同，然后每个照片设置小盒子，共有6个小盒子，每个盒子内部一张图片，然后对每个盒子进行定位position ：relative；用的是相对定位，相对的是父级的大盒子，或者使用父级相对定位，子级绝对定位这个实现的效果和相对定位差不多，随便你选哪个。（具体的实现见资源，这里肯定放不出来）。

手机端

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vSWwz5rr-1592749998124)

手机端的中间部分由于都是单个图片排在一行，所以这部分也很简单和PC端前3张图片一样的样式，所以这里也不多详细解释，具体的代码查看资源。

底部区域

PC端

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mQNfrZlb-1592749998125)

这一部分的样式没有多余的可以讲解，PC端这部分很简单，首先设置一个大盒子div，背景颜色设置相应的颜色，控制margin值和padding值，然后下划线下面的部分也存在多种方法可以实现效果。首先对各加粗的黑字部分设置为无序列表结构 ul li ul的内容就是加粗字体，下面的部分就是li ，但li里面还要嵌套一个a标签，标签写上对应的文字内容。讲这部分的结构放入一个div中，其余的部分也是如此，然后设置左浮动。这是一种方法。另外的方法是在下划线下面套上一个大盒子div，然后每个无序列表部分在这个大盒子div中进行定位position。

M端

这部分最大的区别就是黑色字体部分，这部分和上面的头部导航栏一样的原理，设置触发事件，然后就会出现下拉框，由于原理一样这里就不多解释，具体参考分享的资源或者私信博主分享。
项目的简介到这里就结束了，另外给大家说明一下，实现相应的样式有很多种方法，博主在这里只是分享自己当时写项目的思考内容。每个人对于项目样式的实现有着自己的理解，若大家自己的想法实现后能达到相应的结果，自然是更好。感谢大家观看。