HTML+CSS学习笔记

最新推荐文章于 2024-07-14 16:50:03 发布
最新推荐文章于 2024-07-14 16:50:03 发布
阅读量630 收藏 3
点赞数
文章标签： css html 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46795923/article/details/123079912
版权

整理一下之前记的笔记，方便保存

文章目录

HTML+CSS笔记

前言

  • 前端开发需要的技术

image-20210313215433976

  • 什么是网页

    image-20210313220016859

  • HTML

    image-20210313220112394

  • 浏览器

image-20210313220305764

image-20210313220413463

  • web 标准

    Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

    web 标准构成

image-20210313221049845

1 . HTML 语法规范

双标签：例如 和

单标签：

1. 第一个html网页解读

HTML 文档的的后缀名必须是 .html 或 .htm ，浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。 此时，用浏览器打开这个网页，我们就可以预览我们写的第一个 HTML 文件了。

<!DOCTYPE html>//文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。

<html lang="en">//用来定义当前文档显示的语言。
/*    1. en定义语言为英语
2. zh-CN定义语言为中文
简单来说,定义为en 就是英文网页, 定义为 zh-CN 就是中文网页
其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文
这个属性对浏览器和搜索引擎(百度.谷歌等)还是有作用的*/
<head>
    <meta charset="UTF-8">
  /*字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。
在<head>标签内，可以通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。
charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所
有国家需要用到的字符.
注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量
统一写成标准的 "UTF-8"，不要写成 "utf8" 或 "UTF8"。*/
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2. html常用标签

  • 标题标签：

    -

    //

    我是一级标题

    独占一行

  • : 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。典型 的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。 元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。针对 搜索引擎的关键词，一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
  • :元素引入外部样式。

image-20210313224418617

image-20210314210453594

  • hr : 分割线

  • div and span

image-20210313224437611

  • img : 定义图像

    <img src = "图像URL"/>

    src 是标签的必须属性，它用于指定图像文件的路径和文件名

image-20210314205358943

  • a 定义超链接

    image-20210314205705154

image-20210314205834783

3. 注释 and 特殊字符

注释： // <!--内容-->

特殊字符转义：

image-20210314210933047

4. 路径

  • 相对路径

    以引用文件所在位置为参考基础，而建立出的目录路径。

    image-20210314211210593

  • 绝对路径

    是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

    例如，“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”。

5.表格 、列表、表单

1. 表格
<table>
 <tr>
 <th>姓名</th>
 <td>单元格内的文字</td>
 ...
 </tr>
 ...
</table>
  1. table 是用于定义表格的标签。
  2. tr 标签用于定义表格中的行，必须嵌套在 标签中。
  3. td 于定义表格中的单元格，必须嵌套在标签中。
  4. 字母 td 指表格数据（table data），即数据单元格的内容。
  5. th 一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示. 标签表示 HTML 表格的表头部分(table head 的缩写)
表格属性

image-20210314212402153

表格结构标签
  • thead ：用于定义表格的头部。 内部必须拥有 标签。 一般是位于第一行。
  • tbody ：用于定义表格的主体，主要用于放数据本体 。
  • 以上标签都是放在 table 标签中。
合并单元格
  • 跨行合并：rowspan=“合并单元格的个数”
  • 跨列合并：colspan=“合并单元格的个数”

image-20210314212958682

2. 列表
无序列表

<ul>标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义。 无序列表的基本语法格式如下：

<ul>
 <li>列表项1</li>
 <li>列表项2</li>
 <li>列表项3</li>
 ...
</ul>
  • 无序列表的各个列表项之间没有顺序级别之分，是并列的。
  • ul 中只能嵌套 li ,直接在 ul 标签中输入其他标签或者文字的做法是不被允许的。
  • li 之间相当于一个容器，可以容纳所有元素
  • 无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置
有序列表
<ol>
 <li>列表项1</li>
 <li>列表项2</li>
 <li>列表项3</li>
 ...
</ol>
自定义列表

image-20210314215034712

3. 表单
表单域

表单域是一个包含表单元素的区域。 在 HTML 标签中，<from> 标签用于定义表单域，以实现用户信息的收集和传递。

<from>会把它范围内的表单元素信息提交给服务器

<form action=“url地址” method=“提交方式” name=“表单域名称">
 各种表单元素控件
</form>

image-20210314220038389

表单控件

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

<input>表单元素

在英文单词中，input 是输入的意思，而在表单元素中 <input> 标签用于收集用户信息。 在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本 字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

image-20210314220352210

image-20210314220434856

image-20210314221130464

image-20210314221120059

image-20210522145717252

解决方法

也可以通过在submit函数里面返回false，使之不刷新

input输入框从右边开始输入

direction：ltr | rtl

image-20210720180451776

input 输入框 在自动填充时，背景颜色问题

image-20210522173755300

清除输入框的叉叉

这个时候只需要在CSS中添加 input::-ms-clear{display: none;} 就可以解决，也可以通过CSS3中的属性选择器针对特定选择框进行处理，比如：

input[type=search]::-ms-clear{display: none;}  /*清除IE下的 search 叉号*/
input[type=text]::-ms-clear{display: none;}  /*清除IE下的 text 叉号*/
 
//针对Chrome浏览器
input::-webkit-search-cancel-button{display: none;}  /*清除谷歌浏览器下的 search 叉号*/
placeholder改颜色

<input type="text" placeholder="占位符" />
 
input::-webkit-input-placeholder {
	color: #999;
}
input:-ms-input-placeholder { // IE10+
	color: #999;
}
input:-moz-placeholder { // Firefox4-18
	color: #999;
}
input::-moz-placeholder { // Firefox19+
	color: #999;

<lable> 标签

<lable> 为 input 元素定义标注（标签）。

<lable> 标签用于绑定一个表单元素, 当点击 标签内的文本时，浏览器就会自动将焦点(光标)转到或者 选择对应的表单元素上,用来增加用户体验.

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

标签的 for 属性应当与相关元素的 id 属性相同。

<select> 表单元素

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select> 标签控件定义下拉列表.

<select>
 <option>选项1</option>
 <option>选项2</option>
 <option>选项3</option>
 ...
</select>
  1. 中至少包含一对 <option>。
  2. 在 <option>中定义 selected =“ selected " 时，当前项即为默认选中项
<textarea>表单元素

使用场景: 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 标签。 在表单元素中， 标签是用于定义多行文本输入的控件。 使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

<textarea rows="3" cols="20">
 文本内容
</textarea>
  1. 通过 标签可以轻松地创建多行文本输入框。
  2. cols=“每行中的字符数” ，rows=“显示的行数”，我们在实际开发中不会使用，都是用 CSS 来改变大小。

image-20210716141314874

<iframe>

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

2. CSS

<head>
 <style>
 h4 {
 color: blue;
 font-size: 100px;
 }
 </style>
</head>

1. CSS 选择器

选择器分为基础选择器和复合选择器两个大类，

1. 基础选择器
  • 基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器

  1. 标签选择器：标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类

  2. 类选择器：.+类名 类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。

    • 多类名
      • 在标签class 属性中写 多个类名
      • 多个类名中间必须用空格分开
      • 这个标签就可以分别具有这些类名的样式

  3. id 选择器 ：HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义

  4. 通配符选择器： 在 CSS 中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。

  5. 总结

    image-20210314225009926

2. 复合选择器

复合选择器是建立在基础选择器之上，对 基本选择器进行组合形成的。

常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

1. 后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在 后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

image-20210314225501207

2. 子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.

image-20210314225600323

3. 并集选择器

image-20210319223204951

4. 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。 伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。

image-20210319223528273

/* a 是标签选择器 所有的链接 */ 
 a { 
 color: gray;
 }
 /* :hover 是链接伪类选择器 鼠标经过 */
 a:hover { 
 color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
 }

image-20210319223614653

2. CSS字体属性

1. 字体

image-20210404135238984

2. 字体大小

image-20210404135408239

3. 字体粗细

image-20210404135506815

4. 文字样式

image-20210404135554194

5. 字体符合属性

image-20210404135636300

6. 大小写(text-transform)

image-20210719145619526

总结

image-20210404135651339

CSS文本属性

1. 文本颜色

image-20210404135858520

2.文字对齐

image-20210404135938896

3.装饰文本

image-20210404140036651

4. 文本缩进

image-20210404140129340

5. 行间距

image-20210404140205085

总结

image-20210404140240612

6.设置元素的透明背景

opacity:

image-20210519131504559

CSS引入方式

1. 内部样式

image-20210404140414915

2. 行内样式

image-20210404140440608

3. 外部样式

image-20210404140530727

总结

image-20210404140543232

Chrome调试

image-20210404141554390

image-20210404141611818

Emmet语法

image-20210404150332214

CSS三大特性

  • 层叠性： 前面的样式会被后面的样式覆盖

  • 继承性：子标签会继承父标签的某些特性，如：text-、font-、line-、color

  • 优先级

    image-20210404155520021

    image-20210404155658745

3. 元素显示模式

HTML 元素一般分为块元素和行内元素两种类型

1. 块元素

image-20210319224124759

2. 行内元素

image-20210403173555679

3.行内块元素

image-20210403173819020

image-20210403173956540

4. 元素显示模式转换

image-20210403174225213

5. 单行文字垂直居中

image-20210403181710009

line-height: 盒子高度

image-20210716114657030

4. CSS背景

image-20210403182028166

image-20210403182054372

image-20210403214627719

image-20210403215136983

image-20210403215146731

image-20210403215903123

image-20210403221037945

image-20210513201245116

image-20210403221048329

image-20210403221300096

background-clip

image-20210716115423873

详解

object-fit属性

对图片进行剪切，保留原始比例。完美解决Img自适应问题

image-20210720101130302

图片自适应

image-20210725224212799

5. 盒子模型

1. 边框

outline:none;

image-20210410153041952

image-20210410153054709

image-20210410153105719

image-20210410153836577

2. padding

image-20210410154206559

image-20210410154218638

image-20210410154627320

如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小.

3. 外边距

image-20210410155503593A

image-20210410155748286

  • 外边距合并

    image-20210410205710765

image-20210410205725525

image-20210410211027239

4. PS基本操作

image-20210410211719505

5. PS切图

image-20210527142619963

image-20210527142658618

image-20210527142724419

5. 圆角、阴影

image-20210410212015454

image-20210410212224072

image-20210410212926194

image-20210411144325973

PS切图

  • 图层切图

    最简单的切图方式：右击图层  导出 PNG 切片。

    合并图层：选中多个图层，ctrl + e 或 在菜单点击图层再点击合并图层。

  • 切片切图

    image-20210411145624540

6. 浮动

1. 传统网页布局的三种方式

网页布局的本质——用 CSS 来摆放盒子。 把盒子摆放到相应位置. 1.1 传统网页布局的三种方式 CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：

  • 普通流（标准流）
  • 浮动
  • 定位
1. 标准流

image-20210410231133377

2. 浮动

有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 因为浮动可以改变元素标 签默认的排列方式.

浮动最典型的应用：可以让多个块级元素一行内排列显示。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

image-20210410232457583

  • 浮动的特性
  1. 浮动元素会脱离标准流(脱标)
  2. 浮动的元素会一行内显示并且元素顶部对齐
  3. 浮动的元素会具有行内块元素的特性.

image-20210410234915607

image-20210410234939502

image-20210410235454050

image-20210411000009259

image-20210411011940979

3. 清除浮动

为什么需要清除浮动

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会 影响下面的标准流盒子。

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。

image-20210411012719453

image-20210411013135882

额外标签法

image-20210411013149798

overflow

image-20210411013412235

after 伪元素法

image-20210411013658352

.clearfix:after { 
 content: ""; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden; 
} 
.clearfix { /* IE6、7 专有 */ 
 *zoom: 1;
}

双尾元素清除浮动

image-20210411013955004

.clearfix:before,.clearfix:after {
 content:"";
 display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
 *zoom:1;
}

image-20210411014045316

7. 定位

定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子。 定位 = 定位模式 + 边偏移 。 定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

image-20210413160646790

image-20210413160657223

1. 静态定位

image-20210413161238679

2. 相对定位

image-20210413161335417

3. 绝对定位

image-20210413161358012

4. 子绝父相

image-20210413163117461

5. 固定定位

image-20210413163230917

image-20210413164024237

6. 粘性定位

image-20210413164312230

image-20210413164409422

7. 定位叠放次序

image-20210413191443344

8. 定位的拓展

image-20210413192236901

image-20210413200109668

image-20210413200121226

image-20210413200415202

9. 网页布局总结

image-20210513002059053

10.元素的显示与隐
  1. display 显示隐藏
  2. visibility 显示隐藏
  3. overflow 溢出显示隐

image-20210513002154503

image-20210513002206581

image-20210513002309211

横向滚动条

image-20210515231639892

image-20210716165927774

overflow-x: auto;

overflow-y: hidden;

word-break
  • normal： 浏览器默认换行方式：不拆分单词，自动换行
  • keep-all： 单词不拆分换行
  • break-all：一律拆分换行

CSS 高级技巧

1.精灵图

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送 请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。 因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。 核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。

image-20210513003155283

  .box1 {
            width: 60px;
            height: 60px;   
            margin: 100px auto;
            background: url(images/sprites.png) no-repeat   -182px 0;
          
        }
        .box2 {
            width: 27px;
            height: 25px;
            /* background-color: pink; */
            margin: 200px;
            background: url(images/sprites.png) no-repeat  -155px -106px;

2. 字体图标

image-20210513084229346

image-20210513084331203

image-20210513084406212

image-20210513084636353

image-20210513085020290

image-20210513085041731

image-20210513085058947

image-20210513085112881

image-20210513085132309

 <style>
    /* 字体声明 */
     @font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?p4ssmb');
  src:  url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
    url('fonts/icomoon.woff?p4ssmb') format('woff'),
    url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

  span {
    font-family: 'icomoon';
    font-size: 100px;
    color:pink;
  }
  </style>
</head>

<body>
    <span></span>
    <span></span>
</body>

3.CSS 三角

image-20210513085651511

4.什么是界面样式

image-20210513085801464

image-20210513090006961

image-20210513090123502

5.vertical-align 属性应用

image-20210513090338539

image-20210513090354818

image-20210513090451016

image-20210513090535530

溢出的文字省略号显示

image-20210513090841503

image-20210513090846160

常见布局技巧

image-20210513091438117

image-20210513092027552

image-20210513092202508

image-20210513092753021

CSS 初始化

image-20210513135221138

HTML5

1.1 HTML5 新增的语义化标签

image-20210513140340132

1.2 HTML5 新增的多媒体标签

image-20210513140430425

image-20210513140452641

image-20210513140709375

image-20210513140716946

image-20210513140730046

image-20210513140742872

image-20210513140756459

image-20210513140806922

1.3 HTML5 新增的 input 类型

image-20210513140817718

1.4 H6TML5 新增的表单属性

image-20210513141004772

CSS3 提高

1. CSS3 新增选择器

1. 属性选择器

image-20210513142056355

2. 结构伪类选择器

image-20210513142400835

image-20210513142414464

n+2 != 2+n;

image-20210513142633453

        ul li:first-child {
            background-color: pink;
        }
        /* 2. 选择ul里面的最后一个孩子 小li */
        ul li:last-child {
            background-color: pink;
        }
         /* 3. 选择ul里面的第2个孩子 小li */
         ul li:nth-child(2) {
            background-color: skyblue;
        }
        ul li:nth-child(6) {
            background-color: skyblue;
        }

 /* 1.把所有的偶数 even的孩子选出来 */
        ul li:nth-child(even) {
            background-color: #ccc;
        }

        /* 2.把所有的奇数 odd的孩子选出来 */
        ul li:nth-child(odd) {
            background-color: gray;
        }
        /* 3.nth-child(n) 从0开始 每次加1 往后面计算  这里面必须是n 不能是其他的字母 选择了所有的孩子*/
        /* ol li:nth-child(n) {
            background-color: pink;
        } */
        /* 4.nth-child(2n)母选择了所有的偶数孩子 等价于 even*/
        /* ol li:nth-child(2n) {
            background-color: pink;
        }
        ol li:nth-child(2n+1) {
            background-color: skyblue;
        } */
        /* ol li:nth-child(n+3) {
            background-color: pink;
        } */
        ol li:nth-child(-n+3) {
            background-color: pink;
        }
3. 伪元素选择器（重点）

image-20210513143707070

 div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        /* div::before 权重是2 */
        div::before {
            /* 这个content是必须要写的 */
            /* display: inline-block; */
            content: '我';
            /* width: 30px;
            height: 40px;
            background-color: purple; */
        }
        div::after {
            content: '小猪佩奇';
        }

image-20210513153024684

image-20210513153040896

image-20210513153049375

2. CSS3 盒子模型

image-20210513160428238

3. 其他特性

1. filter与calc

image-20210513160842342

image-20210513160853236

2. 过渡 transition

image-20210513160901117

image-20210513161020058

  div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 变化的属性 花费时间 运动曲线 何时开始; */
            /* transition: width .5s ease 0s, height .5s ease 1s; */
            /* 如果想要写多个属性，利用逗号进行分割 */
            /* transition: width .5s, height .5s; */
            /* 如果想要多个属性都变化，属性写all就可以了 */
            /* transition: height .5s ease 1s; */
            /* 谁做过渡，给谁加 */
            transition: all 0.5s;
        }
        div:hover {
            width: 400px;
            height: 200px;
            background-color: skyblue;
        }

详情

3. 2D 转换

转换（transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果

转换（transform）你可以简单理解为变形

  • 移动：translate

  • 旋转：rotate

  • 缩放：scale

移动：translate

image-20210601202120270

旋转：rotate

image-20210601202736464

image-20210601203825118

缩放：scale

image-20210601204443103

2D 转换综合写法

image-20210601205249358

4. 动画

image-20210603003636912

image-20210603003648426

image-20210603003831141

image-20210603004523823

@keyframes 动画名称 {
   0%{
        width:100px;
   }  
   100%{
        width:200px;
   }
}

div {
       width: 200px;
       height: 200px;
       background-color: aqua;
       margin: 100px auto;
       /* 调用动画 */
       animation-name: 动画名称;
       /* 持续时间 */
       animation-duration: 持续时间;
    }

image-20210603005254614

动画简写属性

image-20210603005504604

image-20210603011125091

移动WEB开发

1. 视口

image-20210513194646453

image-20210513194658834

image-20210513194712694

image-20210513194723644

image-20210513195528988

image-20210513195940622

2. 二倍图

image-20210513200001142

image-20210513200456255

image-20210513201101503

3. 背景缩放

image-20210513201245116

4. 移动端开发选择

image-20210513202223815

image-20210513202233129

5. 移动端技术解决方案

image-20210513202449895

CSS初始化

image-20210513202501096

官网地址

image-20210513202604277

image-20210513202640544

6. 移动端常见布局

image-20210513203319795

1. 流式布局（百分比布局）

image-20210513204207776

2. flex布局
父项属性

image-20210725221720914

image-20210725221816073

image-20210725221832448

image-20210725221844470

image-20210725221916842

image-20210725221928243

image-20210725222003265

image-20210725222021302

子项属性

image-20210725223748805

image-20210725223802005

image-20210725223814546

image-20210725231139113 image-20210725231152658

image-20210725231236672

image-20210725231249997

image-20210725231940529

3. less

image-20210725232626237

image-20210725232654958

image-20210726011501985

image-20210726011515378

image-20210726011528763

image-20210726011548871

image-20210726011609417

image-20210726011632634

image-20210726011656943

image-20210726011705212

4. rem 适配方案
方案1

image-20210726011733446

image-20210726011814378

image-20210726011823025

方案2

image-20210726012415657

image-20210726012445855

项目知识

image-20210529003616655****

favicon 图标

image-20210528105217707

image-20210528105220815

image-20210528105222993

网站TDK三大标签SEO优化

image-20210528105923172

image-20210528105934066

image-20210528105945915

image-20210528105954434

LOGO SEO 优化

image-20210529003644954

超出部分用省略号显示

overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

Web 服务器

image-20210531221934137

image-20210531221948150

image-20210531221955101

image-20210531222005998

隐藏滚动条

.main::-webkit-scrollbar {
		width: 0 !important
	}
TAT-Li
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DIV+CSS学习笔记总结篇
weixin_34380781的博客
09-04 1859
第一部分 HTML 第一章 职业规划和前景 职业方向规划定位： web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望： 未来IT行业企业需求最多的人才 结合最新的html5抢占移动端的市场 自己创业做老板 随着互联网的普及web开发成为企业的宠儿和核心 web职业发展目标： ...
HTML+CSS 学习笔记
Norman Mises 的学习笔记
07-25 8615
HTML+CSS学习笔记
HTML+CSS学习笔记.zip
01-01
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
尚硅谷前端HTML+CSS学习笔记
07-15
尚硅谷前端HTML+CSS学习笔记 1. 计算机基础知识：计算机俗称电脑，是现代一种用于高速计算的电子计算机器，可以进行数值计算、逻辑计算，还具有存储记忆功能。计算机由硬件和软件组成，硬件是看得见摸得着的物理...
HTML+CSS 学习笔记.zip
12-30
html css js 知识学习代码 源码 提供+源码 供学习参考 html css js 知识学习代码 源码 提供+源码 供学习参考 html css js 知识学习代码 源码 提供+源码 供学习参考 html css js 知识学习代码 源码 提供+源码 供学习...
scss概念及使用
m0_74293254的博客
07-10 1124
/ 样式规则使用参数在上面的例子中，@mixin 关键字定义了一个名为 mixin-name 的混合，可以接受多个参数（如果需要的话），并在其中定义一组样式规则。SCSS 的三种循环结构 @for、@each 和 @while 分别用于按照索引循环、遍历列表或 map 类型数据、以及根据条件循环生成样式。这些循环结构使得 SCSS 更加强大和灵活，能够根据需求生成复杂的 CSS 规则。在 SCSS 中，可以使用自定义函数来增强样式表的功能，这些函数可以接受参数并返回处理后的值。
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
uu0216的博客
07-10 1227
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 19
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 2629
title>充电效果
05.CSS 缓动变量 && 首字下沉 & 放大缩小动画
粉丝们务必加入微信粉丝群
07-14 28
我们可以轻松定义自定义缓动变量,帮助我们的设计脱颖而出。事实上,上面提到的内置函数也可以使用。虽然这些函数适合日常使用,但还有一个功能更强大但令人生畏的选项可用,即。首字下沉，让第一段的第一个字母比其余文本大。在设计中,大多数 Web 开发人员对于。创建一个放大缩小的动画效果。的大多数用例使用内置的。
scss 语法
最新发布
True Truth
07-14 87
scss 是 css 的超集， 主要是引入了 变量， 函数， 继承， 算术计算。
CSS关于居中的问题
热爱WebGIS的博客
07-10 670
由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文字，不会太影响观感。我们可以用百分比来表示，子元素相对父元素移动 50%的距离后，再根据子元素的外边距进行调整。值是写死的，如果 son 的宽度发生改变，子元素也无法水平居中。是写死的，如果父元素的宽度发生改变，子元素就无法水平居中了。子绝父相，子元素设置以下属性，也能进行水平垂直居中。子元素 y 轴移动的距离是父子元素高度差的一半，子元素 x 轴移动的距离是父子元素宽度差的一半。子元素相对父元素移动 50%的距离后，使用。
如何在CSS中控制动画的触发位置？
xixixixixixixi21的博客
07-14 176
在CSS中控制动画的触发位置主要是通过transform属性来实现的。例如，如果你希望动画从某个固定的位置开始，可以设置transform: translate(x, y)，其中x和y是你想让元素偏离其原始位置的距离。通常表示元素静止在原位；可以百分比定位，比如translate(50%, 0)会让元素居中；直接用像素值指定距离。例如，如果你想让一个元素在页面加载时从左侧滑入，可以设置transform:然后配合transition或animation来创建滑动效果。
CSS变换
m0_63165331的博客
07-14 437
本文主要讲述CSS中的变换相关内容。
CSS【详解】边框 border，边框-圆角 border-radius，边框-填充 border-image，轮廓 outline
朝阳39的博客
07-10 1107
template > < div class = " border-dashed " > 1:1的虚线 </ div > </ template > < style scoped > .border-dashed {< template > < div class = " border-dashed " > 1:1的虚线 </ div > </ template > < style scoped > .border-dashed {
【CSS in Depth 2 精译】3.1.2 逻辑属性 + 3.1.3 用好逻辑属性的简写形式
PeacefulWinter的博客
07-14 653
本篇重点介绍了CSS常规流中的一个重要的基础概念——逻辑属性。它是理解flexbox及grid布局核心概念的基础。文章通过详细的对比和示例进行了深入讲解，并列举了常见的逻辑属性与对应的传统属性。最后还介绍了一种将逻辑属性作为样式简写的巧妙方法，值得广大CSS爱好者收藏并实践。
笔记156111
08-08
笔记156111

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值