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

文章目录

  • HTML5 CSS3做的一个静态的苹果官网首页
      • 简介以及使用的工具
      • 头部导航栏讲解
        • PC端(电脑):
        • 手机端:
    • 中间图片区域
        • PC端
        • 手机端
    • 底部区域
        • PC端
        • M端

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端的导航栏:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wYLmLiOF-1592749998111)(C:\Users\dell\Desktop\我的前端博客\images\apple1.png)]

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

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

<nav>
        <div class="top_nav">
            <div class="top_add">
                <div><广告>div>
            div>
            <div class="top_nav_menu">
                <ul>
                    <li class="iconfont ic01"><a href="#" class="fs01">a>li>
                    <li class="nav_font"><a href="#">Maca>li>
                    <li class="nav_font"><a href="#">iPada>li>
                    <li class="nav_font"><a href="#">iPhonea>li>
                    <li class="nav_font"><a href="#">Watcha>li>
                    <li class="nav_font"><a href="#">Musica>li>
                    <li class="nav_font"><a href="#">技术支持a>li>
                    <li class="iconfont"><a href="#" >
                    a>li>
                    <li class="iconfont ic00"><a href="#" class="fs">a>li>
                ul>
            div>            
        div>
    nav>

手机端:

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

HTML5 CSS3做的一个静态的苹果官网首页_第1张图片

HTML5 CSS3做的一个静态的苹果官网首页_第2张图片

中间图片区域

PC端

HTML5 CSS3做的一个静态的苹果官网首页_第3张图片

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

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

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

手机端

HTML5 CSS3做的一个静态的苹果官网首页_第4张图片

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

底部区域

PC端

HTML5 CSS3做的一个静态的苹果官网首页_第5张图片

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

M端

HTML5 CSS3做的一个静态的苹果官网首页_第6张图片

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

你可能感兴趣的:(前端,css,html,css3,javascript,vue.js)