HTML+CSS
关注
分享
扫一扫
文章平均质量分 84
HTML和CSS简介
_洋
一起学习吧
展开
-
CSS—— grid布局
grid 是一个 CSS 简写属性，可以用来设置以下属性： 显式网格属性 grid-template-rows、grid-template-columns 和 grid-template-areas， 隐式网格属性 grid-auto-rows、grid-auto-columns 和 grid-auto-flow， 间距属性 grid-column-gap 和 grid-row-gap。none：表示不明确的网格，所有的行和其大小都将由grid-auto-rows 属性隐式的指定。原创 2024-05-14 01:46:08 · 8160 阅读 · 0 评论 -
渐变字体的实现
会发现字体的颜色完全被阴影覆盖。这是因为我们将字体的颜色设置为了透明色，字体阴影是在字体的下层，背景的上层展示的，所以字体阴影将遮盖背景展示出来。原创 2024-04-07 20:31:04 · 1244 阅读 · 0 评论 -
CSS——PostCSS简介
PostCSS不是像Sass或Less一样的样式处理器，他没有自定义的语法和语义，它实际上不是一种语言，而是一种CSS语法转换的工具。PostCSS与CSS一起使用，任何有效的CSS都可以由PostCSS处理。PostCSS是CSS语法转换的工具，允许自定义CSS的语法，这些语法可以被插件理解和转换。在 CSS 中查找某些内容（例如，will-change 属性）。更改找到的元素（例如，在 will-change 之前插入 transform: translateZ(0) 作为旧浏览器的填充）。原创 2024-02-27 16:22:56 · 2922 阅读 · 0 评论 -
haslayout
文章目录什么是haslayout为什么会有haslayout默认拥有布局的元素怎么触发haslayout屏蔽haslayout什么是haslayoutlayout是windows IE的一个私有概念，它决定了元素如何对其内容定位和尺寸计算，以及与其他元素的关系和相互作用。当一个元素"拥有布局”时，它会负责本身及其子元素的尺寸和定位。而如果一个元素千没有拥有布局”，那么它的尺寸和位置由最近的拥有布局的祖先元素控制。必须说明的是，IE8及以上浏览器使用了全新的显示引擎，已经不在使用haslayout属原创 2022-05-12 09:12:35 · 142 阅读 · 0 评论 -
响应式布局——css
文章目录响应式布局媒体查询的使用响应式布局网页可以根据不通的设备或窗口大小呈现出不同的效果使用响应式布局，可以使一个网页适用于所有设备响应布局的关键就是媒体查询: 通过媒体查询，可以为不同的设备，或设备不同状态来分别设置样式eg：全屏：缩小窗口媒体查询的使用语法: @media查询规则媒体类型;all所有设备print打印设备screen带屏幕的设备speech屏幕阅读器eg： @media screen{ body{原创 2022-04-21 18:47:21 · 796 阅读 · 0 评论 -
font-size、line-height与vertical-align
文章目录问题解决行高line-heigth的定义字体大小font-size的定义vertical-align行高的特性问题今天发现，如果在h中嵌套行内元素，h1不是被行内元素撑开，中间是有一段距离的。如果把a设置为块级元素，或者设置外层容器的font-size=0，就不会出现该现象eg：代码，如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" />原创 2022-04-20 21:21:41 · 909 阅读 · 0 评论 -
vw单位——CSS
文章目录vw的引入vw补充：2倍图px和vw的转换vw的引入不同的设备完美视口的大小是不一样的，eg：iphone6 – 375iphone6plus – 414由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样，比如在iphone6中375就是全屏，而到了plus中375就会缺一块，不能适配所有移动设备。所以在移动端开发时，就不能再使用px来进行布局了，这就引入了vw。vwvw表示的是视口的宽度（viewport width)。视口就是当前窗口所显示的css像原创 2022-04-19 15:21:44 · 2616 阅读 · 0 评论 -
像素、移动端网页——CSS
像素：像素定义屏幕是由一个一个发光的小点构成，这一个个的小点就是像素分辨率: 1920 x 1080说的就是屏幕中小点的数量像素分类在前端开发中像素要分成两种情况讨论: CSS像素和物理像素物理像素，上述所说的小点点就属于物理像素CSS像素，编写网页时，我们所用像素都是css像素浏览器在显示网页时，需要将css像素转换为物理像素然后再呈现一个css像素最终由几个物理像素显示,由浏览器决定;默认情况下在pc端，一个css像素=一个物理像素视口（viewport)视口就是原创 2022-04-19 10:47:44 · 958 阅读 · 0 评论 -
flex简介——css
文章目录flex(弹性盒、伸缩盒)浮动的高度塌陷弹性盒弹性容器定义弹性容器属性flex-direction主轴：弹性元素的排列方向称为主轴侧轴（辅轴）：和主轴垂直的方向称为侧轴flex-directionflex-flowjustify-contentalign-items所以设置弹性容器子元素居中的方法align-content与align-content对应的align-self弹性元素的属性弹性元素弹性元素属性flex-growflex-shrink练习导航条flex(弹性盒、伸缩盒)flex弹性原创 2022-04-19 09:06:52 · 4797 阅读 · 0 评论 -
Less简介——CSS
文章目录CSS的高级功能定义变量可以直接传计算式子问题：这些属性比较新，很多浏览器不支持less简介less基础语法嵌套结构注释变量可以通过`$属性名`，直接对属性值进行引用父元素扩展extend第二种扩展：混合函数混合函数函数CSS的高级功能定义变量css也可以进行变量的定义可以在html中定义全局变量，之后想要修改的时候直接修改全局变量即可。变量定义格式： --变量名:变量值;变量的使用格式： var(--变量名)eg：<!DOCTYPE html><html l原创 2022-04-18 16:48:38 · 3694 阅读 · 2 评论 -
transform——CSS
文章目录变形定义平移百分比是相对于自身计算——应用平移特点z轴平移变形定义变形就是指通过css来改变元素的形状或位置变形不会影响到页面的布局transform用来设置元素的变形效果平移translatex():沿着x轴方向平移translateY(): 沿着y轴方向平移translateZ():沿着z轴方向平移平移元素可以以px为单位也可以以百分号为单位：百分比是相对于自身计算的eg：百分比是相对于自身计算——应用使元素居中，我们通常使用margin: 0 auto原创 2022-04-18 08:30:26 · 9482 阅读 · 0 评论 -
网页标题栏logo的实现
搜素一个网页的时候一般，标题栏的左侧都会有一个logoeg:设置：找到logo图片，放在网站根目录下。一般网页的logo图片都存放在根目录下,获取该图片只需要，网站/favicon.icoeg:优快云的：https://www.youkuaiyun.com/favicon.ico然后在网页的head下使用如下语句进行设置<link rel="icon" href="./10.png">就可以进行设置了。...原创 2022-04-18 08:19:41 · 738 阅读 · 0 评论 -
动画讲解—— CSS
文章目录动画概念动画的设置——关键帧关键帧animation-nameanimation-durationanimation-delayanimation-timing-function:animation-iteration-countanimation-directionanimation-play-stateanimation-fill-mode属性简写：练习关键帧的复杂应用小球的自由下落小球的花样运动动画概念动画和过渡类似,都是可以实现一些动态的效果,不同的是过渡需要在某个属性发生变化时才会触原创 2022-04-17 20:23:47 · 2744 阅读 · 1 评论 -
过渡——CSS
文章目录过渡属性transition-propertytransition-durationtransition-timing-functiontransition-delay合并简写练习过渡通过过渡可以指定一个属性发生变化时的切换方式通过过渡可以创建一些非常好的效果，提升用户的体验属性注意属性要写在要改变的元素标签类中transition-property指定要执行过渡的属性，多个属性间使用,隔开如果所有属性都需要过渡，则使用all关键字大部分属性都支持过渡效果，注意过渡时必须是从一个有原创 2022-04-17 13:36:45 · 411 阅读 · 1 评论 -
表单、input——css
文章目录表单简介表单属性表单简介表单:在现实生活中表单用于提交数据在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器使用form标签来创建一个表单表单属性form的属性action表单要提交的服务器的地址 <form action="1.HTML"> </form>文本框注意:数据要提交到服务器中，必须要为元素指定一个name属性。14...原创 2022-04-15 08:52:25 · 481 阅读 · 1 评论 -
表格——html
文章目录表格的基本元素横向合并colspan纵向合并rowspan长表格th表格样式border-spacing控制边框之间的距离border-collapse设置边框一行一个元素注意垂直居中利用table-cell使元素垂直居中表格的基本元素使用table标签来创建一个表格。tr标签表示表格中的一行td标签表示表格中的一个单元格eg：<!DOCTYPE html><html lang="en"> <head> <meta charset=原创 2022-04-14 22:49:54 · 925 阅读 · 0 评论 -
Card实现
效果图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="./reset.css"> <link rel="stylesheet" href="./font/css/all.css"> <style> .outer{ width:原创 2022-04-14 21:05:34 · 258 阅读 · 0 评论 -
背景——CSS
文章目录背景颜色：background-color背景图片：background-image背景图片和容器的大小关系background-color 和 background-image 可以一起使用，这样背景颜色将会成为图片的背景色background-repeatbackground-position设置方式一:设置方式二background-clipbackground-originbackground-sizebackground-attachment背景元素的简写背景颜色：background-原创 2022-04-14 17:00:23 · 534 阅读 · 0 评论 -
京东导航栏的实现
效果：代码：<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="../reset.css" /> <link rel="stylesheet" href="../font/css/all.css" /> <style> /* 解决高度塌陷原创 2022-04-14 10:57:28 · 964 阅读 · 1 评论 -
文本样式——CSS
文章目录文本的水平对齐文本的垂直对齐文本下划线空格、换行的处理省略号文本效果文本的水平对齐text-align文本的水平对齐left 左侧对齐right右对齐center居中对齐justify两端对齐：文字的两端和边框都对齐<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> div{ w原创 2022-04-12 20:35:10 · 298 阅读 · 0 评论 -
图片的基线
默认情况下，图片是和基线对齐的，这就导致图片和边框之间会有一条缝。想要去除缝隙只需要将 img 的 vertical-align设置为除基线以外的值就行。 img{ vertical-align: middle; }原创 2022-04-12 19:56:36 · 510 阅读 · 0 评论 -
文档流——CSS
文章目录文档流（normal flow)概念文档流和元素在文档流中的元素脱离文档流中的元素文档流（normal flow)概念网页是一个多层的结构，一层摞着一层.通过CSS可以分别为每一层来设置样式,但是作为用户来讲只能看到最顶上一层。这些层中,最底下的一层称为文档流，文档流是网页的基础。文档流和元素我们所创建的元素默认都是在文档流中进行排列：对于我们来元素主要有两个状态在文档流中不在文档流中（脱离文档流)在文档流中的元素在文档流中的元素有以下特点:块元素块元素会在页面中独占原创 2022-04-12 13:40:23 · 244 阅读 · 0 评论 -
元素的层级——CSS
文章目录层级的引入定位元素层级的修改层级的引入元素开启定位之后会提升自己的层级。无论是什么定位，提升后的层级都是一样的，所以后面的开启定位给的元素会盖住前面的开启定位的元素。eg:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> .box1{ width: 200px;原创 2022-04-12 10:10:36 · 733 阅读 · 0 评论 -
定位——CSS
文章目录定位概述偏移量（offset)坐标及方向相对定位定位概述定位（position)定位是一种更加高级的布局手段通过定位可以将元素摆放到页面的任意位置，而且不会对其他元素产生影响。使用position属性来设置定位可选值:static 默认值，元素是静止的没有开启定位relative 开启元素的相对定位absolute 开启元素的绝对定位fixed 开启元素的固定定位sticky开启元素的粘滞定位偏移量（offset)当元素开启了定位以后，可以通过偏移量来设置元素的位置原创 2022-04-12 09:36:16 · 355 阅读 · 0 评论 -
外边距重叠问题——clearfix
文章目录问题解决使用该类也可以解决高度塌陷的问题问题对子元素设置的 margin-top: 100px; 对父元素起作用。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> .box1{ width: 200px; height: 200px; bac原创 2022-04-12 13:40:43 · 173 阅读 · 0 评论 -
clear——CSS
文章目录问题解决问题使用float属性的时候可能出现如下情况：浮动元素，将下面的div元素进行覆盖：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev原创 2022-04-11 23:10:12 · 164 阅读 · 0 评论 -
高度塌陷问题
文章目录问题引入解决——开启BFC基本概念元素开启BFC后的特点开启元素的BFC的方法问题引入高度塌陷的间题:在浮动布局中,父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱。eg：未浮动时：浮动时：<!DOCTYPE html><html lang="en"><head> <meta cha原创 2022-04-11 21:20:57 · 349 阅读 · 0 评论 -
网页简单布局练习——CSS
效果：代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="../reset.css" /> <style> header, main, footer { width: 1000px; margin原创 2022-04-11 20:43:35 · 402 阅读 · 0 评论 -
浮动联系——导航条练习
通过浮动使元素横向。效果图：代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="../reset.css" /> <style> .nav{ /* width: 1246px; */ width:原创 2022-04-11 20:24:39 · 327 阅读 · 0 评论 -
浮动的简介——CSS
文章目录作用使用浮动修改盒子模型水平布局设置float之后或从文档流中脱离浮动的特点作用通过浮动可以使一个元素向其父元素的左侧或右侧移动使用 float属性来设置于元素的浮动使用float的可选值:none默认值，元素不浮动left 元素向左浮动right元素向右浮动eg： .box1{ width: 200px; height: 200px; background-color: rgb(235, 18原创 2022-04-11 19:52:05 · 433 阅读 · 0 评论 -
轮廓、阴影和圆角
文章目录轮廓：outline阴影：box-shadow圆角：border-radius轮廓：outlineoutline用来设置元素的轮廓线，用法和border—模一样轮廓和边框不同的点，就是轮廓不会影响到可见框的大小，即不会影响页面的布局。border：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" hr原创 2022-04-11 16:35:57 · 363 阅读 · 0 评论 -
CSS几个练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="../reset.css"> <style> body{ background-color: rosybrown; } ul{ ...原创 2022-04-11 14:51:04 · 442 阅读 · 0 评论 -
浏览器默认样式——CSS
文章目录默认样式默认样式的去除补充 ul样式默认样式通常情况，浏览器都会为元素设置一些默认样式。eg：body：p：默认样式的去除默认样式的存在会影响到页面的布局，通常情况下编写网页时必须要去除浏览器的默认样式。法一：可以一个个标签的样式去除，也可以一起去除：一个个去除：<style> p{ margin:0; padding:0; } body{原创 2022-04-11 10:43:30 · 1720 阅读 · 0 评论 -
盒子模型——CSS
文章目录盒模型、盒子模型、框模型（box model)基本概念盒子的组成内容区（content）：边框(border)内边距（padding)外边距盒模型、盒子模型、框模型（box model)基本概念CSS将页面中的所有元素都设置为了一个矩形的盒子将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置.盒子的组成每一个盒子都由一下几个部分组成:内容区（content)内边距（padding)边框（border)外边距（margin)内容区（content）：元素中原创 2022-04-11 09:05:45 · 373 阅读 · 0 评论 -
CSS基础知识
文章目录继承选择器的权重像素和百分比em和rem颜色单位继承样式的继承：我们为一个元素设置的样式也会作用到它的后代元素上。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> p{ color: salmon; } </style></head>&l原创 2022-04-10 20:00:22 · 1075 阅读 · 0 评论 -
CSS简介——选择器
文章目录内联样式css:层叠样式，一个网页都很多层。网页实际上是一个多层结构，通过CSS为网页的每一层设置样式，最终我们看到的只是最上面的一层。名值对结构：名字：值内联样式在标签内部通过style属性来设置元素的样式。...原创 2022-04-10 16:18:57 · 670 阅读 · 0 评论 -
HTML常用的简单标签
文章目录语义化标签块元素行内元素h标签——块元素p标签—— 块元素em标签——行内元素strong标签——行内元素blockquote——块元素q——行内元素br——块元素语义化标签在网页中HTML专门用来负责网页的结构, 所以在使用html标签时,应该关注的是标签的语义，而不是它的样式。小技巧：VScode中ctrl+回车可以只让光标下移。块元素在页面中独占一行的元素称为块元素。行内元素在页面中不会独占一行的元素称为块元素。h标签——块元素标题标签:h1 ~ h6一共有六级标题从h1原创 2022-04-10 10:51:26 · 2057 阅读 · 0 评论 -
HTML简介
HTML含义HTML ( Hypertext Markup Language ) 超文本标记语言。它负责网页的三个要素之中的结构：HTML使用标签的的形式来标识网页中的不同组成部分。所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。标签标签格式：<标签名>根标签：<html></html><html>中有两个子标签：<head></head>和<body></body>h原创 2022-04-09 16:55:41 · 925 阅读 · 0 评论