ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

git 对z-index 属性的知识 用css 做轮播 相应式布局

2021-12-05 11:02:35  阅读:203  来源: 互联网

标签:index Git 轮播 文件 百分比 元素 git


一   Git   

【狂神说Java】Git最新教程通俗易懂_哔哩哔哩_bilibili笔记资料交流都在我们的平台:www.kuangstudy.com秦疆老师Java进阶系列课程之GIT使用带你走进GIT世界;深入浅出的讲解了GIT使用的全流程以及实战教学!狂神说Java系列,努力打造通俗易懂的教程QQ交流群 : 664386224https://www.bilibili.com/video/BV1FE411P7B3?p=10

  (1) git式一个开源的分布式版本控制系统,是目前世界上最先进、最流行的版本控制系统。可以快速高效的处理从很小到很大的项目管理。

  (2)使用git管理的项目,拥有三个区域,分别为工作区,暂存区 ,Git仓库;

  (3)Git中的三个状态;

            已修改  modified 表示修改了文件,但还没将修改的结果放到暂存区

            已暂存  staged   表示对已修改文件的当前版本做了标记,使之包含在下次提交的列表中

            已提交  committed 表示文件已经安全的保存在本地的Git仓库中

  (4)Git的基础操作

             例: 

         1,初始化仓库     

                   新建一个项目目录,鼠标右键点击Git   Bash ,执行 git  init 将当前目录转化为git仓库 /*git init 命令会创建一个名为 .git 的隐藏目录,这个 .git 目录就是当前项目的 Git 仓库,里面包含了初始的必要文件,这些文件是 Git 仓库的必要组成部分*/

        2,检查文件的状态   

                    使用git  status 输出的状态

   /*使用 git status 输出的状态报告很详细,但有些繁琐。如果希望以精简的方式显示文件的状态,可以使用如下两条完全等价的命令,其中 -s 是 –short 的简写形*/

    

                                              未跟踪文件前面有红色的 ?? 标记

       3   ,跟踪新文件

                             使用命令 git add 开始跟踪一个文件index.html  ,此时再执行  git status命令会看到相关文件 index.html在Changes to be committed 这行的下面,说明已被跟踪,并处于暂存状态

       4,提交更新     

                 现在暂存区中有一个 index.html 文件等待被提交到 Git 仓库中进行保存。可以执行 git commit 命令进行提交,其中 -m 选项后面是本次的提交消息,用来对提交的内容做进一步的描述.提交过后会出现以下

      5,对已提交的文件修改

        目前,index.html 文件已经被 Git 跟踪,并且工作区和 Git 仓库中的 index.html 文件内容保持一致。

                /*修改过的、没有放入暂存区的文件前面有红色的 M 标记。*/

     6,暂存已修改的文件

       目前,工作区中的 index.html 文件已被修改,如果要暂存这次修改,需要再次运行 git add 命令,这个命令是个多功能的命令,主要有如下 3 个功效:

① 可以用它开始跟踪新文件

② 把已跟踪的且已修改的文件放到暂存区

③ 把有冲突的文件标记为已解决状态

      7,提交已暂存的文件

             再次运行 git commit -m "提交消息" 命令,即可将暂存区中记录的 index.html 的快照,提交到 Git 仓库中进行保存:

 

8,向暂存区中一次性添加多个文件

    如果需要被暂存的文件个数比较多,可以使用如下的命令,一次性将所有的新增和修改过的文件加入暂存区:git add  .

9,取消暂存的文件

如果需要从暂存区中移除对应的文件,可以使用如下的命令:

git reset HEAD 要移出的文件名称

移除文件
从 Git 仓库中移除文件的方式有两种:

① 从 Git 仓库和工作区中同时移除对应的文件

② 只从 Git 仓库中移除指定的文件,但保留工作区中对应的文件

# 从 Git仓库和工作区中同时移除 index.js 文件
git rm -f index.js
# 只从 Git 仓库中移除 index.css,但保留工作区中的 index.css 文件
git rm --cached index.css

 


二,对z-index属性的认识

z-index

定义:一个元素在文档中的层叠顺序,用于确认元素在当前层叠上下文中的层叠级别。

适用于:定位元素。即定义了position为非static的元素

每个元素层叠顺序由所属的层叠上下文和元素本身的层叠级别决定(每个元素仅属于一个层叠上下文)。

1、同一层叠上下文

层叠级别大的显示在上面,级别小的显示在下面;

层叠级别中的两个元素,依据它们在HTML文档流中的顺序,写在后面的将会覆盖前面的。

2、不同层叠上下文

元素的显示顺序依据祖先的层叠级别来决定,与自身的层叠级别无关。

关于 z-index,你可能一直存在误区_妙趣前端的博客-CSDN博客


 三,用CSS做轮播

 

      上星期用bootstrap做了一个轮播,做的很鸡肋,从网上了解了一下用CSS做轮播。用CSS做轮播最根本用CSS的动画属性 每过 一段时间就往左平移动距离,这样下一张图片才会显示出来

详细教程

      相关链接:如何用纯css3实现轮播图_Kattem的博客-CSDN博客_css轮播图


四,响应式布局

       响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够,缺点就是CSS比较重。

       响应式设计与自适应设计的区别:响应式开发一套界面,通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容;自适应需要开发多套界面,通过检测视口分辨率,来判断当前访问的设备是pc端、平板、手机,从而请求服务层,返回不同的页面。

百分比布局

通过百分比单位,可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化,从而实现响应式的效果。Bootstrap里面的栅格系统就是利用百分比来定义元素的宽高,CSS3支持最大最小高,可以将百分比和max(min)一起结合使用来定义元素在不同设备下的宽高。

子元素的heightwidth中使用百分比,是相对于子元素的直接父元素,width相对于父元素的widthheight相对于父元素的height;子元素的topbottom如果设置百分比,则相对于直接非static定位(默认定位)的父元素的高度,同样子元素的leftright如果设置百分比,则相对于直接非static定位(默认定位的)父元素的宽度;子元素的padding如果设置百分比,不论是垂直方向或者是水平方向,都相对于直接父亲元素的width,而与父元素的height无关。跟padding一样,margin也是如此,子元素的margin如果设置成百分比,不论是垂直方向还是水平方向,都相对于直接父元素的widthborder-radius不一样,如果设置border-radius为百分比,则是相对于自身的宽度,除了border-radius外,还有比如translatebackground-size等都是相对于自身的;

从上述对于百分比单位的介绍我们很容易看出如果全部使用百分比单位来实现响应式的布局,有明显的以下两个缺点:

  • 计算困难,如果我们要定义一个元素的宽度和高度,按照设计稿,必须换算成百分比单位。
  • 从小节1可以看出,各个属性中如果使用百分比,相对父元素的属性并不是唯一的。比如widthheight相对于父元素的widthheight,而marginpadding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等,造成我们使用百分比单位容易使布局问题变得复杂。
  • https://blog.csdn.net/sinat_17775997/article/details/89087348?ops_request_misc=&request_id=&biz_id=102&utm_term=%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-89087348.nonecase&spm=1018.2226.3001.4187
  • 详细文章

标签:index,Git,轮播,文件,百分比,元素,git
来源: https://blog.csdn.net/qq_63260581/article/details/121720048

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有