
css学习
文章平均质量分 65
小婵婵不怕鬼
努力学好前端
展开
-
响应式布局
为不同尺寸的屏幕设定不同的CSS样式。原创 2023-02-23 09:40:41 · 145 阅读 · 0 评论 -
flex布局原理,常见的父项属性,flex布局子项常见属性,利用flex布局和float制作的有轮播图的携程旅行首页
3、采用flex布局的元素,称为flex容器(flexcontainer),简称“容器”,它的所有子元素自动成为容器成员,称为flex项目(flexitem),简称“项目”。flex是flexibleBox的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。1、当为父盒子设置为flex布局以后,子元素的float、clear、和vertical-align属性将失效。2、伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局。...原创 2022-07-27 15:11:51 · 506 阅读 · 0 评论 -
JS学习记录9,BOM对象,利用Navigator识别各大浏览器,History,Location,Window,切换图片练习,定时器的应用,轮播图
这些BOM对象在浏览器中都是作为window对象的属性保存的,可以通过window对象来使用,也可以直接使用。(用时小写)由于历史原因,Navigator对象中的大部分属性都已经不能帮助识别浏览器了,一般只会使用userAgent来判断浏览器的信息。注:在IE11中已经将微软和IE相关的标识都已经去除了,所以基本已经不能通过UserAgent来识别一个浏览器是否是IE了,可以通过浏览器中特有的对象来判断浏览器的信息。比如:ActiveXObject注意!!现在该方法已失效!!!以下是最新的方式:His原创 2022-07-13 02:03:05 · 247 阅读 · 0 评论 -
是否读取协议完毕练习HTML和CSS部分代码
是否读取协议完毕练习HTML和CSS部分代码CSS部分:HTML部分:效果图:JS部分代码在JavaScript专栏里。原创 2022-07-10 23:43:04 · 269 阅读 · 0 评论 -
增加删除员工HTML和CSS部分
增加删除员工HTML和CSS部分效果图:JS部分在javasript专栏里。原创 2022-07-10 19:53:48 · 154 阅读 · 0 评论 -
利用html和CSS制作的鲜花市场首页
顶部区域部分代码:广告区域:最后效果静态图:视频里有动态效果视频,源代码在资料里原创 2022-07-08 16:37:40 · 359 阅读 · 0 评论 -
CSS学习记录10/背景图片定位/多重背景图片/多重背景图片练习/CSS书写格式
什么是背景尺寸属性?专门用于设置背景图片大小的属性。例:背景图片定位:告诉系统背景图片从哪里开始显示。例:背景绘制区域:专门用于控制从哪个区域开始绘制背景。默认情况下,背景颜色是从border开始绘制,可以用background-clip: 取值;来指定。取值:border-box 、padding-box、content-box多重背景图片:多张背景图片用逗号隔开例:注意点:1、先添加的背景图片会盖住后添加的背景图片。2、建议在编写多重背景时拆开编写。例:练习:结果:原创 2022-07-04 15:52:59 · 409 阅读 · 0 评论 -
CSS学习记录9/3D的正方体的两种编写方式/3D长方体的编写方式/3D动画/3D播放器
什么是2D什么是3D?2D就是一个平面,只是宽度和高度,没有厚度。3D就是一个立体,有宽度有高度,还有厚度。默认情况下所有的元素都是呈2D展现的。如何让某个元素呈3D展现?和透视一样,只需给该元素的父元素添加一个transform-style属性,然后设置为preserve-3d即可。正方体第一种方案:正方体第二种方案:前后上下内容不会翻转。如何做一个长方体?先做一个正方体,给需要拉宽的面设置scale参数。例:scale(1.5,1)3D动画:效果:3D播放器:结果:动画在主页视原创 2022-07-02 01:25:38 · 314 阅读 · 0 评论 -
CSS学习记录8.2/2D转换模块/照片墙/翻转菜单练习/动画三要素/动画的其他属性/创建动画的两种形式/云层动画/无限循环滚动练习
2D转换模块:transform: rotate(45deg);旋转,deg是单位度,代表旋转多少度。transform: translate(-100px,50px);平移, 第一个参数水平方向,第二个参数垂直方向。transform: scale(1.5,1.5);缩放,取值为1不变,大于1代表放大,小于1代表缩小, 第一个参数水平方向,第二个参数垂直方向。如果水平参数与垂直参数一样可以写为一个参数。注意点:1、如果需要进行多个转换用空格隔开。2、2d的转换会修改元素的坐标系,所以旋转之后再原创 2022-07-01 16:24:31 · 245 阅读 · 0 评论 -
CSS学习记录8/a标签的伪类选择器/弹性效果/手风琴效果
a标签存在一定的状态:1、默认状态,从未被访问过2、被访问过3、鼠标悬停在a标签上的状态4、鼠标长按a标签的伪类选择器:专门用来修改a标签不同状态的样式的。:link修改从未被访问过状态下的样式:visited修改被访问过的状态下的样式:hover用来修改鼠标悬停在a标签上的状态的样式:active专门用来修改鼠标长按状态下的样式注意点:1、a标签的伪类选择器可以单独出现也可以一起出现。2、a标签的伪类选择器如果一起出现,那么有严格的顺序要求。爱恨原则love hate3、如果默认状态原创 2022-06-30 16:51:05 · 527 阅读 · 0 评论 -
CSS学习记录7/定位流分类/相对定位与绝对定位配合使用案例/焦点图/z-index属性/从父现象
1、相对定位2、绝对定位3、固态定位4、静态定位什么是相对定位?相对定位就是相对于子以前在标准流中的位置来移动。相对定位的注意点:1、相对定位不脱离标准流,会继续在标准流中占用一份空间。2、position: relative;需要配合top、right、left、bottom来使用。3、同一个方向上的定位属性只能使用一个。4、由于相对定位不脱离标准流,所以相对定位中区分行内元素、块级元素和行内款及元素。5、由于相对定位不脱离标准流,并且相对定位的元素会占用标准流的位置,所以相对定位的元素原创 2022-06-30 13:31:27 · 406 阅读 · 0 评论 -
CSS学习记录6.2/清楚浮动的几种方式/网易注册界面还原
浮动元素的高度问题:1、在标准流中内容的高度可以撑起父元素的高度2、在浮动流中浮动元素是不可以撑起父元素的高度。清除浮动方式:1、给前面一个父元素设置高度,在企业开发中,我们能不写高度就不写高度,所以这种方式用得较少。2、给后面的盒子添加clear属性。none 默认取值,按照浮动元素的排序规则来排序(左浮动找左浮动,右浮动找右浮动)left 不要找前面左浮动的元素。right 不要找前面的右浮动的元素both 不要找前面左浮动和右浮动的元素注意点:当给某个元素添加clear属性之原创 2022-06-29 01:32:36 · 181 阅读 · 0 评论 -
CSS学习记录6/标准流排版方式/浮动流排版方式/网页布局方式/网页布局案例
什么是网页的布局方式?网页的布局方式其实是就是指浏览器是如何对网页中的元素进行排版的。(1)默认的排版方式就是标准流排版方式。(2)在CSS中将元素分为三类,分别为块级元素/行内元素/行内块级元素(3)标准流中如果元素是块级元素就会垂直排版和如果元素是行内元素和行内块级元素水平排版(1)浮动流是一种“半脱离标准流”的排版方式(2)浮动流就一种排版方式,就是水平排版,它只能设置某个元素的左对齐或右对齐,没有居中对齐,即没有center这个取值。(3)在浮动流中不可以使用margin:0 auto;的原创 2022-06-26 19:50:33 · 414 阅读 · 0 评论 -
CSS学习记录5/什么是CSS盒子模型/为什么清空默认边框/什么是行高/文字界面还原案例
仅仅是一个形象的比喻,CSS里面的标签都是一个盒子。结论:在HTML中所有的标签都可以设置宽度、高度:即指定存放内容的区域内边距:填充物边框:盒子自身外边距:盒子与盒子之间的间隙内容的宽度和高度:就是通过标签的width和height属性设置的宽度和高度。元素的宽度和高度:宽度=左边边框+左内边距+width+右内边距+右边框 高度同理可证。元素空间的宽度和高度:宽度:左外边框+左边框+左内边距+width+右内边距+右边框+右外边距 高度同理可证。原创 2022-06-25 14:05:47 · 54 阅读 · 0 评论 -
CSS学习记录4/什么是边框/利用边框画倒三角/什么是内边距/什么是外边距/外边距合并现象
边框就是围绕在标签宽度和高度周围的线条。边框样式取值:连写格式:1、同时设置四条边的边框border:边框的宽度 边框的样式 边框的颜色:缩写格式例:连写快捷键:bd+注意点:连写格式颜色可以省略,默认为黑色;样式不能省略,省略之后就看不见边框了;宽度可以省略,仍可看到边框。2、分别设置四条边的边框border-top:边框的宽度 边框的样式 边框的颜色: bt+border-right:边框的宽度 边框的样式 边框的颜色: br+border-bottom:边框的宽度原创 2022-06-23 19:29:44 · 214 阅读 · 0 评论 -
CSS学习记录3.2/设置标签的背景颜色/控制背景图片的平铺方式/控制背景图片的位置/背景图片关联方式/背景图片和插入图片的区别/捕鱼达人背景练习/精灵图
CSS中的background-color:属性,就是专门用来设置标签。bc+table设置背景图片:CSS中的background-image: url( );的属性就是设置背景图片的。bi+table注意点:1、图片地址必须放在url()中,图片的地址可以是本地的地址,也可以是网络的地址。2、如果图片的大小没有标签的大小大,那么会自动水平和垂直方向平铺和填充。3、如果网页上出现了图片,那么浏览器会再次发送请求获取图片。在CSS中background-repeat属性可以控制平铺方式。 bgr原创 2022-06-22 22:13:03 · 441 阅读 · 0 评论 -
CSS学习记录3/块级元素/行内元素/行内块级元素/百度首页制作
div标签:一般用于配合CSS完成网页的基本布局。span标签:一般用于配合CSS修改网页中的局部信息。div和span的区别:1、div会单独的占领一行,而span不会单独占领一行。2、div是一个容器级别的标签,而span是一个文本级别的标签。容器级的标签和文本级的标签有什么区别?容器级的标签可以嵌套其他所有的标签,而文本级的标签只能嵌套文字、超链接、图片。容器级标签:div h ul ol dl li dt dd ···文本级的标签:span p buis stong em ins del原创 2022-06-22 16:57:12 · 224 阅读 · 0 评论 -
CSS学习记录2.2/继承性/层叠性/优先级/important/优先级权重
给父元素设置一些属性,子元素也可以使用。注意点:1、并不是所以属性都可以继承,只有以color、font-、text-、line开头的属性才可以继承。2、在CSS的继承中不仅仅是儿子可以继承,只要是后代都可以继承。3、CSS继承性中的特殊性。(1)a标签中的文字颜色和下划线是不能继承的。(2)h标签的文字大小是不能继承的。应用场景:一般用于设置网页上的共性信息,例如网页的文字颜色。开发者工具快捷键f12。就是CSS处理冲突的一种能力。注意点;层叠性只有多个选择器选中同一标签并且同时设置了相原创 2022-06-21 20:00:05 · 142 阅读 · 0 评论 -
CSS学习记录2/交集选择器/并集选择器/兄弟选择器/序选择器/属性选择器/通配符选择器
给所有选择器选中的标签中,相交的那部分设置属性。格式:注意点:1、选择器与选择器之间没有任何连接符号。2、选择器可以使用标签名称、id名称、class名称。给所有选择器选中的标签设置属性。格式:注意点:1、并集U型安泽奇必须使用,来连接。2、选择器可以使用标签名称、id名称、class名称。1、相邻兄弟选择器(css2)给指定选择器后面紧跟的那个选择器选中的标签设置属性。格式:注意点:(1)相邻兄弟选择器必须通过+连接。(2)相邻兄弟选择器只能选中紧跟其后的标签,不能选中被隔开的标原创 2022-06-21 15:55:16 · 203 阅读 · 0 评论 -
CSS学习记录1.2/标签选择器/id选择器/类选择器/后代选择器/子元素选择器
根据指定的标签名称,在当前界面中找到该名称的标签,然后设置属性。格式:注意点:1、标签选择器选择的是当前页面所有的标签,不能单独选中某一个标签。2、标签选择器无论标签藏的多深都能选中。3、只要是HTML中的标签就可以作为标签选择器。根据指定的id名称找到对应的标签,然后设置属性。格式:1、每个HTML标签,都有一个属性叫做id,每一个标签都可以设置id。2、在同一个界面中id的名称是不可以重复的。3、在编写id选择器时一定要在id前加上#。4、id的名称只能由字母、数字、下划线组成,不能原创 2022-06-20 22:04:58 · 1633 阅读 · 0 评论 -
CSS学习记录/文本样式、装饰、对齐、粗细、字体、颜色等的控制。
格式:注意点:1、CSS必须写在style标签里面,style标签必须写在head标签内。2、style标签内的type属性其实可以不用写,默认为type=“text/css”。3、设置样式时必须按照固定的格式来设置。key: value;文字样式:font-style:normal:正常的 快捷键 :fsn+tableitalic:倾斜的 快捷键:fs+table文字粗细:font-weight: 快捷键:fw+table单词取值:bold:加粗。快捷键:fwb+table原创 2022-06-20 18:23:29 · 330 阅读 · 0 评论