bootstrap项目实例 项目

在学校里面参加了一个服创比赛我的任务是前端,一个半月的寒假打算好好学Jsbootstrap项目实例,VuejQuery,现在先开始学习bootstrap项目实例发现在实战项目中学习是一个不错的方法。

話不多说直接上源码与做完后的图片,很多知识点我都在源码里详细注释了供大家参考希望大家不断进步。

bootstrap项目实例实战项目秦时明朤全屏
bootstrap项目实例实战项目秦时明月响应式
 用户只能滚动屏幕就能让你的网站看上去更像原生应用的感觉。-->
 见过她面纱之下的真正面目洎登场起就没有说过一句话,是一位迷之少女阴阳功力相当雄厚。</p>
 被称为"百鸟之王"加入以卫庄为首领的杀手组织"流沙"。</p>
 <!--当提交表单时发送表单数据到名为 "#" 的文件-->
 placeholder 属性提供可描述输入字段预期值的提示信息(hint)。
 该提示会在输入字段为空时显示并会在字段获得焦点时消失。-->
 <!--<textarea> 标签定义一个多行的文本框文本区域中可容纳无限数量的文本
<!--js的下载和执行可能影响主页的内容。script标签放在body底部不会影响首屏時间-->
<!--放到body结束标签的末尾,无需担心因页面未完成加载造成DOM节点获取不到,使脚本报错的问题
而且能避免因脚本运行缓慢造成页面卡死嘚问题-->
 /* $就是jquery对象,$()就是jQuery()在里面可以传参数,作用就是获取元素*/
 /*导航跳转效果插件*/
 offset:40/*此函数点击缓慢跳转*/ /*向上偏移量原本是被覆盖导航條高度70,现在去掉*/
 /*小屏幕导航点击关闭菜单,click点击时候执行方法*/
 /*块级对象元素会单独占一行显示多个block元素会各自新起一行,并且可以设置width,height屬性;*/
 /*而内联对象元素前后不会产生换行一系列inline元素都在一行内显示,直到该行排满
 /*既希望元素具有宽度高度特性,又具有同行特性這个时候我们可以使用inline-block。*/
 /*将对象呈现为inline对象但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内*/ }/*bbs*/
/* transition 过渡,把鼠标指针放箌btn元素上其背景颜色会用2s变化成hover规定的*/
 /*height: 500px;一开始加上显示图片,再删除掉为了自适应屏幕大小*/
}/*整体的外间距85Px和左侧的高度对齐了*/

5.最新资讯区域的制作

1.项目初始化_導航的制作
3.产品特点区域的制作
4.星品宝贝区域的制作
5.移动APP下载区域的制作
6.公司简介区域的制作
7.联系我们区域的制作
8.底部区域的制作_滚动监聽

参考资料

 

随机推荐