2018年11月_二木成林

原创【笔记】学习CSS布局18——flexbox

新的 flexbox 布局模式被用来重新定义CSS中的布局方式。使用flexbox你还可以做的更多；这里只是一些让你了解概念的例子：使用 Flexbox 的简单布局代码实例：<!DOCTYPE html><html><head> <style type="text/css"> .container { display...

2018-11-30 20:11:43 241

原创【笔记】学习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 255

原创【笔记】学习CSS布局16——inline-block布局

你可以使用 inline-block 来布局。有一些事情需要你牢记：vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。你需要设置每一列的宽度如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙代码实例：<!DOCTYPE html><html><head> <st...

2018-11-30 19:01:55 356

原创【笔记】学习CSS布局15——inline-box

你可以创建很多网格来铺满浏览器。在过去很长的一段时间内使用 float 是一种选择，但是使用 inline-block 会更简单。让我们看下使用这两种方法的例子：困难的方式（使用浮动）<!DOCTYPE html><html><head> <style type="text/css"> .box { float:left;...

2018-11-30 19:00:56 1358

原创【笔记】学习CSS布局14——媒体查询

“响应式设计（Responsive Design” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！媒体查询是做此事所需的最强大的工具。让我们使用百分比宽度来布局，然后在浏览器变窄到无法容纳侧边栏中的菜单时，把布局显示成一列：<!DOCTYPE html><html><head> <sty...

2018-11-30 18:39:34 191

原创【笔记】学习CSS布局13——百分比宽度

百分比是一种相对于包含块的计量单位。它对图片很有用：如下我们实现了图片宽度始终是容器宽度的50%。把页面缩小看下效果！<!DOCTYPE html><html><head> <style type="text/css"> article { border:5px solid #fdc72f; overflow:auto;...

2018-11-30 18:39:15 819

原创【布局】学习CSS布局12——浮动布局例子

完全使用 float 来实现页面的布局是很常见的。这里有一个我之前用 position 实现的布局例子，这次我使用 float 实现了它。nav { float: left; width: 200px;}section { margin-left: 200px;}这个例子和之前那个外观一模一样。请注意我们在容器上做了“清除浮动”。原本在这个例子中是不需要的，但是当 na...

2018-11-30 18:11:29 963

原创【笔记】学习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 205

原创【笔记】学习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 245

原创【笔记】学习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 194

原创【CSS】如何清除vertical-align属性产生的中间空隙

在使用display:inline-block这个属性的时候，进行行内并排，往往不会按照你预期的方式进行布局排列。下面看看这个例子出现的问题：代码实例：<!DOCTYPE html><html><head> <style type="text/css"> .container { border:3px solid #fd...

2018-11-29 21:01:09 2579 1

原创【笔记】学习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 263

原创【笔记】学习CSS布局07——position

为了制作更多复杂的布局，我们需要讨论下 position 属性。它有一大堆的值，名字还都特抽象，别提有多难记了。让我们先一个个的过一遍，不过你最好还是把这页放到书签里。static.static { position: static;}static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“position...

2018-11-29 19:28:20 199

原创【笔记】学习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 348

原创【笔记】学习CSS布局05——盒模型

在我们讨论宽度的时候，我们应该讲下与它相关的另外一个重点知识：盒模型。当你设置了元素的宽度，实际展现的元素却超出你的设置：这是因为元素的边框和内边距会撑开元素。看下面的例子，两个相同宽度的元素显示的实际宽度却不一样。.simple { width: 500px; margin: 20px auto;}.fancy { width: 500px; margin: 20px...

2018-11-29 19:08:29 177 1

原创【笔记】学习CSS布局04——max-width

#main { max-width: 600px; margin: 0 auto; }在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要，调整下浏览器窗口大小检查下吧！顺便提下，所有的主流浏览器包括IE7+在内都支持 max-width ，所以放心大胆的用吧。代码实例：<!DOCTYP...

2018-11-29 12:56:34 316 1

原创【笔记】学习CSS布局03——margin:auto;

#main { width: 600px; margin: 0 auto; }设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。让我们再来改进下这个方案......

2018-11-29 09:58:45 253

原创【笔记】学习CSS布局02——“display”属性

"display"属性display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。 block...

2018-11-29 08:59:43 290

原创【笔记】学习CSS布局01——没有布局

没有布局如果你只想把所有内容都塞进一栏里，那么不用设置任何布局也是OK的。然而，如果用户把浏览器窗口调整的很大，这时阅读网页会非常难受：读完每一行之后，你的视觉焦点要从右到左移动一大段距离。试着调整下浏览器窗口大小你就明白我的意思了！在解决这个问题之前，我们需了解一个很重要的属性： display...

2018-11-29 08:52:51 182

原创【安装】快捷键设置sublime text 3的HTML在设置的浏览器中打开

第一步：快捷键按Ctrl +Shift + P，打开然后输入install package，并点击第一个。第二步，在新出现的文本框中输入SideBarEnhancements，然后点击它。如果在首选项——package settings中出现了Side Bar，则表示已经安装成功。第三步，设置快捷键。打开“首选项——Package Settings——Side Bar——Key...

2018-11-28 13:57:55 374

原创【安装】打开Git弹出Could not load icon 'Git\git-bash.exe'

打开git bash时，弹出如下窗口：上网查找了下原因，发现是安装路径中有中文的原因。解决方法：就是把安装路径中的中文名称改为英文名。这样就不会弹出来了。...

2018-11-28 09:23:20 6873 3

原创【安装】打开sublime text出现“Error trying to parse settings”问题

打开sublime出现的问题：j解决方法：在C盘打开此路径：C:\Users\Administrator\AppData\Roaming\Sublime Text 3\Packages可能不同电脑路径会有所区别，就是打开电脑中C盘的sublime text 3 文件夹。如果实在不行也可以这样：下一步就是打开User文件夹，把出错的文件删除。（删除的文件是根据弹出的提示框...

2018-11-25 09:57:53 15740 1

原创【安装】sublime text 3 汉化插件

A.输入快捷键Ctrl+Shift+P 在出现的文本框中输入Install Package(或直接输入“ip”)选中packageControl：Install Package并回车，然后在输入框中输入“localization”就会发现汉化语言的相关插件，最后点击主页面菜单的help中选择语言再选择中文即可。首先，打开sublime text 3。按快捷键Ctrl+Shift+P ...

2018-11-24 20:18:57 12649 1

原创【CSS】HTML中如何清理浮动

首先我们看下没有浮动的样式：html代码：<div id="div1"> <div id="blue"></div> <div id="pink"></div></div>css代码：#div1 { background:purple;

2018-11-19 19:20:36 528

原创【HTML】跳转至框架内的一个指定的节

1、主文件<html><frameset cols="20%,80%"> <frame src="HTML框架-跳转至框架内的一个指定的节-a.html"></frame> <frame src="HTML框架-跳转至框架内的一个指定的节-link.html#C4"><

2018-11-10 14:57:50 1069

原创【HTML】导航框架

1、main文件<html><frameset rows="60,*" noresize="noresize"> <frame src="HTML框架-导航框架-实例练习-索引.html" ></frame> <frame src="HTML框架-导航框架-实例练习-1.html"

2018-11-10 14:28:11 1919

原创【HTML】使用框架导航跳转到指定的节

1、main文件，两个页面<html><frameset cols="20%,80%"> <frame src="HTML框架-使用框架导航跳转指定的节-content.html"></frame><br /> <frame src="HTML框架-使用框架导航跳转指定的节-lin

2018-11-10 14:07:01 1243

二木成林