![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML+CSS基础重点部分复习
进击的码农菌
这个作者很懒,什么都没留下…
展开
-
CSS vertical-align 属性应用
vertical-align 属性CSS 的 vertical-align 属性使用场景: 经常用于设置图片或者表单(行内块元素)和文字垂直对齐。官方解释: 用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效。语法:vertical-align : baseline | top | middle | bottom图片、表单都属于行内块元素,默认的 vertical-align 是基线对齐。此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为原创 2020-10-30 10:40:23 · 102 阅读 · 0 评论 -
CSS 用户界面样式之鼠标样式
什么是界面样式?所谓的界面样式,就是更改一些用户操作样式,以便提高更好的用户体验。更改用户的鼠标样式表单轮廓防止表单域拖拽鼠标样式 cursorli {cursor: pointer; }设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。轮廓线 outline给表单添加 outline: 0; 或者 outline: none; 样式之后,就可以去掉默认的蓝色边框。input {outline: none; }防止拖拽文本域 resize实际开发中,我们文本域右原创 2020-10-29 16:17:19 · 194 阅读 · 0 评论 -
CSS高级技巧之精灵图,字体图标(CSS Sprites, iconfont)
为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术(也称 CSS Sprites)。核心原理:将网页中的一些小背景图像整合到一张大图中 ,这样服务器只需要一次请求就可以了。使用精灵图核心:精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。这个大图片也称为 spr原创 2020-10-29 16:13:31 · 537 阅读 · 0 评论 -
CSS重点之定位布局
定位(position)为什么要用定位?提问: 以下情况使用标准流或者浮动能实现吗?某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子.当我们滚动窗口的时候,盒子是固定屏幕某个位置的。以上效果,标准流或浮动都无法快速实现,此时需要定位来实现。所以:3. 浮动可以让多个块级盒子一行没有缝隙排列显示, 经常用于横向排列盒子。4. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。定位组成定位:将盒子定在某一个位置,所以定位也是在摆放盒子, 按原创 2020-10-29 15:56:55 · 153 阅读 · 0 评论 -
CSS盒子模型之浮动布局
浮动(float)传统网页布局的三种方式普通流(normal flow)浮动定位普通流(normal flow)这个单词很多人翻译为 文档流 , 字面翻译 普通流 或者标准流都可以。前面我们说过,网页布局的核心,就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置?CSS的定位机制有3种:普通流(标准流)、浮动和定位。html语言当中另外一个相当重要的概念----------标准流!或者普通流。普通流实际上就是一个网页内标签元素正常从上到下,从左到右排列顺序的意思,比如块级元素会独占原创 2020-10-29 14:39:32 · 1319 阅读 · 0 评论 -
CSS重点之盒子模型(重中之重)
其实,CSS就三个大模块: 盒子模型 、 浮动 、 定位,其余的都是细节。要求这三部分,无论如何也要学的非常精通。所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。看透网页布局的本质: 把网页元素比如文字图片等等,放入盒子里面,然后利用CSS摆放盒子的过程,就是网页布局。CSS 其实没有太多逻辑可言 , 类似我们小时候玩的积木,我们可以自由的,随意的摆放出我们想要的效原创 2020-10-29 14:10:25 · 167 阅读 · 0 评论 -
CSS 三大特性(层叠性,继承性,优先级)
CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉比如先给某个标签指定了内部文字颜色为红色,接着又指定了颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况,这就是样式冲突。一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,以最后的样式为准。样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。样式不冲突,不会层叠CSS继承性所谓继承性是指原创 2020-10-29 13:51:16 · 936 阅读 · 0 评论 -
CSS伪类选择器
伪类选择器伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果, 比如可以选择 第1个,第n个元素。为了和我们刚才学的类选择器相区别, 类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{}链接伪类选择器:link /* 未访问的链接 */:visited /* 已访问的链接 */:hover /* 鼠标移动到链接上 */:active /* 选定的链接 */a { /* a是标签选择器 所有的链接原创 2020-10-29 11:42:27 · 155 阅读 · 0 评论 -
CSS选择器
标签选择器(元素选择器、类型选择器)标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下:标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。类选择器类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:.类名{属性原创 2020-10-29 10:56:40 · 80 阅读 · 0 评论 -
CSS字体样式属性
font-size:字号大小font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。font-family:字体font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本的字体设置为微软雅黑,可以使用如下CSS样式代码:p{ font-family:“微软雅黑”;}可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下原创 2020-10-29 10:45:26 · 703 阅读 · 0 评论 -
HTML5新特性介绍
常用新标签header:定义文档的页眉 头部nav:定义导航链接的部分footer:定义文档或节的页脚 底部article:定义文章。section:定义文档中的节(section、区段)aside:定义其所处内容之外的内容 侧边<header> 语义 :定义页面的头部 页眉</header><nav> 语义 :定义导航栏 </nav> <footer> 语义: 定义 页面底部 页脚</foo原创 2020-10-29 01:54:23 · 189 阅读 · 0 评论 -
HTML列表标签
什么是列表?把…制成表,以表显示。容器里面装载着文字或图表的一种形式,叫列表。列表最大的特点就是 整齐 、整洁、 有序。无序列表 ul (重点)无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下:<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ......</ul><ul></ul>中只能原创 2020-10-28 21:53:46 · 160 阅读 · 0 评论 -
HTML路径
实际工作中,通常新建一个文件夹专门用于存放图像文件,这时再插入图像,就需要采用“路径”的方式来指定图像文件的位置。路径可以分为: 相对路径和绝对路径相对路径图像文件和HTML文件位于同一文件夹:只需输入图像文件的名称即可,如<img src="logo.gif" />。图像文件位于HTML文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开,如<img src="img/img01/logo.gif" />。图像文件位于HTML文件原创 2020-10-28 21:47:22 · 359 阅读 · 0 评论 -
HTML表格标签
表格结构标签<thead></thead>:用于定义表格头部。内部必须拥有标签。一般是位于第一行。<tbody></tbody>:用于定义表格的主题,主要用于放数据本体。以上标签都是放在<table></table>标签中。合并单元格合并单元格的方式跨行合并:rowspan="合并单元格的个数“跨列合并:colspan="合并单元格的个数”合并单元格三部曲先确定是跨行还是跨列合并。找到目标单元格,写原创 2020-10-28 21:33:53 · 203 阅读 · 0 评论 -
HTML常用标签
超链接标签(重点)连接分类外部链接:例如 <a href = "http://www.baidu.com"> 百度</a>。内部链接: 网站内部页面之间的相互链接,直接链接内部页面名称即可,例如<a href = "index.html">首页</a>。空链接: 多用于待确定目标时,如:<a href = "#">首页</a>。下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件。网页元素链接:在网页中各种网原创 2020-10-28 21:24:49 · 96 阅读 · 1 评论