地图 是 一张 png 格式的 半透明 背景图片 , 图片大小为 747 x 617 像素 ;
设置图片自适应 : 设置的图片可能 大于或小于 图片容器 , 设置其宽度填充 100% 父容器 , 可以保证图片填充满父容器 ;
包含块( containing block ) 正常情况下: 包含块就是离当前元素最近的祖先块元素,
前面铺垫写了不少HTML、CSS、Photoshop的文章,那么本篇章就是要结合起来挑战写写京东的商城首页了。
这里要 在一个 div 盒子上方套一层遮罩 , 遮罩就需要 使用绝对定位将其覆盖到其它元素中 ;
网上有很多这方面的教程,但不是苦涩难懂就是从哪copy过来的,反正很长一段时间我是没看懂,时间长了也没打算去研究了,主要原因是,基本上很少会遇到那些问题(所以说啊,要是没有研究精神的才懒得管它)。但自从开始研究CSS以后就一发不可收拾,所以打算把CSS一系列的东西都给研究一遍,当然能研究懂自然是好的,不能就当自娱自乐了。话说这个层叠顺序和堆栈上下文没啥用对吧,你看我就是不学它,平时也没出什么问题。 …… 想让它出问题也很简单,不过既然你都说没用了,也就不打算告诉你了。 本篇属于短话长说型,前半部分比较简单,
在调试模式下 , 该父容器的尺寸为 390 x 44 像素 , 该父容器的高度是 44 像素 ;
(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)
一个div块级元素没有为其设置宽度和高度,浏览器会为其分配可使用的最大宽度(比如全屏宽度),但是不负责分配高度,块级元素的高度是由子元素堆砌撑起来的。那么,html和body标签的高度也都是由子级元素堆砌撑起来的。
《2》。对于绝对定位:对于上面的浮动的div1,div2,div3,我们还可以通过绝对定位对其进行设置。如:
若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证。
实现逻辑是 设置 元素的 animation-timing-function 动画属性 , 使用 steps(n) 属性值指定动画步长 ;
相对定位就是移动一个标签,根据什么来移动呢?对了,就是根据它原来的位置移动,就这么简单。比如,我现在要移动这块场地,就这样做:
1、CSS的三种定位机制 CSS 规定的定位机制有三种,分别是: 标准文档流(Normal flow): 特点:从上到下,从左到右,输出文档内容。由块级元素(块级元素特点:从左到右撑满页面,独占一行,触碰到页面边缘时,会自动换行)和行级元素(块级元素特点: 在同一行内显示,不会改变HTML文档结构 )组成。 浮动(Floats) 绝对定位(Absolute positioning) 言下之意就是网页布局和元素的定位都离不开这三种机制。 2、什么是W3C标准 W3C标准,是由万维网联盟制定的一系列标准,
2、父元素要有定位 —- 父元素在标准六中的位置 + 边偏移属性 来设置 元素的位置
在上一篇博客中 , 实现了 搜索栏 , 在本篇博客开始实现 搜索栏 下方的 Banner 栏 ;
A . 此时 div 和 span 属于并列关系
div层、span层等html标签层重叠顺序样式z-index,平时CSS使用较少,但也会难免会碰到CSS z-index使用。
首先,使用::before和::after伪类,在button的前后添加两个伪元素 一个width=0,height=2px;另一个height=0,width=2px
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。
作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。
对于每一位网页设计者来说,都应该知道 HTML、因为它是所有网页制作的基础。但是如果希望网页能够美观、大方、并且升级方便、维护轻松,那么仅仅知道 HTML 语言是不够的,CSS 在这中间扮演者重要角色。CSS (Cascading Style Sheet)叠层样式表。主要是用来进行页面的版面布局和外观样式的美化。能够将结构html和样式css分离书写,简化代码,提高可阅读性。
设定行高是垂直居中最简单的方式,适用于“单行”的“行内元素”(inline,inline-block),例如单行的标题,或者已经设置inline-block属性的div,若将line -height设成和高度相同的数值,则内容的行内元素就会被垂直居中,因为是行高,所以会在行内元素的上下都加上行高的1/2,所以就垂直居中了!不过由此就可以抛光,为什么必须要单行的行内元素,因为如果多行,第二行与第一行的间隔会变超大,就不是我们所期望的效果了。CSS示例:
1.3 中间区域盒子中使用无序列表进行排放图片,并且每个图片可以作为一个链接进行点击
CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
值: (1)、normal(正常);bold(加粗);(<==常用) (2)、纯数字:100~900的整百数;
将布局中的 三个 链接图片 , 放置在 单独的 标签中 , 每个 标签中放置一个 链接标签 , 在 链接标签中包裹一个 图片 ;02css让div居中显示_css页面居中给父级div设置相对定位,子元素div设置绝对定位,left、right、top、bottom都设置为0,然后将margin设置为auto即可实现。05CSS中常见的BUG调试拥有布局的元素负责自身及其子元素的尺寸及定位,而没有布局的元素仅仅能依靠近期的祖先元素进行控制。01CSS 笔记 盒模型和布局方式子元素全部设置浮动,导致父元素高度为0,影响父元素背景色和背景图片展示,影响页面布局01【动画消消乐】HTML+CSS 自定义加载动画 064(currentColor的妙用!)在这里设置了span的color属性为白色,所以背景色也就是color属性的值:白色03CSS3入门https://www.runoob.com/css/css-tutorial.html01Day6:html和cssDay6:html和css 复习 达叔与他的朋友们-复习.png margin: 0; padding: 0; 效果 <!DOCTYPE html> <html lang="en"> <head>03【移动端网页布局】流式布局案例 ⑥ ( 多排按钮导航栏 | 设置浮动及宽度 | 设置图片样式 | 设置文本 )该导航栏的宽度自动充满整个屏幕 , 宽度为 100% , 高度也不需要设置 , 设置自适应即可 ;04HTML+CSS高级第一章 一、内联块 display: inline-block; 1、特征: 1.1 块级元素在一行显示 (得到内联元素的属性) 1.2 内联元素支持宽高 (得到块的属性) 1.3 没有宽度的时候,内容撑开宽度 (得到内联元06angular浏览器兼容性问题解决方案原因:ng-zorro-antd表格组件使用nzLeft和nzRight指令固定的表格列,这两个指令的实现css3中的标签:03CSS隐藏元素的几种方式回流:当我们修改元素的几何位置属性,如宽度、高度时,浏览器会重新布局,这个过程就叫回流02【CSS】定位 ③ ( 绝对定位 | 父容器有定位相对于父容器定位 | 父容器没有定位相对于浏览器进行定位 )上述 父容器 的定位 不一定是 绝对定位 , 其它类型的定位也可以 , 在本博客的示例中 , 使用的就是 相对定位 ;02网页元素居中的n种方法根据场景分析提出的一些假设,我们试着去建立对应的模型,下面是分别根据上面的三个场景设计的相关模型。04「HTML+CSS」--自定义加载动画【020】注:这里用黄颜色作为了span::before的背景色是为了便于演示,实际色与全局背景色保持一致04Web前端基础(04)本节所有代码: https://download.csdn.net/download/qq_44273429/12729675 注:代码中的图片路径为我本地路径,可自行上传图片,更改图片所在路径即可,有疑惑可以问我 未完待续,,, 下一节:Web前端基础(05)02前端-CSS3 中的层叠上下文初探前言:关于层叠上下文,笔者还没有去阅读更详细的 W3C 规范来了解更本质的原理(表打我,等我校招拿到 offer 了我就读好伐 T_T)。一直听说 CSS3 里的层叠上下文有新情况,但没找到很好的参考资料,故自己实战一把。鉴于笔者水平有限,如有任何遗漏或者错误,则恳请读者斧正。02css(2)font-family可以将多个字体名保存起来,如果浏览器不支持第一个字体会依次尝试后面的字体。02CSS 巧用 :before和:after前几天的晚上较全面的去看了下css的一些文档和资料,大部分的样式运用都没什么大问题了,只是有些许较陌生,但是也知道他们的存在和实现的是什么样式。今天主要想在这篇学习笔记中写的也不多,主要是针对:before和:after写一些内容,还有几个小样式略微带过的介绍下。 什么是:before和:after? 该如何使用他们? :before是css中的一种伪元素,可用于在某个元素之前插入某些内容。 :after是css中的一种伪元素,可用于在某个元素之后插入某些内容。 下面我们先跑个简单的代码测试下效果:03css属性详解一、字体属性 字体 font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。 body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif } 大小 可以通过font-size来说设置字体大小的像素值,如果设置成inherit表示继承父元素的字体大小值。 p { font-size: 16px; } 字重(粗细)010【CSS】使用 z-index 属性值控制定位盒子的堆叠顺序 ( 多个盒子堆叠次序问题 | z-index 属性值简介 | 控制盒子堆叠次序 )在 网页布局 中 , 如果 多个盒子都设置 绝对定位 , 那么这些盒子会堆叠在一起 ;02掌握这4 个关键的 CSS 属性,你才算入门 CSS英文 | https://javascript.plainenglish.io/4-key-css-properties-explained-in-4-minutes-9567d1b5af8603CSS实现自适应分隔线的N种方法https://github.com/XboxYan/notes/issues/1202【CSS】510- CSS实现自适应分隔线的N种方法主要原理是设置文本居中text-align: center;,然后给定两个伪元素,分别绝对定位,那么此时伪元素也是跟随着水平居中的,设置足够的宽度,然后把左边的往左位移100%就可以了,父级记得超出隐藏。01【移动端网页布局】流式布局案例 ⑦ ( 水平排列的图片链接 2 | 浮动设置 | 盒子模型类型设置 | 结构伪类选择器 )使用 标签作为父盒子 , 其中容纳三个 链接 标签 , 每个链接标签中包含一个 标签 ;04
给父级div设置相对定位,子元素div设置绝对定位,left、right、top、bottom都设置为0,然后将margin设置为auto即可实现。
拥有布局的元素负责自身及其子元素的尺寸及定位,而没有布局的元素仅仅能依靠近期的祖先元素进行控制。
子元素全部设置浮动,导致父元素高度为0,影响父元素背景色和背景图片展示,影响页面布局
在这里设置了span的color属性为白色,所以背景色也就是color属性的值:白色
https://www.runoob.com/css/css-tutorial.html
Day6:html和css 复习 达叔与他的朋友们-复习.png margin: 0; padding: 0; 效果 <!DOCTYPE html> <html lang="en"> <head>
该导航栏的宽度自动充满整个屏幕 , 宽度为 100% , 高度也不需要设置 , 设置自适应即可 ;
第一章 一、内联块 display: inline-block; 1、特征: 1.1 块级元素在一行显示 (得到内联元素的属性) 1.2 内联元素支持宽高 (得到块的属性) 1.3 没有宽度的时候,内容撑开宽度 (得到内联元
原因:ng-zorro-antd表格组件使用nzLeft和nzRight指令固定的表格列,这两个指令的实现css3中的标签:
回流:当我们修改元素的几何位置属性,如宽度、高度时,浏览器会重新布局,这个过程就叫回流
上述 父容器 的定位 不一定是 绝对定位 , 其它类型的定位也可以 , 在本博客的示例中 , 使用的就是 相对定位 ;
根据场景分析提出的一些假设,我们试着去建立对应的模型,下面是分别根据上面的三个场景设计的相关模型。
注:这里用黄颜色作为了span::before的背景色是为了便于演示,实际色与全局背景色保持一致
本节所有代码: https://download.csdn.net/download/qq_44273429/12729675 注:代码中的图片路径为我本地路径,可自行上传图片,更改图片所在路径即可,有疑惑可以问我 未完待续,,, 下一节:Web前端基础(05)
前言:关于层叠上下文,笔者还没有去阅读更详细的 W3C 规范来了解更本质的原理(表打我,等我校招拿到 offer 了我就读好伐 T_T)。一直听说 CSS3 里的层叠上下文有新情况,但没找到很好的参考资料,故自己实战一把。鉴于笔者水平有限,如有任何遗漏或者错误,则恳请读者斧正。
font-family可以将多个字体名保存起来,如果浏览器不支持第一个字体会依次尝试后面的字体。
前几天的晚上较全面的去看了下css的一些文档和资料,大部分的样式运用都没什么大问题了,只是有些许较陌生,但是也知道他们的存在和实现的是什么样式。今天主要想在这篇学习笔记中写的也不多,主要是针对:before和:after写一些内容,还有几个小样式略微带过的介绍下。 什么是:before和:after? 该如何使用他们? :before是css中的一种伪元素,可用于在某个元素之前插入某些内容。 :after是css中的一种伪元素,可用于在某个元素之后插入某些内容。 下面我们先跑个简单的代码测试下效果:
一、字体属性 字体 font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。 body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif } 大小 可以通过font-size来说设置字体大小的像素值,如果设置成inherit表示继承父元素的字体大小值。 p { font-size: 16px; } 字重(粗细)
在 网页布局 中 , 如果 多个盒子都设置 绝对定位 , 那么这些盒子会堆叠在一起 ;
英文 | https://javascript.plainenglish.io/4-key-css-properties-explained-in-4-minutes-9567d1b5af86
https://github.com/XboxYan/notes/issues/12
主要原理是设置文本居中text-align: center;,然后给定两个伪元素,分别绝对定位,那么此时伪元素也是跟随着水平居中的,设置足够的宽度,然后把左边的往左位移100%就可以了,父级记得超出隐藏。
使用 标签作为父盒子 , 其中容纳三个 链接 标签 , 每个链接标签中包含一个 标签 ;04
领取专属 10元无门槛券
手把手带您无忧上云