![](https://img-blog.csdnimg.cn/20210618223035653.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML5 CSS3
文章平均质量分 79
学习
coderkey
放弃很容易,但坚持一定很酷
展开
-
HTML学习笔记(1)
一,HTML基本结构标签1,基本结构标签(1)含义:每个页面都会有一个基本的结构标签,页面内容也是在这些基本标签上书写,HTML页面也称为HTML文档。(2)结构: <html> <head> <title>文档标题</title> </head> <body> 内容 &原创 2021-06-15 22:59:22 · 168 阅读 · 6 评论 -
HTML学习笔记(2)
六,列表标签1,无序列表(1)语法: <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> … </ul>2,有序列表(1)语法: <ol> <li>列表项1</li> <li>列表项2</li>原创 2021-06-16 23:21:48 · 107 阅读 · 1 评论 -
CSS学习笔记(1)
一,基础选择器1,标签选择器(1)含义:指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一CSS样式。(2)语法:标签名 { 属性1:属性值1; 属性1:属性值1; 属性1:属性值1; …}2,类选择器(1)含义:在HTML元素中以class属性表示,在CSS中以一个点 “.” 号表示。(2)语法: .类名 { 属性1:属性值1; 属性1:属性值1; 属性1:属性值1原创 2021-06-17 21:41:38 · 131 阅读 · 1 评论 -
CSS学习笔记(2)
四,复合选择器1,后代选择器(1)含义:后代选择器又称包含选择器,可以选择父元素里面的子元素,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格隔开。当标签发生嵌套时,内层标签就成为外层标签的后代。(2)语法:元素1/选择器 元素2 { 样式声明 }(3)例如: ul li { color: red } /* 选择ul里面所有的li标签元素 */(4)注意:上面语法表示选择(父级)元素1里面的所有(子集)元素2(后代元素)。2,子元素选择器(1)原创 2021-06-18 12:35:31 · 108 阅读 · 1 评论 -
CSS学习笔记(3)
七,CSS三大特性1,层叠性(1)含义:相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。(2)原则:样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式。样式不冲突,不会重叠。2,继承性(1)含义:子标签会继承父标签的某些样式,如文本颜色和字号。(2)注意:子元素可以继承父元素的样式(text- , font- , line 这些元素开头的可以继承,以及color属性)。(3)行高的继承性:语法: body {原创 2021-06-18 14:55:09 · 324 阅读 · 1 评论 -
CSS学习笔记(4)
十,CSS浮动1,传统网页布局的三种方式普通流(标准流/文档流)、浮动和定位。1.1,标准流(文档流/普通流)(1)含义:所谓的标准流:就是标签按照规定好默认方式排列。(2)区别:块级元素和行内元素都属于标准流。(3)注意:实际开发中,一个页面基本都包含了这三种布局方式,后面移动端学习新的布局方式。网页布局第一准则:多个块元素纵向排列找标准流,多个块元素横向排列找标准流浮动。1.2,浮动(1)含义:float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或者另原创 2021-06-19 11:48:02 · 171 阅读 · 1 评论 -
CSS学习笔记(5)
十二,CSS高级技巧1,精灵图的使用1.1,使用精灵图核心总结(1)方法:精灵图主要针对于小的背景图片来使用。主要借助于背景位置来实现:background-position。一般情况下精灵图都是负值。(2)注意:注意网页中的坐标:X轴右边走是正值,左边走是负值;Y轴上边是负值,下边是正值。2,字体图标2.1,字体下载(1)icomoon字库http://icomoon.io(2)阿里icofont字库http://www.icofont.cn/2.2,字体图标原创 2021-06-19 12:10:58 · 154 阅读 · 1 评论 -
移动端基础
一,视口1,meta视口标签(1)语法: <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">(2)属性:属性值解释说明width宽度设置的是viewport宽度,可以设置device-width特殊值initial-scale初始缩放比,大于0的原创 2021-06-19 18:10:15 · 133 阅读 · 1 评论 -
移动端常见布局
一,流式布局(百分比布局)1,流式布局(1)含义:1,流式布局就是百分比布局,也称非固定像素布局。2,通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。3,流式布局方式是移动web开发使用的比较常见的布局方式。二,flex 弹性布局1,布局原理(1)含义:flex是 flexible Box 的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。(2)注意:1,当我们为父盒子设为 flex 布局以后原创 2021-06-20 22:48:31 · 229 阅读 · 3 评论 -
css单行或多行文本溢出显示省略号
一、单行文本溢出省略.content{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis;/* for Opera */}IE8以下浏览器需要在span标签里才会显示省略号。(有些浏览器需要加上指定的width)二、多行文 本溢出省略适用于 WebKit浏览器及移动端;-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该原创 2021-12-17 12:07:03 · 470 阅读 · 1 评论