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端的导航栏:
首先观察这部分可以发现导航栏分为两个部分,上面颜色浅一点,下面的颜色深一点。
所以这部分使用三个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="#">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="#" ></a></li><li class="iconfont ic00"><a href="#" class="fs"></a></li></ul></div> </div></nav>
手机端:
手机端口和PC端最明显的区别就是导航栏的图标。手机端换成了下拉式:可以在下拉按钮设置触发按钮,点击后下拉菜单(具体代码太多见文件)
中间图片区域
PC端
首先看到前3张图片。这三张图片的样式都差不多,在导航栏下设置一个大的div 它的width是固定值,并且将大div的样式属性设置为margin :auto居中,这样做的目的是防止父级坍塌。
然后在大的div设置三个div,三个div是兄弟关系,在三个div插入相应的图片。然后在图片上设置相应的文字,设置相应的样式。设置样式这里不多说,具体看分享的资源。
这部分的6张图片和上面图片有着区别,一行有着两张图片,具体的实现方法有多种,一是将照片设置为左浮动。二是和上面那部分讲的一样,先设置一个大盒子,大盒子的样式和上面相同,然后每个照片设置小盒子,共有6个小盒子,每个盒子内部一张图片,然后对每个盒子进行定位position :relative;用的是相对定位,相对的是父级的大盒子,或者使用父级相对定位,子级绝对定位这个实现的效果和相对定位差不多,随便你选哪个。(具体的实现见资源,这里肯定放不出来)。
手机端
手机端的中间部分由于都是单个图片排在一行,所以这部分也很简单和PC端前3张图片一样的样式,所以这里也不多详细解释,具体的代码查看资源。
底部区域
PC端
这一部分的样式没有多余的可以讲解,PC端这部分很简单,首先设置一个大盒子div,背景颜色设置相应的颜色,控制margin值和padding值,然后下划线下面的部分也存在多种方法可以实现效果。首先对各加粗的黑字部分设置为无序列表结构 ul li ul的内容就是加粗字体,下面的部分就是li ,但li里面还要嵌套一个a标签,标签写上对应的文字内容。讲这部分的结构放入一个div中,其余的部分也是如此,然后设置左浮动。这是一种方法。另外的方法是在下划线下面套上一个大盒子div,然后每个无序列表部分在这个大盒子div中进行定位position。
M端
这部分最大的区别就是黑色字体部分,这部分和上面的头部导航栏一样的原理,设置触发事件,然后就会出现下拉框,由于原理一样这里就不多解释,具体参考分享的资源或者私信博主分享。
项目的简介到这里就结束了,另外给大家说明一下,实现相应的样式有很多种方法,博主在这里只是分享自己当时写项目的思考内容。每个人对于项目样式的实现有着自己的理解,若大家自己的想法实现后能达到相应的结果,自然是更好。感谢大家观看。
HTML5 CSS3做的一个静态的苹果官网首页相关推荐
- 运用HTML+CSS+JS简单制作苹果官网首页
运用HTML+CSS+JS制作苹果官网首页 上次例会所留任务是用上HTML+CSS+JS做一个网页.内容自定. 我想的是做一个苹果官网首页的网页. 大概是这样的:苹果官网首页 我所做的和它相差不多 不 ...
- HTML5期末大作业:网页设计——小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品
HTML5期末大作业:网页设计--小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品 常见网页设计作业题材有 个人. 美食 ...
- 左右全屏banner焦点图 代码特效+苹果官网首页左右全屏banner焦点图效果+包括JS图片CSS样式等
介绍 源码名称:[左右全屏banner焦点图]代码特效+苹果官网首页左右全屏banner焦点图效果+包括JS图片CSS样式等 源码大小:16.6KB 开发语言:PHP+Mysql 操作系统:Windo ...
- 使用ScrollMagic 简单模仿苹果官网首页滑动视觉效果
最终效果图:http://www.zhangyingdong.com/#/home/detail?bid=34 主要代码 <body><div class="contain ...
- html语言制作带样式的表格,html制作一个复杂表格 html5/CSS3做一个表格
table td{width: 100px;padding: 5px;}DataDataDataDataDataDataDataDataDataDataDataDataDataDataData 用HT ...
- HTML5+CSS3做一个有动画跳动发光的文字效果
纯HTML5+CSS3制作的一个超级酷的字体发光效果 ,知识点不多,只需用到 文字阴影+模糊滤镜+动画延迟. 首先给大家康康效果图: 文章的最后小编放上了效果访问的URL,感兴趣的可以看看!! 如果有 ...
- 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <! ...
- 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYP ...
- 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |it前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!D ...
- 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个影子~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个影子特效~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYPE ...
最新文章
- java实现页面高效刷新_selenium高效应对Web页面元素刷新的实例讲解
- 今天起,在广东可以用百度App一键报警!
- 新手谈谈网站交互设计
- python四十九:封装
- 基于Git rebase修改历史提交信息
- Python全栈之路系列----之-----内置函数和匿名函数lamdba
- 商汤科技2020年校园招聘丨以你所AI,创无界未来
- 洛谷——P1547 Out of Hay
- [CDA数据分析师学习之路] 【CDA就业班独家发布】学习之路
- thinking-in-java(20)注解
- python层次聚类法画图_Python实现简单层次聚类算法以及可视化
- 计算机二级考试考不考二进制,如何通过计算机一、二级考试?方法很重要,过来人的经验告诉你...
- 运行到手机_清理手机垃圾的三个方法,让手机恢复流畅运行
- Web Control开发随笔(4):Control与WebControl 的Properity初探
- 【小型系统】简单的刷票系统(突破IP限制进行投票)
- Spring项目中自定义注解的使用
- 微信小程序_文档_04_框架_视图层_WXS_WXSS
- 【Redis】概述以及启动Redis并进入Redis
- 大数据人工智能时代你跟上步伐了吗?(号称第四次技术革命)
- 六大银行办理大额信用卡及养卡细则
热门文章
- 笔记本电脑安装Linux系统
- ES3数组和字符串的方法
- 编译疑问: Warning: Backslash and Newline separated by space
- CodeForces-721A-One-dimensional Japanese Crossword
- 阿里云短信发送工具类 AliyunSmsUtil.java
- Spring Security整合KeyCloak保护Rest API
- 使用 hydra 破解路由器密码
- 揭秘!物联网卡代理的三大骗局
- 【谷粒学院】通过对象存储OSS上传图片
- LSI Logic 1068 SAS 磁盘阵列卡配置教程