前端基础笔记--html&&css
今天也很想吃泡椒牛蛙
逼一逼,啥需求都做得出来
展开
-
前端基础笔记-CSS-06-隐藏与显示、用户界面样式、垂直对齐
目录元素的显示与隐藏display显示visibility可见性overflow溢出css用户界面样式垂直对齐溢出的文字隐藏sprite精灵技术滑动门元素的显示与隐藏display显示语法display: none(隐藏) || block(块级,显示);当用display对元素设置隐藏时,元素不再占据位置。例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-08-08 16:20:50 · 194 阅读 · 0 评论 -
前端基础笔记-CSS-05-定位
定位基本概念static静态定位relative相对定位absolute绝对定位fixed固定定位拓展使绝对/固定定位的盒子居中堆叠顺序(z-index)基本概念css布局的三种机制分别为标准流、浮动、定位。定位主要的作用是将盒子固定在浏览器某一固定位置。设置了定位的盒子是漂浮在标准流和浮动盒子的上面的。定位=定位模式+边偏移边偏移用top bottom left right属性来表示。定位模式position:static(静态) || relative(相对定位) || absolut原创 2020-08-07 13:23:08 · 250 阅读 · 0 评论 -
前端基础笔记-CSS-04-浮动
浮动CSS布局的三种机制浮动浮动的扩展清除浮动CSS布局的三种机制1.普通流(标准流)块级元素独占一行,从上到下顺序排列。常见的块级元素有div、hr表格行、ul无序列表、ol有序列表、p段落、form表单、table表格、h1-h6等。行内元素在一行内从左到右顺序显示,到父元素边缘就自动换行。常见的有a链接、em强调、span等。2.浮动让盒子从普通流中浮起来,主要作用是让多个块级盒子在一行内显示。3.定位将某个盒子定位在浏览器的某一固定位置。浮动概念:给元素设置了浮动之后,元素会原创 2020-08-05 15:20:52 · 270 阅读 · 0 评论 -
前端基础笔记-CSS-03-盒子模型
盒子模型边框border内边距padding外边距marginps基本操作三级目录基本概念1.网页布局的本质是根据设计图设计好盒子的大小以及摆放的位置,再将网页元素放进盒子里。2.盒子由元素内容、边框、内边距、外边距组成。3.边框为盒子的厚度;内边距为元素内容与边框的距离;外边距为盒子之间的距离。边框border基本语法border : border-width || border-style || border-color ;border-style:none:没有边框(默认值)原创 2020-08-04 22:16:28 · 276 阅读 · 0 评论 -
前端基础笔记-CSS-02-复合选择器、标签显示模式、行高、背景、三大特性
css复合选择器原创 2020-08-04 09:12:39 · 247 阅读 · 1 评论 -
前端基础笔记-CSS-01-css引入、基础选择器、字体样式
目录css引入的三种方式行内式(内联)内部样式表(内嵌)外部样式表(外链式)css基础选择器css引入的三种方式行内式(内联)直接在标签里写style属性的值即可,书写方便。缺点是结构与样式没有分离,每个标签的样式都要写一遍,非常麻烦。例:<body> <h1 style="color:red; ">文本内容</h1></body>内部样式表(内嵌)在head标签中写style标签,有固定的格式。这样简化了样式的写法,但还是没有做到结原创 2020-08-03 12:28:43 · 357 阅读 · 0 评论 -
前端基础笔记-HTML-表格
表格表格基本操作合并单元格一级目录一级目录表格基本操作表格标签<table></table>属性名含义常用值border边框像素width宽像素height高像素align表格整体的对齐方式left、right、centercellspacing单元格的边框之间的间距像素,一般设置为0比较好看cellpadding单元格内容与单元格边框的距离像素表格标题标签<caption><原创 2020-08-03 12:28:32 · 256 阅读 · 0 评论 -
前端基础笔记-HTML-常用标签
HTML_01html常用标签一点补充html常用标签段落标签<p>段落内容</p>段落间会自动空一行换行标签</br>div和span标签div标签和span标签是没有语义的,都是用来装网页元素的盒子。div一行一个,span一行多个。img标签,自结束alt属性值是图片无法加载时呈现的内容,title属性值是鼠标移至图片上方所出现的内容,src属性值代表图片的路径:<img src="tupian.png" /> 图片与HTML文件同原创 2020-08-03 12:28:22 · 407 阅读 · 0 评论