HTML5+CSS
关注
分享
扫一扫
文章平均质量分 54
前端基础
_七七
delicate.
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
CSS：整个网页变灰色
filter是滤镜的意思，filter:gray的意思就是说给页面加上一个灰度的滤镜，所以html里面的所有内容都会变成黑白的了。不过这个滤镜对于chrome和safari浏览器是无效的，所以下面会有一行-webkit-filter: grayscale(100%);这个样式是专属于使用webkit内核的浏览器的，意思和filter:gray;差不多，只是写法不同罢了。给出一段规范的代码，把这段代码加入到网站页面的css里面即可实现页面变成灰色的效果：原创 2022-12-07 09:08:14 · 1011 阅读 · 0 评论 -
CSS：装饰、垂直对齐方式、光标类型、边框圆角、overflow、元素隐藏、透明度、边框合并、画三角形、选择器拓展
css原创 2022-10-19 15:12:51 · 184 阅读 · 0 评论 -
HTML+CSS：rem、vw / vh移动适配、媒体查询
使用flexiblejs配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果。目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10。如68px的单位，在375width的页面中，rem单位为：68/37.5。手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？vw单位的尺寸=px单位数值/(1/100视口宽度)vh单位的尺寸=px单位数值/(1/100视口高度)适配 68px * 29px 的盒子使用vw。适配 68px * 29px的盒子使用vh。原创 2022-10-18 16:42:02 · 4050 阅读 · 1 评论 -
HTML+CSS：移动端分辨率、视口、Flex布局、文字溢出显示省略号、溢出两行显示省略号
使用meta标签设置视口宽度，制作适配不同设备宽度的网页。修改主轴对齐方式属性: justify-content。视口：显示HTML网页的区域，用来约束HTML尺寸。思考：默认情况下，网页的宽度和逻辑分辨率相同吗？使用flex-direction改变元素排列方向。思考：默认情况下，多个弹性盒子如何显示？制作网页参考物理分辨率还是逻辑分辨率？注意: 只占用父盒子剩余尺寸。解决办法：添加视口标签。移动端主流设备分辨率。原创 2022-10-18 10:08:47 · 1781 阅读 · 0 评论 -
HTML+CSS：动画animation、animation复合属性、属性拆分、使用steps实现逐帧动画
使用animation添加动画效果。原创 2022-10-17 17:55:35 · 510 阅读 · 0 评论 -
HTML+CSS：transform空间转换、translate3d空间位移、perspective透视、rotate3d空间旋转\立方体、scale3d空间缩放
空间旋转-X轴：需配上透视效果。空间旋转-Y轴：需配上透视效果。原创 2022-10-17 17:41:35 · 933 阅读 · 0 评论 -
HTML+CSS：渐变background-image: linear-gradient
html+css原创 2022-10-17 17:10:22 · 349 阅读 · 0 评论 -
HTML+CSS：平面转换transform系列、transform:translate()、transform:rotate()旋转、复合属性、transform:scale()缩放
transform系列原创 2022-10-17 17:01:59 · 1915 阅读 · 0 评论 -
HTML+CSS：字体图标
使用字体图标技巧实现网页中简洁的图标效果。原创 2022-10-17 16:30:46 · 159 阅读 · 0 评论 -
Less：语法、VScode中的配置
Less原创 2022-07-19 14:37:15 · 556 阅读 · 0 评论 -
CSS：定位、静态定位、相对定位、绝对定位、子绝父相、固定定位、元素层级关系
设置定位方式属性名：position常见属性值设置偏移值偏移值设置分为两个方向，水平和垂直方向各选一个使用即可选取的原则一般是就近原则 （离哪边近用哪个）原创 2022-10-19 14:49:07 · 232 阅读 · 0 评论 -
CSS：结构伪类选择器（选择子元素）、伪元素、标准流、浮动、清除浮动（浮动父元素塌陷处理）
标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素。优势：减少对于HTML中类的依赖，有利于保持代码整洁。作用：根据元素在HTML中的结构关系查找元素。伪元素：一般页面中的非主体内容可以使用伪元素。3. 必须设置content属性才能生效。场景：常用于查找某父级选择器中的子元素。4. 伪元素默认是行内元素。原创 2022-10-19 14:33:02 · 867 阅读 · 0 评论 -
CSS：盒子模型、border、padding、margin、外边距合并、塌陷现象
盒子模型一共有几个部分组成？分别是什么？内容区域：content边框区域：border内边距区域：padding外边距区域：margin。原创 2022-10-19 14:05:35 · 626 阅读 · 0 评论 -
CSS：元素显示模式、块级元素、行内元素、行内块元素、元素显示模式转换
拓展1：HTML嵌套规范注意点。原创 2022-10-19 13:33:49 · 218 阅读 · 0 评论 -
CSS：背景相关属性、背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写
背景相关属性原创 2022-10-19 11:54:45 · 354 阅读 · 0 评论 -
CSS：选择器进阶、复合选择器（子代、后代）、并集选择器、交集选择器、hover伪类、emmet语法
css选择器原创 2022-10-19 11:24:16 · 195 阅读 · 0 评论 -
CSS：颜色常见取值
rgb原创 2022-10-19 11:05:17 · 261 阅读 · 0 评论 -
CSS：字体和文本样式
作用：控制一行的上下行间距。原创 2022-10-19 10:58:33 · 187 阅读 · 0 评论 -
CSS：基础选择器
标签选择器标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,频面中煤一类标签指定统一的CSS 样式。语法标签名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}作用标签选择器可以把某一类标签全部选择出来,比如所有的< div >标签和所有的< span >标签。优点能快速为页面中同类型的标签统一设置样式。缺...原创 2020-03-11 14:36:57 · 388 阅读 · 1 评论 -
HTML 注册网站页面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2020-03-05 18:13:36 · 617 阅读 · 0 评论 -
HTML 表单＜label＞标签
< label>标签< label>标签为input元素定义标注(标签)。< label>标签用于绑定一个表单元素当点击< label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。语法:<label for="sex" > 男 </label><input ...原创 2020-03-05 14:03:37 · 637 阅读 · 0 评论 -
HTML 表单标签、input系列标签、button标签、select下拉菜单标签、textarea文本域、label标签
表单域表单域是一个包含表单元素的区域。在HTML标签中，< form> 标签用于定义表单域,以实现用户信息的收集和传递。< form > 会把它范围内的表单元素信息提交给服务器.<form action= "url地址” method= "提交方式” name="表单域名称"> 各种表单元素控件</form>常用属性:属性 属性...原创 2020-03-05 13:34:21 · 2009 阅读 · 1 评论 -
HTML 列表标签、有序列表、无序列表、自定义列表dl dt dd
自定义列表(重点)在HTML标签中，< dl>标签用于定义描述列表(或定义列表) , 该标签会与< dt> (定义项目/名字)和< dd> (描述每一个项目/名字) 一起使用。其基本语法如下:<dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2...原创 2020-03-04 20:30:26 · 7012 阅读 · 2 评论 -
HTML 合并单元格 rowspan、colspan
合并单元格合并单元格方式:跨行合并: rowspan="合并单元格的个数”跨列合并: colspan= “合并单元格的个数”目标单元格: (写合并代码)：跨行:最上侧单元格为目标单元格，写合并代码跨列:最左侧单元格为目标单元格，写合并代码合并单元格三步曲:先确定是跨行还是跨列合并。找到目标单元格.写上合并方式=合并的单元格数量。比如: <td colspan=...原创 2020-03-04 17:56:48 · 742 阅读 · 0 评论 -
HTML 表格table tr td、表头标题、表结构、合并单元格
表格的主要作用表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。表格不是用来布局页面的，而是用来展示数据的。<table> <tr> <td>单元格内的文字</td> </tr></...原创 2020-03-04 17:38:03 · 13556 阅读 · 1 评论 -
HTML 注释、特殊字符实体
注释如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。HTML中的注释以“ <!--" 开头,以"--> ”结束。<!--注释语句-->快捷键: ctrl + /注释标签里面的内容是给程序猿看的，这个代码是不执行不显示到页面中的.添加注释是为了更好地解释代码的功能,便于相关开发人员理解和阅读代码,程序是...原创 2020-03-04 17:16:49 · 511 阅读 · 0 评论 -
HTML 超链接标签<a>、锚点
在HTML标签中，< a>标签用于定义超链接,作用是从一个页面链接到另一个页面。链接的语法格式<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>单词anchor [’ aenke()]的缩写, 意为:锚。两个属性的作用如下:属性作用href用于指定链接目标的url地址，(必须属性) 当为标签应用href属...原创 2020-03-04 17:01:31 · 1521 阅读 · 0 评论 -
HTML图像标签<img>和图像相对路径、绝对路径
图像标签和路径图像标签在HTML标签中， 标签用于定义HTML页面中的图像。<img src="图像URL">单词image的缩写,意为图像。src是标签的必须属性,它用于指定图像文件的路径和文件名。图像标签的其他属性:src 图片路径 必须属性alt 文本 替换文本。图像不能显示时显示的文字。title 文本 提示文本。鼠标放到图像上，提示的文字wi...原创 2020-03-03 16:15:58 · 7620 阅读 · 0 评论 -
HTML 语义化标签、＜ div＞和＜ span＞无语义化、有语义化（手机端）
< div>和< span>标签< div>和< span>是没有语义的，它们就是一个盒子，用来装内容的。<div> 这是div </div><span> 这是span </span>div是division的缩写，表示分割、分区。span 意为跨度、跨距。特点:< div...原创 2020-03-03 15:06:17 · 816 阅读 · 0 评论 -
HTML常用标签、p段落标签、br换行标签、文本格式化标签
根据标签的语义,在合适的地方给一个最为合理的标签,可以让页面结构更清晰。标题标签< h1> - < h6>为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题，<h1> - <h6>。<h1> 我是一级标题 </h1>单词head的缩写,意为头部、标题。标签语义 : 作为标...原创 2020-03-03 15:01:50 · 3855 阅读 · 0 评论 -
HTML 骨架标签解释、字符集的作用
文档类型声明标签< !DOCTYPE > 文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页。这句代码的意思是:当前页面采取的是HTML5版本来显示网页.注意:声明位于文档中的最前面的位置,处于标签之前。不是一个HTML标签,它就是文档类型声明标签。lang语言种类用来定义当前文档显示的语言。en定义语言为英语zh-CN定义语言为中文...原创 2020-03-03 14:46:15 · 340 阅读 · 0 评论 -
HTML VSCode创建第一个文件
VSCode的使用双击打开软件。新建文件(CtrI+N )。保存(Ctrl+S ),注意移动要保存为.html文件Ctrl+加号键, Ctrl +减号键可以放大缩小视图生成页面骨架结构。利用插件在浏览器中预览页面:单击鼠标右键,在弹出出口中点击"Open In Default Browser”。输入!按下Tab键。<!DOCTYPE html><html l...原创 2020-03-03 14:27:28 · 379 阅读 · 0 评论 -
HTML 基本结构标签
基本结构标签每个网页都会有一个基本的结构标签(也称为骨架标签) ,页面内容也是在这些基本标签上书写。<html> </html>HTML标签页面中最大的标签，我们称为根标签<head> </head>文档的头部注意在head标签中我们必须要设置的标签是title<titile> </title>文档的标题...原创 2020-03-03 14:19:12 · 379 阅读 · 0 评论 -
HTML语法规范
基本语法概述HTML标签是由尖括号包围的关键词,例如< html >。HTML 标签通常是成对出现的，例如< html >和< /html> , 我们称为双标签。标签对中的第一个标签是开始标签,第二个标签是结束标签。有些特殊的标签必须是单个标签(极少情况) , 例如 < br/ > ,我们称为单标签。标签关系双标签关系可以分为两类:包...原创 2020-03-03 14:15:58 · 286 阅读 · 0 评论 -
HTML相关概述、浏览器内核、Web标准的构成
什么是HTMLHTML指的是超文本标记语言(Hyper Text Markup Language) , 它是用来描述网页的一种语言。HTML不是一种编程语言,而是一种标记语言(markup language)。标记语言是一套标记标签(markup tag)。所谓超文本，有2层含义:1.它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)。2.它还可以从一个文件跳转到另一个文件...原创 2020-03-03 14:08:00 · 200 阅读 · 0 评论