HTML及CSS学习笔记 08 - 浮动

最新推荐文章于 2021-08-24 02:55:22 发布
最新推荐文章于 2021-08-24 02:55:22 发布
阅读量361 收藏 2
点赞数
分类专栏： HTML及CSS学习笔记 文章标签： HTML CSS float 浮动 清除浮动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cgl125167016/article/details/89925702
版权

本文是HTML及CSS课程的第八课。浮动是在网页设计中经常用到的一种改变文档流的技巧。本文主要介绍浮动的概念、用法及清除浮动等内容

文章目录

一、浮动

1、浮动的概念

将某一元素从默认的、正常的文档流中脱离出来，使正常文档流中之后的其他未浮动的块级元素忽略该元素，就好像该元素漂浮在之后其他未浮动的块级元素上面，这便是浮动。
浮动常常用于文字环绕的图文混排，在网页整体布局时也多有运用。

2、如何实现浮动

在CSS中，我们通过float属性实现元素的浮动。float属性及值的说明如下：

属性及值说明
float: left;元素向左浮动
float: right;元素向右浮动
float: none;默认值。元素不浮动，按正常文档流显示

3、一些浮动案例

3.1、案例1 - 没有浮动的正常文档流

案例1演示元素在正常文档流中的显示效果。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 正常的文档流 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      .d1 {height: 150px; width: 150px; border: 10px dotted lightsalmon;}
      .d2, .d3 {height: 100px; width: 100px; border: 10px solid lightgreen;}
    </style>
  </head>
  <body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
  </body>
</html>

页面浏览效果：
正常的文档流
说明：

  • 当元素没有设置float属性使其浮动时，元素会按照正常的文档流显示。

3.2、案例2 - 基本浮动效果

案例2演示元素最基本的像右和向左浮动的显示效果。
向右浮动的示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 向右浮动 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      .d1 {height: 150px; width: 150px; border: 10px dotted lightsalmon; float: right;}
      .d2, .d3 {height: 100px; width: 100px; border: 10px solid lightgreen;}
    </style>
  </head>
  <body>
    <div class="d1">向右浮动</div>
    <div class="d2"></div>
    <div class="d3"></div>
  </body>
</html>

向左浮动的示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 向左浮动 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      .d1 {height: 150px; width: 150px; border: 10px dotted lightsalmon; float: left;}
      .d2, .d3 {height: 100px; width: 100px; border: 10px solid lightgreen;}
    </style>
  </head>
  <body>
    <div class="d1">向左浮动</div>
    <div class="d2"></div>
    <div class="d3"></div>
  </body>
</html>

页面浏览效果：
向左和向右浮动
说明：

  • 元素只能设置左浮动或右浮动。
  • 浮动元素已经不在正常的文档流中，文档流中之后的其他未浮动的块级元素表现得就像浮动元素不存在一样。

3.3、案例3 - 多个浮动元素向同方向浮动

案例3演示多个浮动元素向同一方向浮动时的显示效果。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 多个浮动元素向同一方向浮动 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      .d1, .d2, .d3 {height: 120px; width: 120px; border: 10px dotted lightsalmon; float: left;}
    </style>
  </head>
  <body>
    <div class="d1">向左浮动</div>
    <div class="d2">向左浮动</div>
    <div class="d3">向左浮动</div>
  </body>
</html>

页面浏览效果：
在这里插入图片描述
说明：

  • 元素在浮动时，直到它的外边缘碰到父元素或前一个浮动元素为止。
  • 如果父元素太窄，无法容纳水平排列的多个浮动元素，那么浮动元素将按顺序自动向下另起一行排列。

3.4、案例4 - 浮动元素被之前的浮动元素 “卡住”

案例4演示多个浮动元素向同一方向浮动时被 “卡住” 的情况。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 浮动元素被之前的浮动元素卡住 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      .d1 {height: 150px; width: 150px; border: 10px dotted lightsalmon; float: left;}
      .d2, .d3 {height: 120px; width: 120px; border: 10px dotted lightsalmon; float: left;}
    </style>
  </head>
  <body>
    <div class="d1">向左浮动1</div>
    <div class="d2">向左浮动2</div>
    <div class="d3">向左浮动3</div>
  </body>
</html>

页面浏览效果：
浮动元素被之前的浮动元素卡住
说明：

  • 如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住” 。
  • 通俗的理解这一现象，浮动元素会尽可能不换行。
  • 如果浮动元素已经被挤到下一行，它也不会再出现在上一行中了。例如我们将上例中的第一个和第二个div标签样式调换，便会看到如下效果：
    浮动元素不再挽回已经被挤下来的高度

3.5、案例5 - 浮动元素和行级标签混排1

案例5演示浮动元素和行级标签混排的效果。本例中浮动元素和行级标签处于同级。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 浮动元素和行级标签混排 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      .d1 {height: 120px; width: 120px; border: 10px dotted lightsalmon; float: left;}
    </style>
  </head>
  <body>
    <div class="d1">向左浮动</div>
    <span>第一个span标签中的测试文本，第一个span标签中的测试文本，第一个span标签中的测试文本，第一个span标签中的测试文本。</span>
    <span>第二个span标签中的测试文本，第二个span标签中的测试文本，第二个span标签中的测试文本，第二个span标签中的测试文本。</span>
  </body>
</html>

页面浏览效果：
浮动元素和行级标签混排
说明：

  • 行级标签仍然不会忽略浮动元素，将为浮动元素留出空间，行级标签将围绕浮动元素。
  • 将例子中的<span>开始标签和</span>结束标签删除，只留下<span>标签体中的文本，效果是一样的。事实上，行级标签（包括开始标签、结束标签和标签体中的文本）或者一段单独的文本，我们称之为一段文本流，而文本流不会忽略浮动元素，将会围绕浮动元素排列。

3.6、案例6 - 浮动元素和行级标签混排2

案例6仍然演示浮动元素和行级标签混排，本例中的浮动元素和行级标签并不处于同级。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 浮动元素和行级标签混排 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      .d1 {height: 150px; width: 150px; border: 10px dotted lightsalmon; float: left;}
      .d2, .d3 {height: 120px; width: 360px; border: 10px solid lightgreen;}
    </style>
  </head>
  <body>
    <div class="d1">向左浮动</div>
    <div class="d2"><span>由于第一个div元素向左浮动，后面的div元素忽略了第一个div元素本来的位置，但是文本流仍然会为浮动元素留出空间。</span></div>
    <div class="d3"><span>由于第一个div元素向左浮动，后面的div元素忽略了第一个div元素本来的位置，但是文本流仍然会为浮动元素留出空间。</span></div>
  </body>
</html>

页面浏览效果：
浮动元素和行级标签混排
说明：

  • 即使块级元素忽略了浮动元素，块级元素中的行级标签仍然会为浮动元素留下空间。
  • 同样，将例子中的<span>开始标签和</span>结束标签删除，只留下<span>标签体中的文本，效果是一样的。即文本流不会忽略浮动元素。

3.7、案例7 - 在父元素中浮动

案例7演示浮动元素在父元素中浮动时的效果。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 在父元素中浮动 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      .d-parent {width: 150px; border: 10px solid lightsalmon; margin: 0 auto;}
      .d-float {height: 100px; width: 100px; border: 10px dotted lightgreen; float: left;}
    </style>
  </head>
  <body>
    <div class="d-parent">
      <div class="d-float"></div>
    </div>
  </body>
</html>

页面浏览效果：
在父元素中浮动
说明：

  • 样式属性及值margin: 0 auto;设置元素没有上下边距，在水平方向上左右居中。
  • 大多情况下，浮动元素在父元素中浮动时，不再撑起父元素的高度。

3.8、案例8 - 分栏设计

案例8演示用浮动布局实现分栏设计。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 分栏设计 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      .d-parent {height: 200px; width: 480px; border: 10px solid lightgreen; margin: 0 auto;}
      .d-float {height: 180px; width: 140px; border: 10px dotted lightsalmon; float: left;}
    </style>
  </head>
  <body>
    <div class="d-parent">
      <div class="d-float">第一个分栏</div>
      <div class="d-float">第二个分栏</div>
      <div class="d-float">第三个分栏</div>
    </div>
  </body>
</html>

页面浏览效果：
分栏设计

3.9、案例9 - 行标签浮动

案例9演示行级标签浮动的效果。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 行级标签浮动 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      .span-float {height: 100px; width: 100px; border: 10px dotted lightsalmon; float: left;}
      .d {height: 150px; width: 150px; border: 10px solid lightgreen;}
    </style>
  </head>
  <body>
    <span class="span-float">这是span标签中的文本</span>
    <div class="d">这是div标签中的文本</div>
  </body>
</html>

页面浏览效果：
行级标签浮动
说明：

  • 给行级标签设置浮动，浏览器会自动将行级标签当作块标签处理。效果和设置块标签浮动时一致。

4、浮动特性总结

  1. 只能设置左浮动或右浮动。
  2. 浮动元素脱离正常文档流，正常文档流中之后的其他未浮动块级元素忽略该浮动元素。
  3. 元素浮动到它的外边缘碰到父元素或前一个浮动元素为止。
  4. 浮动元素会尽可能不换行。
  5. 文本流不会忽略浮动元素，将会围绕浮动元素排列。
  6. 大多情况下，浮动元素在父元素中浮动时，不再撑起父元素的高度。
  7. 行级标签设置浮动，行级标签将会转变成块标签。

二、清除浮动

1、什么是清除浮动

元素在浮动之后，周围的元素会重新排列，有时会带来一些我们不希望看到的问题（比如无法撑开父元素的高度），为了解决这些问题，我们可以通过清除浮动来控制浮动元素周围元素的行为。
即清除浮动是一种控制浮动元素周围元素行为的方式。通过清除浮动可以控制某一元素两侧是否可以出现浮动元素。

2、如何清除浮动

在CSS中，我们通过clear属性来实现清除浮动。clear属性及值的说明如下：

属性及值说明
clear: left;在左侧不允许出现向左浮动的元素
clear: right;在右侧不允许出现向右浮动的元素
clear: both;相当于同时设置了clear: left;和clear: right;
clear: none;默认值。允许浮动元素出现在两侧

3、一些清除浮动的案例

3.1、案例1 - 最基本的清除浮动

案例1演示最基本的清除浮动效果。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 最基本的清除浮动效果 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      .d1 {height: 150px; width: 150px; border: 10px dotted lightsalmon; float: left;}
      .d2 {height: 100px; width: 100px; border: 10px solid lightgreen; clear: left;}
    </style>
  </head>
  <body>
    <div class="d1">向左浮动</div>
    <div class="d2">我所在的div元素设置了清除左浮动</div>
  </body>
</html>

页面浏览效果：
最基本的清除浮动
说明：

  • 第二个div标签在没有设置清除浮动时，会忽略浮动元素的位置；设置清除左浮动clear: left;后，由于左侧不允许出现向左浮动元素，所以只能另起一行排列。

3.2、案例2 - 多个标题下分别有多个浮动元素

案例2演示多个标题下分别有多个浮动元素时，如何保持界面整齐。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 多个标题下分别有多个浮动元素 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      .d-float {height: 100px; width: 100px; border: 10px dotted lightsalmon; float: left;}
      h1:not(:first-of-type) {clear: left;}
    </style>
  </head>
  <body>
    <h1>标题1</h1>
    <div class="d-float">向左浮动</div>
    <div class="d-float">向左浮动</div>
    <div class="d-float">向左浮动</div>
    <h1>标题2</h1>
    <div class="d-float">向左浮动</div>
    <div class="d-float">向左浮动</div>
    <div class="d-float">向左浮动</div>
  </body>
</html>

页面浏览效果：
多个标题下分别有多个浮动元素
说明：

  • h1:not(:first-of-type)表示选择属于<h1>标签父元素的非第一个<h1>标签。

3.3、案例3 - 清除两侧的浮动

案例3演示清除两侧浮动的效果。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 清除两侧的浮动 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      .d1 {width: 100px; border: 10px dotted lightsalmon; float: left;}
      .d2 {width: 100px; border: 10px dotted lightsalmon; float: right;}
      .d3 {height: 100px; width: 400px; border: 10px solid lightgreen; clear: both;}
    </style>
  </head>
  <body>
    <div class="d1">向左浮动向左浮动</div>
    <div class="d2">向右浮动</div>
    <div class="d3">d3</div>
  </body>
</html>

页面浏览效果：
清除两侧的浮动
说明：

  • 试着增加第一个和第二个浮动的<div>元素中的文字，用来改变它们的高度，可以看到第三个<div>元素由于清除了两侧的浮动，该元素的两侧都不允许出现向同侧浮动的元素，所以始终会在高度较高的浮动的<div>元素下方另起一行排列。

3.4、案例4 - 分栏设计

案例4演示用浮动和清除浮动共同实现分栏设计。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 分栏设计 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      .d-parent {width: 480px; border: 10px solid lightgreen; margin: 0 auto;}
      .d-float {height: 180px; width: 140px; border: 10px dotted lightsalmon; float: left;}
      .d1 {height: 220px;}
      .d-clear {clear: left;}
    </style>
  </head>
  <body>
    <div class="d-parent">
      <div class="d-float d1">第一个分栏</div>
      <div class="d-float">第二个分栏</div>
      <div class="d-float">第三个分栏</div>
      <div class="d-clear"></div>
    </div>
  </body>
</html>

页面浏览效果：
分栏设计
说明：

  • 大多情况下，浮动元素都无法撑开父元素的高度，而通常都希望子元素位于父元素内部，所以，可以添加一个没有具体内容的<div class="d-clear">，由于清除浮动的特性，该div左侧不允许出现向左浮动的元素，只能另起一行，位于同级所有向左浮动的元素的下部，同时这个元素由于没有浮动，可以撑开父元素的高度，让分栏均处于父元素内部。
  • 例子中添加的div由于没有内容，只是用于调整布局，并不符合W3C提倡的内容与表现分离的规范。下面是一个更加优雅的例子：
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 分栏设计 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      .d-parent {width: 480px; border: 10px solid lightgreen; margin: 0 auto;}
      .d-float {height: 180px; width: 140px; border: 10px dotted lightsalmon; float: left;}
      .d1 {height: 220px;}
      .d-parent:after {content: ""; display: block; clear: left;}
    </style>
  </head>
  <body>
    <div class="d-parent">
      <div class="d-float d1">第一个分栏</div>
      <div class="d-float">第二个分栏</div>
      <div class="d-float">第三个分栏</div>
    </div>
  </body>
</html>

3.5、案例5 - 行标签清除浮动

案例5演示给行标签设置清除浮动的效果。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 行标签清除浮动 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      .d1 {height: 120px; width: 120px; border: 10px dotted lightsalmon; float: left;}
      span {clear: left;}
    </style>
  </head>
  <body>
    <div class="d1">向左浮动</div>
    <span>第一个span标签中的测试文本，第一个span标签中的测试文本，第一个span标签中的测试文本，第一个span标签中的测试文本。</span>
    <span>第二个span标签中的测试文本，第二个span标签中的测试文本，第二个span标签中的测试文本，第二个span标签中的测试文本。</span>
  </body>
</html>

页面浏览效果：
行标签清除浮动
说明：

  • 在样式表中添加了span {clear: left;}，让<span>标签左侧不允许出现向左浮动的元素，然而，页面布局并没有什么变化，<span>标签仍然围绕浮动元素排列。
  • 事实上，清除浮动只对块级元素有效，并不会对文本流产生任何影响。

4、清除浮动特性总结

  1. 对某一元素设置清除浮动，该元素的一侧会不允许出现向同侧浮动的元素。
  2. 只有对块级元素设置清除浮动，才有效果。
chodenke
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS学习笔记四---背景属性 & 浮动属性
Flora_hsx的博客
07-11 322
背景属性 & 浮动属性
HTML&CSS基础自学笔记---实现静态网页
10-30
总之，HTML和CSS的学习是成为前端开发者的第一步，理解它们的基本结构、标签和样式规则，能够帮助初学者构建出功能完整、美观的静态网页。通过实践和不断学习，开发者可以进一步掌握更复杂的交互效果和响应式设计，...
HTML学习笔记——浮动
progammer10086的博客
07-30 324
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;display&lt;/title&gt; &lt;style&gt; p{ width:
HTML入门学习笔记--CSS浮动(7)
qq_孤小狼的博客
01-12 442
54-清空默认边距1.为什么要清空默认边距(外边距和内边距)在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等, 所以在企业开发中, 编写代码之前第一件事情就是清空默认的边距2.如何清空默认的边距格式 *{ margin: 0; padding: 0; }实际开发中不推荐使用这种格式!!! 3.注意点**通配符选择器会找导(遍历)当前界面中所有的标签, 所以性能不好 企业开发中可以从这个网址
CSS学习笔记8-浮动（float）
emmm520的博客
08-24 256
CSS学习笔记8——浮动 浮动 由于div、h1、h2、p等标签是块级标签，会独占一行，如果想让多个块级标签在一行显示，需要用到浮动标签。 浮动在css中用float来表示，常用值为left，right。 块级标签与行级标签演示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>块级标签</title> <style type="tex
CSS学习笔记二--浮动
qq_45231291的博客
06-04 231
浮动（float）：用于元素“水平”方向的布局 可选值：none：默认值，不开启浮动 left：元素向左浮动 right：元素向右浮动 浮动元素的特点： 1、浮动元素会脱离文档流，不会占用文档流中的位置 2、元素浮动以后，浮动元素下的块元素会自动向上移动 3、浮动元素只能向左侧或右...
CSS 学习笔记 - 浮动
灵台方寸山斜月三星洞
09-13 260
CSS 学习笔记 - 定位浮动浮动类型清除浮动clear 属性after 伪类overflow 属性BFC块格式化上下文参考资料 浮动 { float: left | right | none | inline-start | inline-end; } 设置浮动后元素脱离文档流，并变为块级元素。 允许文本和内联元素环绕它。 left | rigth 设置浮动元素在容器中的停靠方向 。 同一浮动方向的元素可排列停靠（类似于在它们在一个单独的文档流中）。 浮动边界在父元素的padding内 浮动类型
css学习笔记-float浮动布局
Laollaoaolao的博客
08-06 291
浮动布局 HTML元素的分类 display属性 display:block 可以将不能设置宽度和高度的行内元素变得可以设置高度和宽度，例如a、span display:none 可以将元素隐藏 float浮动布局 float:left 将元素设置为浮动元素(float),块元素可以在同一行显示 .container{ width: 300px; height: 300px; border: 1px solid red; float: left; } .side{
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
asdfgh0077的博客
06-12 800
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
HTML及CSS学习笔记 10 - 边距合并
codeke的博客
05-14 727
边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它比较容易造成混淆。本文主要就边距合并问题进行介绍
学习笔记-----css浮动总结
这个世界上有各种各样的人.
08-04 223
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、CSS浮动概念二、css浮动2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、CSS浮动概念 1.浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 2.由于浮动框不在文档的普通流中，所以文档的普通流中的块
学习笔记18:CSS清除浮动
01-08
在CSS布局中，浮动元素（float）经常被用来创建多列布局或使文本环绕图片等效果。然而，浮动元素会带来一个问题，即它们可能会导致其父元素的高度塌陷，也就是父元素不再包含其浮动子元素，这在设计复杂的网页布局时...
HTML_CSS学习笔记.docx
07-15
HTML 和 CSS 是构建网页内容和样式的两大核心技术。HTML（HyperText Markup Language）是一种标记语言，用于描述网页的结构和内容。CSS（Cascading Style Sheets）则负责控制网页的呈现样式，包括颜色、字体、布局等...
CSS 学习笔记
09-25
在CSS学习过程中，了解并熟练掌握ID和Class的使用是非常基础且重要的。ID与Class都是CSS选择器，但它们有着不同的特性和应用场景。 ID选择器（#）的主要优点在于其高优先级，这意味着当需要为特定元素赋予特殊样式...
css经典学习笔记.zip
11-01
综上所述，《CSS经典学习笔记》旨在提供一个全面的CSS学习路径，无论你是初学者还是有经验的开发者，都能从中受益，提升你的CSS技能和网页设计能力。通过深入实践和不断探索，你会发现CSS不仅可以打造出美观的界面，...
HTML及CSS学习笔记 11 - 盒子的边框和阴影
codeke的博客
05-15 1570
本文是HTML及CSS课程的第十一课。主要介绍的内容为，CSS中如何给盒子添加圆角边框及如何给盒子添加阴影
HTML及CSS学习笔记 02 - HTML超链接
codeke的博客
05-11 1324
本文是HTML及CSS课程的第二课，介绍HTML中的超链接原理，举例制作超链接；另外介绍绝对路径和相对路径各自的含义
HTML及CSS学习笔记 14 - web中的颜色
codeke的博客
05-21 974
本文是HTML及CSS课程的第十四课。主要介绍CSS中经常使用的各种颜色格式、原理、设置方法等，另外还会介绍透明度的设置等内容
HTML及CSS学习笔记 03 - 常用标签
codeke的博客
05-11 824
本文是HTML及CSS课程的第三课，介绍一些在制作HTML文档时经常用到的块标签和行标签
HTML与CSS学习笔记：基础与常见标签解析
是一份个人整理的HTML与CSS学习笔记，共计120页，内容清晰，包括效果截图和代码示例，非常适合HTML和CSS初学者作为参考。” HTML（HyperText Markup Language）是一种标记语言，常用于创建网页。CSS（Cascading ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值