Html css 基础
学习html
passerby_Ai
这个作者很懒,什么都没留下…
展开
-
vue 设置表头换行显示让他不出现...
/deep/ span{ word-break:normal; width:auto; display:block; white-space:pre-wrap; word-wrap : break-word ; overflow: hidden ;} white-space – 通过HTML文档的源代码的排版方式控制页面显示文本的排版方式取值: normal | pre | nowrap | pre-wrap | pre-line | inhe原创 2022-02-23 13:45:36 · 275 阅读 · 0 评论 -
背景
背景属性描述background简写属性,作用是将背景属性设置在一个声明中。background-attachment背景图像是否固定或者随着页面的其余部分滚动。background-color设置元素的背景颜色。background-image把图像设置为背景。background-position设置背景图像的起始位置。backgr...原创 2020-03-12 09:23:33 · 74 阅读 · 0 评论 -
设置透明
设置元素怒透明(opacty)opacty可以用来设置元素的背景的透明,他需要一个0-1的值,0表示完全透明1表示不透明兼容新问题:opacty属性在IE8中不支持使用在IE8以下使用alpha(opactiy=透明度);透明度0~100;其他设置透明的方法:在设置背景颜色时在可以在其后面加上一个0~100的值来设置透明度#login-box{ width: 30...原创 2020-03-11 16:38:02 · 190 阅读 · 0 评论 -
定位
定位将指定元素摆放到页面的任意位置,通过定位可以任意的摆放元素。通过position属性来设置定位。值描述absolute生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。fixed生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通...原创 2020-03-11 16:10:08 · 90 阅读 · 0 评论 -
高度塌陷
高度塌陷在文档中子元素把父元素撑开,子元素有多高父元素就有多高,当给子元素设置浮动后,子元素脱离文档流,父元素就会造成高度塌陷问题。造成的问题:由于父元素高度塌陷,则父元素下的所有元素都会向上移动,这样会导致页面布局混乱。解决方法:可以给父元素设置高度 。问题:父元素的高度将不能自动适应子元素的高度,不推荐使用。开启BFC 添加一个属性 overflow:hiddenBFC根据W...原创 2020-03-11 14:36:32 · 97 阅读 · 0 评论 -
制作登录静态页面
登录页面代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登录</title> <link rel="stylesheet" href="..\font-awesome-4.7.0\css\font...原创 2020-03-11 14:09:52 · 1612 阅读 · 0 评论 -
盒子模型
盒子模型网页是由多个矩形的盒子组成的,盒子是由元素内容、内边距、边框 和 外边距 组成的。1.为盒子设置内容 width:设置盒子内容的宽度 height:设置盒子内容区的高度 width只是设置盒子的内容区大小,而不是盒子的整个大小, 盒子的可见框大小由内容区、 内边框和边框共同决定2.为盒子设置边框 为一个元素设置边框必须指定三个样式 ...原创 2020-03-07 12:38:30 · 128 阅读 · 0 评论 -
选择器的优先级
选择器的优先级优先级的高低内联样式 1000id选择器 100类、属性、伪类选择器 10元素选择器 1通配符 0继承没有优先级当有多种选择器时 需要将多种选择器的优先级相加,但是注意选择器优先级不会超过最大量级,如果两个选择器的优先级一样则选择靠后的优先级。并集选择器的优先级单独计算的优先级的提升:在样式的最后,添加一个!important,则此时样式将会获得一个最高...原创 2020-03-07 09:48:09 · 243 阅读 · 0 评论 -
css简介
简介• 层叠样式表 (Cascading Style Sheets)• css可以用来为网页创建样式表,通过样式 表可以对网页进行装饰。• 所谓层叠,可以将整个网页想象成是一层 一层的结构,层次高的将会覆盖层次低的。• 而css就可以分别为网页的各个层次设置样式。基本语法CSS的样式表由一个一个的样式构成,一个 样式又由选择器和声明块构成。语法:选择器 {样式名:样式值;样式名...原创 2020-03-05 11:05:12 · 79 阅读 · 0 评论 -
css浮动
浮动我们都知道元素都在文档流中,但在文档流中块元素默认垂直排列,如果希望块元素在页面中在页面中水平排列,我们可以使块元素脱离文档流。这就是浮动使用float来使元素浮动,从而脱离文档流可选值:none: 默认元素在文档流中left: 元素脱离文档流,向页面的左侧移动right: 元素脱离文档流,向页面的右侧移动当元素设置浮动以后,元素会脱离文档流,它下边的元素会立即向上移动...原创 2020-03-11 09:38:20 · 67 阅读 · 0 评论 -
文档流
文档流文档流处在网页的最底层,它表示的事一个页面中的位置,我们所创建的元素默认都处在文档流中元素在文档流中的特点块元素 1.块元素在文档流中会独占一行,块元素会自上向下排列。 2.块元素在文档流中默认宽度是父元素的100% 内联元素 1.内联元素在文档流中只占自身大小,会默认从左向右排练,如果一行中不是以容纳所有的内联元素, 则换到下一行...原创 2020-03-09 13:25:10 · 79 阅读 · 0 评论 -
常用的样式
样式1.通过display样式可以修改元素类型 可选值: inline:可以将一个元素作为内联元素显示 block:可以将一个元素设置问块元素显示 insplay:inline-block:将一个元素转换为行内块元素 行内块元素:一个元素既有行内元素的特点又有块元素的特点,既可以设置宽和高又不会独占一行 ...原创 2020-03-08 10:16:14 · 133 阅读 · 0 评论 -
文本标签和样式
文本标签< em>和< strong>都表示一个强调的~em标签用于表示一段内容中的着重点(语气上的)。strong标签用于表示一个内容的重要性。这两个标签可以单独使用,也可以一起使用。通常em显示为斜体,而strong显示为粗体。< i>和< b>~ i标签会使文字变成斜体。 b标签会使文字变成粗体。这两个标签和em和st...原创 2020-03-07 10:42:59 · 346 阅读 · 0 评论 -
属性子元素兄弟选择器
属性选择器作用:可以根据元素中的属性或属性值来选取元素语法:[属性名] 选取含有指定属性的元素[属性名="属性值"] 选取含有指定属性值的元素[属性名^="属性值"] 选取属性值的内容以指定内容开头的元素[属性名$="属性值"] 选取属性值为指定内容结尾的元素[属性名*="属性值"] 选取属性值以包含指定内容的元素比如:p[class]{}子元素选择器:first-...原创 2020-03-07 09:14:49 · 127 阅读 · 0 评论 -
css伪类选择器
伪类伪类选择器: 作用:专门用来表示元素的一种状态 比如:普通的超链接、访问过的链接、焦点的文本框等。当我们需要为处在这些特殊状态来设置样式时, 就可以使用伪类 1.没有访问过的链接 语法 ::link e: a:link{ color: aqua; ...原创 2020-03-05 21:14:20 · 157 阅读 · 0 评论 -
html其他选择器
元素之间的关系父元素:直接包含子元素的元素子元素:直接被父元素包含的元素祖先元素:直接或间接包含后代元素,父元素也是祖先元素后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素兄弟元素:拥有相同父代的元素叫兄弟元素 <div> <p id="p1"> </p> <p id...原创 2020-03-05 20:05:20 · 107 阅读 · 0 评论 -
选择器
选择器选择器(selector),会告诉浏览器:网页 上的哪些元素需要设置什么样的样式。比如:p这个选择器就表示选择页面中的所 有的p元素,在选择器之后所设置的样式会 应用到所有的p元素上 1. 元素选择器(标签选择器),可以根据标 签的名字来从页面中选取指定的元素。 语法: 标签名{} 2.类选择器 ,可以根据元素的class...原创 2020-03-05 16:53:04 · 113 阅读 · 1 评论 -
块元素和内联元素
块元素概念:块元素会独占一行,无论他的内容有多少他都会独占一行比如:p div h1 h2 h3…关于divdiv这个标签是没有任何语义,就是一个纯粹的块元素 ,并且不会为它里面的元素设置任何的样式。div元素主要用来对页面进行布局<!DOCTYPE html><html lang="en"><head> <meta ch...原创 2020-03-05 15:15:54 · 116 阅读 · 0 评论 -
html超链接
超链接超连接 使用超连接可以让我们从一个页面跳转到另一个页面 使用a标签来创捷一个超链接 属性: href:指向连接跳转的目标地址,可以是一个相对路径也可以是一个绝对路径 可以使用#作为占位符 target:指定链接打开的位置 可选值: -self:表示在当前窗口中打开 ...原创 2020-03-04 21:19:51 · 108 阅读 · 0 评论 -
html内联框架
内联框架使用内联框架可以引入一个外部的页面 使用iframe来创建一个内联框架 属性: src:指向一个外部页面的路径,可以使用相对路径 width: height: name:可以为内联框架指定一个mame属性 在实际开发中不会使用内联框架,因为内联框架的内容不会被搜索引擎所检索e:<ifra...原创 2020-03-04 18:32:38 · 383 阅读 · 0 评论 -
html meta
meta设置网页字符集语法:< meta charset="UTF-8">设置网页关键字语法:< meta name="keyword" content="关键字"/>name:对content进性描述指定网页表述语法: < meta name="desoription" content="网页的描述"/>搜索引擎在检查页面时,会同时...原创 2020-03-04 18:07:36 · 94 阅读 · 0 评论 -
html图片
使用img标签来向网页种引入一个外部图片 img标签标签也是一个自结束标签属性: src:图片的外部路径 alt:可以用来设置在图片不能显示时,对图片的描述 搜索引擎可以通过alt属性来识别不同的图片 如果不写alt属性,则搜索引擎不会对img中的图片进行收录 width:可以用来修改图片的高度 ,一般使用px作...原创 2020-03-04 17:39:51 · 463 阅读 · 0 评论 -
html实体
实体在html中,一些如< >这种特殊符号是不能直接使用,需要一些特殊的符号表示这些特殊字符,这些特殊符号我们称为实体<转义字符>,浏览器解析到实体时,会自动将实体转换为其对应的字符。语法:&实体的名字;实体:显示结果描述实体名称实体编号空格空格& nbsp;& #160;<小于号<&...原创 2020-03-04 16:30:22 · 125 阅读 · 0 评论 -
html常用的标签
标题标签: -在html中,一共有六级标题标签 h1~h6 在显示效果上h1最大,h6最小 使用html标签时,关心的时标签的语义,我们使用的标签都是语义化标签 6级标题中h1的最重要,表示一个网页中的主要内容,h2~h6重要性依次降低 对于搜索引擎来说,h1的重要性仅...原创 2020-03-04 16:07:06 · 118 阅读 · 0 评论 -
html乱码问题
出现乱码的原因因为计算机只认识0和1,所以在计算机中的任何内容,最终都需要转换为0 1 这种二进制来保存,包括网页种的内容。在读取文件时,需要将二进制编码,再转换为正确的内容编码:依据一定的规则,将字符转换为二进制编码的过程解码:依据一定的规则,将二进制编码转换为字符的过程字符集:解码和解码的所采用的规则,我们称为字符集。常见的字符集:ASCIIISO-8856-1GBK...原创 2020-03-04 15:28:35 · 95 阅读 · 0 评论 -
html属性与文档的声明
属性可以通过属性来设置标签 来处理标签中的内容属性需要写在开始标签中,实际上就是一个名值对的结构 名值对:属性名 =“”一个标签中可以设置多个属性中间用空格隔开e:<h1>这是一个<font color = "red" size = "5">属性</font> </h1>查询文档:链接:https://pan.baidu.com...原创 2020-03-03 20:13:41 · 107 阅读 · 0 评论 -
html简介
简介HTML(Hypertext Markup Language) 是一门超文本标记语言。它负责网页的三个要素之中的结构。HTML使用标签的的形式来标识网页中的不 同组成部分。所谓超文本指的是超链接,使用超链接可 以让我们从一个页面跳转到另一个页面。标准结构:<html> <head> <title>第一个网页</title>...原创 2020-03-03 19:25:47 · 99 阅读 · 0 评论