html
文章平均质量分 87
叶子yes
前端学习之旅,期待你的加入
展开
-
grid网格布局
flex布局布局和grid布局的本质区别在于:布局是一维布局,一次只能处理一个维度上的布局,也就是行或者列;而布局是二维布局,它将容器划分为行和列,形成一个个单元格,然后我们就可以指定我们的 “ 项目 ” 所占的单元格,形成我们想要的布局。比如,下面的布局我们就可以使用grid布局轻松实现:1、display 属性 生成块级的网格容器 生成行内的网格容器使用 display:grid; 容器是块级元素:使用 display:inline-grid; 容器是行内块元素:...原创 2022-08-06 23:30:26 · 1248 阅读 · 2 评论 -
使用HTML和CSS实现京东首页(完整代码)
本次案例使用了HTML和CSS对京东网站的首页进行了重构,页面效果如下:HTML页面结构部分的代码:CSS样式代码:源码已经在Gitee上开源,欢迎大家下载:https://gitee.com/goodyezi/jd-static-page.git原创 2022-07-31 22:00:02 · 1314 阅读 · 2 评论 -
【小案例】使用CSS过渡制作手风琴
我们需要做的就是当鼠标移入图片时,先让所有图片宽度变小,再让当前图片宽度变大,然后再利用CSS过渡效果,就可以完美实现上面的效果了。/*移入ul后,li宽度变小*//*移入的当前的li宽度变大*/这是实现手风琴效果的灵魂。......原创 2022-07-27 18:55:28 · 635 阅读 · 0 评论 -
CSS过渡
CSStransitions提供了一种在更改CSS属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程,而不是立即生效的。比如,将一个元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用CSStransitions后该元素的颜色将逐渐从白色变为黑色,按照一定的曲线速率变化。这个过程可以自定义。要实现这一点,必须规定两项内容1.指定要添加效果的CSS属性2.指定效果的持续时间。......原创 2022-07-27 17:08:16 · 302 阅读 · 0 评论 -
flex布局
布局的传统解决方案,基于盒模型,依赖display属性+position属性+float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex是FlexibleBox的缩写,意为“”,用来为盒状模型提供最大的灵活性。。...原创 2022-07-27 15:38:32 · 22478 阅读 · 0 评论 -
CSS定位
上面文字比较多,下面进行简单总结一下1、静态定位static默认值2、相对定位relative相对元素当前位置进行定位,不脱离文档流3、绝对定位absolute相对最近有定位的祖先元素进行定位(如果都没有定位,则相对body进行定位),脱离文档流4、固定定位fixed相对浏览器视口进行定位,脱离文档流5、粘滞定位stickyrelative+fixed,相对定位达到阈值就是固定定位,不脱离文档流当元素移动到top=0的位置时,使用固定定位,固定在top=0的位置上。...原创 2022-07-25 16:36:41 · 451 阅读 · 0 评论 -
CSS浮动布局以及BFC布局的介绍
标准流也称为文档流或者普通流。标准流处在网页的最底层,它表示的是一个页面中的位置,我们所创建的元素默认都处在标准流中。浏览器默认的排版方式就是标准流的排版方式。在标准流中有两种排版方式,一种是垂直排版,一种是水平排版垂直排版,如果元素是块级元素,那么就会垂直排版;水平排版,如果元素是行内元素或者行内块级元素,那么就会水平排版。...原创 2022-07-23 11:44:14 · 374 阅读 · 0 评论 -
CSS盒模型
每一个可见的HTML元素都是一个盒子,一个盒子由外到内可以分成四个部分margin(外边距)、border(边框)、padding(内边距)以及content(内容)盒子高度height【contentHeight+borderTop+borderBottom+paddingTop+paddingBottom】盒子宽度width【contentWidth+borderLeft+borderRight+paddingLeft+paddingRight】(上10px,左右20px,下30px)...原创 2022-07-22 23:30:55 · 259 阅读 · 0 评论 -
px和em和rem的区别
可以看出padding变成了28px,所以em设置的值不是固定的,会随当前元素的字体大小的变化而变化。可以看出,padding仍然是20px,所以rem相对的是html元素的字体大小而言的。px是像素单位,是相对屏幕宽高度而言,一旦设定就无法随浏览器尺寸的改变而改变。可以看出默认1em=16px(因为默认字体大小为16px)rem也是一个相对长度单位,相对的是html元素的字体大小而言的。示例设置padding为30px,宽高100px。em是相对长度单位,相对当前元素的字体大小而言。...原创 2022-07-21 20:11:04 · 445 阅读 · 0 评论 -
CSS选择器
CSS英文全称为Cascading Style Sheets,即层叠样式表,是一个用于修饰文档(可以是标记语言HTML,也可以是XML或者SVN)的语言,可以将文档以更优雅的形式呈现给用户。CSS选择器的优先级:1、!important (优先级最高)2、style内联样式 (权值1000) 3、id选择器 (权值 100) 4、类选择器、伪类选择器、属性选择器 (权值 10) 5、标签选择器、伪元素选择器 (权值 1) 6、通配符选择器、复合选择器(.原创 2022-07-20 18:15:46 · 224 阅读 · 0 评论 -
案例:使用HTML中的 table 标签制作一份个人简历
一、使用到的知识点这个小案例中主要使用到的知识点是表格标签中单元格的合并,还使用到了一些表格标签里面的属性,比如宽高属性、水平对齐属性,还有表格边框的设置和合并等。二、单元格合并知识点解释1、水平方向上的单元格合并可以给td标签添加一个colspan属性, 来指定把某一个单元格当做多个单元格来看待(水平方向)例如:含义: 把当前单元格当做两个单元格来看待注意:由于把某一个单元格当做了多个单元格来看待, 所以就会多出一些单元格, 所以需要删掉一些单元格才能正常显示.一定要记住单元格...原创 2022-07-18 19:35:56 · 1320 阅读 · 0 评论 -
HTML功能元素——列表、表格、表单
表格标签:1、表格边框表格标签有一个border边框属性, 这个属性决定了边框的宽度。默认情况下这个属性的值是0, 所以看不到边框。我们可以在 table 里面设置 border=“1” ,就可以看到边框了(这里不用写单位)2、宽度和高度(默认是按照内容的尺寸来调整的)可以给table标签和td标签使用给table设置:设置的是整个表格的宽高;给td设置:设置的是当前单元格的宽高3、水平对齐和垂直对齐属性水平对齐 可以给 table 标签和 tr 标签和 td 标签使用垂直对齐 只能给 t原创 2022-07-18 16:45:26 · 643 阅读 · 0 评论 -
HTML语法和标签
HTML它不是一种编程语言,而是一种,用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。HTML也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如文字如何处理,画面如何安排,图片如何显示等)。......原创 2022-07-15 19:42:03 · 373 阅读 · 0 评论