笔记
关注
分享
扫一扫
二木成林
这个作者很懒，什么都没留下…
展开
-
【笔记】浮动属性float的应用07——浮动可缩放的首字下沉（所有步骤组合在一起）
第1步 - 从一段文字开始在本练习中，我们希望强制将一个下降帽放在一段文本旁边。我们还希望丢弃上限是可扩展的，无论用户的默认字体大小如何 - 这意味着所有测量都将以ems或百分比表示。从一段简单的文字开始。第2步 - 在第一个字母周围添加一个范围将规则应用于第一个字母有两种方法。第一种方法使用“：first-letter”来定位字母，第二种方法使用第一个字母周围的span。虽然第二种方...翻译 2018-12-04 22:27:12 · 429 阅读 · 0 评论 -
【笔记】浮动属性float的应用07——浮动可缩放的首字下沉
第1步 - 从一段文字开始在本练习中，我们希望强制将一个下降帽放在一段文本旁边。我们还希望丢弃上限是可扩展的，无论用户的默认字体大小如何 - 这意味着所有测量都将以ems或百分比表示。从一段简单的文字开始。代码如下所示：<!DOCTYPE html><html><head> <style type="text/css"> ...翻译 2018-12-04 22:27:03 · 312 阅读 · 0 评论 -
【笔记】浮动属性float的应用06——浮动内联列表项（所有步骤组合在一起）
第1步 - 从简单的无序列表开始在本练习中，我们想要一个简单的无序列表并将其转换为水平导航栏。我们将从一个简单的无序列表开始。UL使用ID选择器（id =“navigation”）设置样式，并且两个LI使用类选择器（class =“left”和class =“right”）设置样式。这里可以使用任何名称。第2步 - 删除子弹要删除HTML列表项目符号，请将“list-style-t...翻译 2018-12-03 18:01:42 · 1546 阅读 · 0 评论 -
【笔记】浮动属性float的应用06——浮动内联列表项
第1步 - 从简单的无序列表开始在本练习中，我们想要一个简单的无序列表并将其转换为水平导航栏。我们将从一个简单的无序列表开始。UL使用ID选择器（id =“navlist”）进行样式设置。在本教程中，使用了一个明显的名称来帮助说明这一点，但可以使用任何名称。但是，最好根据类别的含义来命名类，而不是它们的外观。代码如下所示：<!DOCTYPE html><htm...翻译 2018-12-03 18:01:30 · 386 阅读 · 0 评论 -
【笔记】浮动属性float的应用05——使用列表浮动下一个和后一个按钮（所有步骤组合在一起）
第1步 - 从一段文字和一个列表开始在本练习中，我们希望向左浮动一个“后退”按钮，在右侧浮动一个“下一步”按钮。我们可以使用两个div，但为了简单起见，我们将使用两个列表项。我们将从一段文本和一个简单列表开始。UL使用ID选择器（id =“navigation”）设置样式，并且两个LI使用类选择器（class =“left”和class =“right”）设置样式。这里可以使用任何名称。...翻译 2018-12-01 19:59:14 · 415 阅读 · 0 评论 -
【笔记】浮动属性float的应用05——使用列表浮动下一个和后一个按钮
第1步 - 从一段文字和一个列表开始在本练习中，我们希望向左浮动一个“后退”按钮，在右侧浮动一个“下一步”按钮。我们可以使用两个div，但为了简单起见，我们将使用两个列表项。我们将从一段文本和一个简单列表开始。UL使用ID选择器（id =“navigation”）设置样式，并且两个LI使用类选择器（class =“left”和class =“right”）设置样式。在本教程中，使用了明显的...翻译 2018-12-01 19:59:03 · 461 阅读 · 0 评论 -
【笔记】浮动属性float的应用04—浮动图像缩略图库（所有步骤组合在一起）
第1步 - 从一些缩略图和标题开始在本练习中，我们希望将所有缩略图移动到行中，例如表格单元格。我们将要使用的方法允许任意数量的图像彼此相邻，具体取决于包含框的宽度。从6个图像和标题开始，每个图像和标题都在自己的div中。这些div都被赋予了一个名为“thumbnail”的类。第2步 - 浮动div将“float：left”应用于.thumbnail规则。这将强制每个div到包含框的...翻译 2018-12-01 18:32:05 · 217 阅读 · 0 评论 -
【笔记】浮动属性float的应用04——浮动图像缩略图库
第1步 - 从一些缩略图和标题开始在本练习中，我们希望将所有缩略图移动到行中，例如表格单元格。我们将要使用的方法允许任意数量的图像彼此相邻，具体取决于包含框的宽度。从6个图像和标题开始，每个图像和标题都在自己的div中。这些div都被赋予了一个名为“thumbnail”的类。最好根据类别的含义来命名类，而不是它们的外观。你可以更进一步，使用CSS来定义图像的宽度，使用以下规则“.thu...翻译 2018-12-01 18:31:49 · 233 阅读 · 0 评论 -
【笔记】浮动属性float的应用03——浮动一系列“清晰：右”图像（所有步骤一起结合）
第1步 - 从一段文字和一系列图片开始对于本练习，我们希望将图像强制到右侧以允许内容与它们一起流动。我们还想在图像的左侧和底侧添加边距以推送内容。我们还希望图像在右边缘上方堆叠在一起。类选择器 - “floatright” - 已应用于每个图像。这里可以使用任何名称。第2步 - 将浮动：应用于图像要将图像强制移到右边缘，“float：right”将应用于类选择器。在这种情况下不需要...翻译 2018-12-01 17:15:43 · 270 阅读 · 0 评论 -
【笔记】浮动属性float的应用08——液体两列布局
第1步 - 从语义标记的代码开始要将页面布置为两列，您需要从基本页面结构开始。在这种情况下，我们将使用一些虚拟内容来创建两列模板。页面已分为五个单独的div，每个div都有一个唯一的ID选择器。div被标记; “容器”（包裹整个页面的内容），“top”（用于顶部横幅），“leftnav”（用于较小的左列），“content”（用于主要内容）和“footer”（用于页面底部的页脚）。在本教程...翻译 2018-12-06 12:58:45 · 384 阅读 · 0 评论 -
【笔记】浮动属性float的应用08——液体两列布局（所有步骤组合在一起）
第1步 - 从语义标记的代码开始要将页面布置为两列，您需要从基本页面结构开始。在这种情况下，我们将使用一些虚拟内容来创建两列模板。该页面已被分为五个独立的div，每个div都被赋予一个唯一的ID选择器。div被标记; “容器”（包裹整个页面的内容），“top”（用于顶部横幅），“leftnav”（用于较小的左列），“content”（用于主要内容）和“footer”（用于页面底部的页脚）。...翻译 2018-12-06 12:58:54 · 342 阅读 · 0 评论 -
【笔记】列表教程01——子弹的背景图像
为什么要使用背景图像作为子弹？CSS可用于将列表项目符号更改为正方形或圆形，但这对其外观或位置提供的控制非常少。可以使用“list-style-image”将HTML项目符号替换为图形图像。但是，在大多数现代浏览器中，这些图像的放置不一致。对于子弹在列表项旁边的显示方式也很少有控制权。一个更好的选择是使用子弹的背景图像。那么这是如何实现的呢？第1步 - 制作基本清单从基本的无序...翻译 2019-01-13 14:03:42 · 421 阅读 · 0 评论 -
【笔记】浮动属性float的应用09——液体三列布局（所有步骤相结合）
第1步 - 从语义标记的代码开始要将页面布置为三列，您需要从基本页面结构开始。在这种情况下，我们将使用一些虚拟内容来创建三列模板。页面已分为六个独立的div，每个div都有一个唯一的ID选择器。div被标记; “容器”（包裹整个页面的内容），“顶部”（对于顶部横幅），“leftnav”（对于较小的左列），“rightnav”（对于较小的右列），“content”（对于主要内容）和“页脚”（对于...翻译 2018-12-09 17:35:08 · 378 阅读 · 0 评论 -
【笔记】浮动属性float的应用09——液体三列布局
第1步 - 从语义标记的代码开始要将页面布置为三列，您需要从基本页面结构开始。在这种情况下，我们将使用一些虚拟内容来创建三列模板。页面已分为六个独立的div，每个div都有一个唯一的ID选择器。div被标记; “容器”（包裹整个页面的内容），“顶部”（对于顶部横幅），“leftnav”（对于较小的左列），“rightnav”（对于较小的右列），“content”（对于主要内容）和“页脚”（对于...翻译 2018-12-09 17:34:58 · 360 阅读 · 0 评论 -
【笔记】浮动属性float的应用03——浮动一系列“清晰：右”图像
第1步 - 从一段文字和一系列图片开始对于本练习，我们希望将图像强制到右侧以允许内容与它们一起流动。我们还想在图像的左侧和底侧添加边距以推送内容。我们还希望图像在右边缘上方堆叠在一起。类选择器已应用于每个图像。我们使用名称“floatright”来帮助说明这一点，但可以使用任何名称。但是，最好根据类别的含义来命名类，而不是它们的外观。代码如下所示：<!DOCTYPE htm...翻译 2018-12-01 17:15:06 · 343 阅读 · 0 评论 -
【笔记】浮动属性float的应用02——浮动图像和标题（所有步骤组合在一起）
第1步 - 从一段文字和一张图片开始对于本练习，我们希望将图像强制到右侧以允许内容与其一起流动。我们还想在图像下面有一个标题。第2步 - 添加div图像和标题第一个修改是HTML代码。在图像和标题周围添加div。在这种情况下，我们还在div中添加了一个类选择器（class =“floatright”）。这里可以使用任何名称。<div class="floatright">...翻译 2018-12-01 15:09:33 · 412 阅读 · 0 评论 -
【笔记】学习CSS布局04——max-width
#main { max-width: 600px; margin: 0 auto; }在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要，调整下浏览器窗口大小检查下吧！顺便提下， 所有的主流浏览器包括IE7+在内都支持 max-width ，所以放心大胆的用吧。 代码实例：<!DOCTYP...原创 2018-11-29 12:56:34 · 344 阅读 · 1 评论 -
【笔记】学习CSS布局15——inline-box
你可以创建很多网格来铺满浏览器。在过去很长的一段时间内使用 float 是一种选择，但是使用 inline-block 会更简单。让我们看下使用这两种方法的例子：困难的方式（使用浮动）<!DOCTYPE html><html><head> <style type="text/css"> .box { float:left;...原创 2018-11-30 19:00:56 · 1418 阅读 · 0 评论 -
【笔记】学习CSS布局14——媒体查询
“响应式设计（Responsive Design” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！媒体查询是做此事所需的最强大的工具。让我们使用百分比宽度来布局，然后在浏览器变窄到无法容纳侧边栏中的菜单时，把布局显示成一列：<!DOCTYPE html><html><head> <sty...原创 2018-11-30 18:39:34 · 273 阅读 · 0 评论 -
【笔记】学习CSS布局03——margin:auto;
#main { width: 600px; margin: 0 auto; }设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。让我们再来改进下这个方案......原创 2018-11-29 09:58:45 · 342 阅读 · 0 评论 -
【笔记】学习CSS布局13——百分比宽度
百分比是一种相对于包含块的计量单位。它对图片很有用：如下我们实现了图片宽度始终是容器宽度的50%。把页面缩小看下效果！<!DOCTYPE html><html><head> <style type="text/css"> article { border:5px solid #fdc72f; overflow:auto;...原创 2018-11-30 18:39:15 · 921 阅读 · 0 评论 -
【布局】学习CSS布局12——浮动布局例子
完全使用 float 来实现页面的布局是很常见的。这里有一个我之前用 position 实现的布局例子，这次我使用 float 实现了它。nav { float: left; width: 200px;}section { margin-left: 200px;}这个例子和之前那个外观一模一样。请注意我们在容器上做了“清除浮动”。原本在这个例子中是不需要的，但是当 na...原创 2018-11-30 18:11:29 · 1058 阅读 · 0 评论 -
【笔记】学习CSS布局11——清除浮动(chearfix hack)
在使用浮动的时候经常会遇到一个古怪的事情：<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .clearfix { border:1px solid green; } img { float:righ原创 2018-11-30 18:07:10 · 259 阅读 · 0 评论 -
【笔记】学习CSS布局02——“display”属性
"display"属性display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。 block...原创 2018-11-29 08:59:43 · 367 阅读 · 0 评论 -
【笔记】学习CSS布局10——clear
clear 属性被用于控制浮动。比较下面两个例子：这是没有clear的实例：<!DOCTYPE html><html><head> <style type="text/css"> .box { float:left; width:200px; height:100px; margin:1em; bor...原创 2018-11-30 18:10:41 · 225 阅读 · 0 评论 -
【笔记】学习CSS布局05——盒模型
在我们讨论宽度的时候，我们应该讲下与它相关的另外一个重点知识：盒模型。当你设置了元素的宽度，实际展现的元素却超出你的设置：这是因为元素的边框和内边距会撑开元素。看下面的例子，两个相同宽度的元素显示的实际宽度却不一样。.simple { width: 500px; margin: 20px auto;}.fancy { width: 500px; margin: 20px...原创 2018-11-29 19:08:29 · 194 阅读 · 1 评论 -
【笔记】学习CSS布局16——inline-block布局
你可以使用 inline-block 来布局。有一些事情需要你牢记：vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。 你需要设置每一列的宽度 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙代码实例：<!DOCTYPE html><html><head> <st...原创 2018-11-30 19:01:55 · 398 阅读 · 0 评论 -
【笔记】浮动属性float的应用02——浮动图像和标题
第1步 - 从一段文字和一张图片开始对于本练习，我们希望将图像强制到右侧以允许内容与其一起流动。我们还想在图像下面有一个标题。代码如下所示：<!DOCTYPE html><html><head> <style type="text/css"> </style></head><body&翻译 2018-12-01 15:07:04 · 633 阅读 · 0 评论 -
【笔记】浮动属性float的应用01——将图像浮动到右侧（所有步骤结合一起）
第1步 - 从一段文字和一张图片开始对于本练习，我们希望将图像强制到右侧以允许内容与其一起流动。我们还想在图像的左侧和底侧添加边距以推送内容。最后，我们想在图像周围添加边框。我们从一段文本中的图像开始。第2步 - 将浮动：向右移动到图像要将图像强制移动到右边缘，使用类选择器将“float：right”应用于图像。在这种情况下，类的名称是“.floatright”，但可以使用任何名称。在...翻译 2018-12-01 10:09:04 · 1424 阅读 · 0 评论 -
【笔记】浮动属性float的应用01——将图像浮动到右侧
第1步 - 从一段文字和一张图片开始对于本练习，我们希望将图像强制到右侧以允许内容与其一起流动。我们还想在图像的左侧和底侧添加边距以推送内容。最后，我们想在图像周围添加边框。我们从一段文本中的图像开始。代码如下所示：<!DOCTYPE html><html><head> <style type="text/css"> </s...翻译 2018-12-01 10:08:48 · 1498 阅读 · 0 评论 -
【笔记】学习CSS布局09——float
另一个布局中常用的CSS属性是 float 。Float 可用于实现文字环绕图片，如下：img { float: right; margin: 0 0 1em 1em;} 代码实例：<!DOCTYPE html><html><head> <style type="text/css"> div { bord...原创 2018-11-30 09:08:38 · 209 阅读 · 0 评论 -
【笔记】学习CSS布局08——position例子
通过具体的例子可以帮助我们更好地理解“position”。下面是一个真正的页面布局。.container { position: relative;}nav { position: absolute; left: 0px; width: 200px;}section { /* position is static by default */ margin-le...原创 2018-11-29 20:07:43 · 353 阅读 · 0 评论 -
【笔记】学习CSS布局18——flexbox
新的 flexbox 布局模式被用来重新定义CSS中的布局方式。使用flexbox你还可以做的更多；这里只是一些让你了解概念的例子：使用 Flexbox 的简单布局代码实例：<!DOCTYPE html><html><head> <style type="text/css"> .container { display...原创 2018-11-30 20:11:43 · 325 阅读 · 0 评论 -
【笔记】学习CSS布局07——position
为了制作更多复杂的布局，我们需要讨论下 position 属性。它有一大堆的值，名字还都特抽象，别提有多难记了。让我们先一个个的过一遍，不过你最好还是把这页放到书签里。static.static { position: static;}static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“position...原创 2018-11-29 19:28:20 · 225 阅读 · 0 评论 -
【笔记】学习CSS布局17——column
这里有一系列新的CSS属性，可以帮助你很轻松的实现文字的多列布局。让我们瞧瞧：.three-column { padding: 1em; -moz-column-count: 3; -moz-column-gap: 1em; -webkit-column-count: 3; -webkit-column-gap: 1em; column-count: 3; col...原创 2018-11-30 20:11:31 · 276 阅读 · 0 评论 -
【笔记】学习CSS布局06——box-sizing
人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子，唯一的区别是两个元素都设置了 box-sizing: border-box; ：.simple { width: 500px; margin: 2...原创 2018-11-29 19:17:56 · 415 阅读 · 0 评论 -
【笔记】学习CSS布局01——没有布局
没有布局如果你只想把所有内容都塞进一栏里，那么不用设置任何布局也是OK的。然而，如果用户把浏览器窗口调整的很大，这时阅读网页会非常难受：读完每一行之后，你的视觉焦点要从右到左移动一大段距离。试着调整下浏览器窗口大小你就明白我的意思了！在解决这个问题之前，我们需了解一个很重要的属性： display...原创 2018-11-29 08:52:51 · 198 阅读 · 0 评论