- 博客(28)
- 收藏
- 关注
RSS订阅原创 CSS高级应用2
CSS 的 vertical-align 属性使用场景: 经常用于设置图片或者表单(行内块元素)和文字垂直对齐官方解释: 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
2024-05-28 20:27:01
909
原创 CSS高级技巧
1、精灵图主要针对于小的背景图片使用,2、主要借助于背景位置来实现-background-position。3、一般情况下精灵图都是负值。(千万注意网页中的坐标:x轴右边走是正值，左边走是负值， y轴同理。网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。height:0;1、我们用css 边框可以模拟三角效果2、宽度高度为03、我们4个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为3、我们4个边框都要写。
2024-05-28 20:17:16
560
原创 CSS定位（2）
定位模式是否脱标移动位置是否常用static 静态定位否不能使用边偏移很少relative 相对定位否(占有位置)相对于自身位置移动基本单独使用absolute绝对定位是(不占有位置)带有定位的父级要和定位父级元素搭配使用fixed 固定定位是(不占有位置)浏览器可视区单独使用，不需要父级sticky 粘性定位否(占有位置)浏览器可视区当前阶段少。
2024-05-28 20:03:09
790
原创 CSS定位
场景1: 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子场景2:当我们滚动窗口的时候，盒子是固定屏幕某个位置的。结论:要实现以上效果，标准流 或 浮动都无法快速实现所以:1.浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
2024-05-28 19:51:01
840
原创 CSS清除浮动
(1)清除浮动本质是?清除浮动的本质是清除浮动元素脱离标准流造成的影响(2)清除浮动策略是?闭合浮动.只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子(3)额外标签法?隔墙法,就是在最后一个浮动的子元素后面添加一个额外标签,添加 清除浮动样式实际工作可能会遇到,但是不常用为什么需要清除浮动?①父级没高度。②子盒子浮动了。③影响下面布局了，我们就应该清除浮动了清除浮动的方式优点缺点额外标签法(隔墙法)通俗易懂，书写方便添加许多无意义的标签结构化较差。
2024-05-28 15:32:34
213
原创 CSS浮动
foat 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。属性值描述none元素不浮动(默认值)left元素向左浮动right元素向右浮动。
2024-05-28 15:20:33
343
原创 CSS阴影
CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。注意:1、默认的是外阴影(outset),但是不可以写这个单词,否则造成阴影无效2、盒子阴影不占用空间，不会影响其他盒子排列。
2024-05-28 15:08:54
205
原创 CSS三大特性
相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题。层叠性原则:·样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式·样式不冲突，不会层叠。
2024-05-28 14:41:14
330
原创 CSS背景
属性作用值背景颜色预定义的颜色值/十六进制/RGB代码背景图片url(图片路径)是否平铺背景位置length|position 分别是x和y坐标背景附着scroll(背景滚动) /fixed (背景固定)背景简写书写更简单背景颜色背景图片地址背景平铺背景滚动背景位置背景色半透明背景颜色半透明后面必须是四个值。
2024-04-17 19:58:59
1219
原创 CSS的元素
元素模式元素排列设置样式默认宽度包含块级元素一行只能放一个块级元素可以设置宽度高度容器的100%容器级可以包含任何标球行内元素一行可以放多个行内元素不可以直接设置宽度高度它本身内容的宽度容纳文本或则其他行内元素行内块元素一行放多个行内块元素可以设置宽度和高度它本身内容的宽度学习元素显示模式的主要目的就是分清它们各自的特点，当我们网页布局的时候在合适的地方用合适的标签元素。
2024-04-17 19:34:45
211
原创 CSS的学习
Emmet语法的前身是Zen coding,它使用缩写来提高html/css的编写速度,Vscode内部已经集成该语法。在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素(标签）常用的复合选择器包括: 后代选择器、子选择器、并集选择器、伪类选择器等等选择器作用特征使用情况隔开符号及用法后代选择器用来选择后代元素。
2024-04-17 19:26:30
446
原创 CSS样式表
实际开发都是外部样式表.适合于样式比较多的情况核心是:样式单独写到CSS文件中，之后把CSS文件引入到 HTML 页面中使用。由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用。内部样式表(内嵌样式表)是写到html页面内部是将所有的CSS代码抽取出来，单独放到一个<style> 标签中。使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式。通过此种方式，可以方便控制当前整个页面中的元素样式设置。
2024-04-17 19:10:07
264
原创 CSS文本属性
em 是一个相对单位，就是当前元素 (font-size)1个文字的大小如果当前元素没有设置大小，则会按照父元素的1 个文字大小.line-height 属性用于设置行间的距离 (行高)。可以控制文字行与行之间的距离。text-align属性用于设置元素内文本内容的水平对产方式。行高的文本分为上间距文本高度下间距=行间距。color 属性用于定义文本的颜色。
2024-04-17 18:56:54
103
原创 css字体属性
属性表示注意点font-size字号我们通常用的单位是px像素，一定要跟上单位字体实际工作中按照团队约定来写字体字体粗细记住加粗是700或者bold，不加粗是normal或者400记住数字不要跟单位font-style字体样式记住倾斜是italic，不倾斜是normal工作中我们最常用normal。
2024-04-17 18:48:18
145
原创 CSS基础选择器
基础选择器作用特点使用情况用法标签选择器可以选出所有相同的标签比如p不能差异化选择较多类选择器可以选出1个或者多个标签可以根据需求选择非常多id选择器一次只能选择1个标签ID属性只能在每个HTML文档中出现一次一般和js搭配通配符选择骗选择所有的标签选择的太多，有部分不需要特殊情况使用选择器权重id=100;class=10;标签=1;*(通配符)=0。
2024-04-09 09:14:52
1512
原创 HTML中的框架集
1.不能写到body内2.按照百分比分割3.src是frame的固定属性可引入网页等元素4.frameset的两个属性cols是列分割rows是行分割。
2024-04-09 08:42:44
146
原创 HTML表单元素
label> 标签为 input 元素定义标注 (标签)。<label> 标签用于绑定一个表单元素,当点击<label> 标签内的文本时浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。核心: <label> 标签的 for 属性应当与相关元素的 id 属性相同。
2024-03-18 09:33:21
299
原创 列表的标签
标签用于定义描述列表(或定义列表)，该标签会与<dt> (定义项目名字)和<dd>(描述每一个项目/名字)一起使用。<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>
2024-03-18 09:32:40
460
原创 HTML标签的认识
首页</a>。2)找到目标位置标签，在里面添加一个id属性=刚才的名字，如<h3 id=two'>吴彦祖介绍</h3>a.外部链接:例如:<a href=`http://www.baidu.com`>百度</a>在html标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。c.空链接:如果当时没有确定链接目标时，<a href='#>首页
2024-03-12 14:16:09
328
原创 HTML标签的认识
b.页面中的图片会非常多，通常我们会新建一个文件夹,来存放这些图片文件(images)，这时在查找图像,就需要采用“路径”的方式来指定图像文件的位置.相对路径:以引用文件所在位置为参考基础，而建立出的目录路径，这里简单来说，图片相对于html页面的位置。目录文件夹:就是普通文件夹,里面只不过存放了我们所做页面所需要的相关素材，比如html文件，图片等。c.属性采取键值对的格式，即key=“value”的格式属性=“属性值”在html标签中<，<img>标签用于定义html页面中的图像。
2024-03-12 14:15:54
317
原创 HTML标签的认识
在html中，一个段落的文字从左到右依次排列,直到浏览器窗口的右端,然后才自动换行,如果希望某段文本强制进行换行显示,就需要使用换行标签<br/>在网页中，要把文字有条理的显示出来,就要将这些文字分段显示，在html 标签中，<p>标签用于定义段落,他可以将整个网页分成若干个段落。学习标签是有技巧的,重点是记住每个标签的语义,简单理解就是标签的含义，即这个标签是用来干嘛的。根据标签的语义，在合适的地方给一个最合理的标签， 可以让页面结构更清晰。1.文本在一个段落中会根据浏览器窗口的大小自动换行，
2024-03-07 15:01:29
407
原创 HTML基础
其实对于文档显示来说,定义成en文档也可以显示中文，定义成zh-CN可以显示为英文。注意: 上面语法是必须要写的代码,否则可能引起乱码的情况，一般情况下统一使用“utf-8“编码，尽量统一写成标准的”utf-8”，不要写成 utf8或UTF8。charset常用的值有,GB2312,BIG5、GBK和UTF-8,其中utf-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。b.这句话代码的意思是当前页面采用的是HTML5 版本来显示网页。双标签关系可以分为两类：包含关系和并列关系。
2024-03-07 14:28:08
301
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人