一般在Eclipse右侧有一个Outline的大纲，可以显示一个类的所有方法（如下图） ? 在intellij Idea中叫Structure（结构体），如下图； ?...当然，也可以直接Alt+F7快捷键，这样默认会把Structure显示在屏幕下方，如下图操作就可以移动到右侧。 ?
本文主要阐述了，自己在对这篇文章（http://www.cnblogs.com/imwtr/p/4441741.html）的理解过程中感到困惑的地方做个补充。...---- 先对圣杯布局作补充： 之前对盒模型不是很理解，只知道单独的一个盒子是怎样的。但是，却不知道多个盒子在嵌套，并列时，相互之间的关系该是如何的。...在left被设置了margin-left: -100%后(margin-left的value取正整数时，left元素会相对其左侧元素的右边框向右移动。...main的宽度100%占据窗口的宽度。sub的margin-left：-100%也是左移了窗口的宽度。...main-inner设置margin-left和margin-right是为了使自己的内容想中间缩。这样移动left元素，right元素后，不会叠在main-inner的内容上。
点击整个专栏查看其它系列文章 （系列文章更新中…）：《iVX 高仿美团APP制作移动端完整项目》 项目界面预览： 一、推荐信息制作 推荐信息与之前的标题下推荐信息制作类似： 此时依旧创建一个行...： 接着上传一张图片，该图片在上传时将会按照原比例进行显示，在此时只需要设置对应的宽高为 100% 占据整个父容器即可： 此时我们再查看信息部分，可以发现其右侧可以拆分为左右3个部分...，分别是顶部一个部分分为左右两个小部分，下部一个部分占满整个内部行宽度： 那么在右侧的信息行中，创建1个顶部行，并且在这个顶部行中创建两个行，一个命名为左侧一个命名为右侧，左侧占据 70% 宽度，...右侧占据 30% 宽度： 接着我们在到左侧内容中创建3个行，分别是 标题、分数、配送 以显示对应的内容： 随后添加标题文本： 添加分数文本，并且给予对应的颜色： 接着继续添加对应的文本并且给予对应的值...： 其中一个特殊的文本我们可以给予对应的背景色、边框线、文字颜色进行设置： 最后我们添加敌营的优惠信息行，在其中添加对应的文本设置样式即可： 最后我们赋值其对应的商家，然后设置好上外边距即可
接着我们发现当前右边栏并不垂直居中，我们需要更改右侧栏的垂直对齐为居中： 这样的话，这个标题就做完了。...此时页面应该 如下： 我们可以从图中得知，当前影院信息内部分为左侧和右侧，左侧是影院信息，右侧为新人价格，此时我们在影院信息内部新建两个行一个是左，另一个是右，剩下的标签内容暂时先不用理：...此时宽度左侧行设置为 70%，右侧行设置为 30%，使其占据整一行： 当然高度也要设置为包裹，并且这两个行还需要给予对应的内边距，使其内部有一定厚度，不然紧贴就不好看了，左边框给予的内边距...： 右边框给予的内边距： 接着赋予文本： 文本记住一定要给予宽度为 100%，否则会超格，并且还需要使其换行为否： 接着我们再创建一个标签占满整个宽度，在里面添加一个文本即可...接着设置期边框颜色和边缘圆角值即可：
首页一共分为3个页面，分别是首页： 影院： 我的： 一、标题头制作 首先我们新建一个 web 相对应用，随后点击前台，在前台新建一个页面： 接着给予这个页面一个背景色： 为了使页面清晰...点击需要添加下拉菜单的容器，然后点击扩展组件，点击下拉菜单即可添加： 在下拉菜单的属性中，，更改当前选中值，设置选项列表中的内容，更改大小即可完成： 接着在右侧的行中更改水平对齐属性选择靠右...，此时添加的元素才有靠右显示： 接着添加一个正在热映文本，该文本需要设置其排版，上下左右内边距，否则无法设置其边距框： 接着在这个文本中的边框与圆角处设置下边距的颜色为主题色（紫红色...即可占满整行： 接着右侧信息内部中也分为左侧和右侧 ，左侧为影片信息，右侧为按钮购买，那么此时创建两个行为这些内容的父容器，并且给予命名： 此时左侧信息为 70% 右侧购票为 30%...100%，这样就会占据整个行，使其他元素可以自动换行进行显示，在此需要注意的是电影评分这一节，我们发现会有颜色的分数，此时可以直接给予一个行，分文本进行显示： 若觉得这个行挨的太近，那么此时只需要给予这些行的内边距一定大小即可
, 右侧是搜索按钮 ; 右侧的搜索按钮始终都是 44x44 像素大小 ; 左侧的搜索栏随着网页布局的宽度变化而变化 ; 此处 使用 Flex 弹性布局管理宽度 , 右侧的按钮直接设置一个固定大小 , 左侧的搜索框设置...设置的 height 高度 = 内容高度 + 边框高度 + 内边距 ; 如果要设置垂直居中 , 只能设置其中的 行高 = 内容高度 , 要把 2 像素的边框去掉 ; 因此在该 CSS3 样式中 , 高度设置为...= 26 会偏下 上面的设置 高度 不等于 行高 原因是 这是 CSS3 模型 CSS3 中的垂直居中是在 边框 + 内边距 + 尺寸 的总高度中垂直居中 */ height.../* 设置该搜索框占据除右侧固定大小按钮之外的剩余父容器空间 */ flex: 1; /* 设置文字大小和颜色 */ font-size: 12px; color: #666.../* 设置该搜索框占据除右侧固定大小按钮之外的剩余父容器空间 */ flex: 1; /* 设置文字大小和颜色 */ font-size: 12px; color: #666
网页布局在前端开发中是一个很重要的点，在传统布局解决方案中，一般是基于盒状模型，依赖 display 属性 + position属性 + float属性。...也就是说采用flex布局的元素就是flex容器（display：flex或inline-flex）,他的所有子元素（注意是子元素，而不包含后代节点）称为flex项目 在Flexbox布局中有水平的主轴（...单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size flex容器属性 flex容器有以下几种属性：flex-direction，flex-wrap，flex-flow...所以，项目之间的间隔比项目与边框的间隔大一倍。...所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值） 轴线占满整个交叉轴。 具体效果如下图 ?
绘制矩形框中的部分 : 一、网页底部盒子模型测量及样式 ---- 1、盒子布局说明 底部盒子主要由如下部分组成 : 红色盒子 : 最外层盒子 水平方向 充满整个 浏览器 , 背景是白色 ; 蓝色盒子...: 内部版心位置的盒子 , 盛放主要内容 ; 绿色盒子 : 版心内部 左侧的盒子 存放 logo 按钮 以及版权内容 ; 橙色盒子 : 版心内部 右侧盒子 , 存放几排链接 ; 2、底部的大盒子测量及样式...; /* 版心宽度 1200 像素 , 在浏览器中居中对齐 */ .w { width: 1200px; margin: auto; } 4、版权盒子 整个 版权盒子 在 版心盒子中...在 网页底部右侧 , 这里设置右浮动 ; /* 整个链接模块盒子 右浮动 */ .links { float: right; } 列表项 标题 16 像素 , 颜色值 #666666 ; /* 列表项...最终的 CSS 样式为 : /* 整个链接模块盒子 右浮动 */ .links { float: right; } /* dl 列表设置在 链接 盒子中左浮动 */ .links dl { float
选择器 css3中新增了一些选择器，主要为如下图所示： 新样式 边框 css3新增了三个边框属性，分别是： border-radius：创建圆角边框 box-shadow：为元素添加阴影 border-image...（如使内联元素span跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示 background-break: continuous; 默认值。...，如果需要下方三角形，只需要将上、左、右边框设置为0就可以得到下方的红色三角形： 但这种方式，虽然视觉上是实现了三角形，但实际上，隐藏的部分任然占据部分高度，需要将上方的宽度去掉。...如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？ 双栏布局 双栏布局非常常见，往往是以一个定宽栏和一个自适应的栏并排展示存在。...元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。
第三条规则使“totals”列变为蓝色，最后两条规则通过使用固定布局算法fixed layout algorithm显示如何使列成为固定大小。...这些框的视觉布局是由一个矩形的、不规则的行和列网格控制的。每个盒子占据了整个网格单元的数量，根据下面的规则来确定。这些规则不适用于HTML 4或早期的HTML版本；HTML对行和列跨度有自己的限制。...第一列盒可以在左侧或右侧，具体取决于表的'direction'属性的值。 column group box与其包含的列占据相同的网格单元格。 单元格可能会跨越多行或多列。...矩形必须尽可能地靠近左边，但它所占据的第一列中的单元格部分不能与任何其他单元格框重叠（比如，在前一行中开始的跨行单元格row-spanning cell），并且该单元格必须位于源文档中较早的同一行中的所有单元格的右侧...该值导致整个行或列从显示中移除，并且由行或列正常占据的空间将用于其他内容。与折叠的列或行相交的跨行和列的内容会被剪切。但是，对行或列的抑制不会影响表格的布局。
并且 偏移 不会改变元素自身在文档流中 占据的空间(也就是说，其后的元素的位置 仍是依照 元素进行偏移之前的位置 进行排布)。设置relative 不会使元素 脱离文档流。...span默认是 inline元素，而inline元素 是不能设置宽高的，这里span为什么会有宽高？ float使span成为了一个BFC块，使得span可以设置宽高。...viewpoint：用js或者手工确定 要把整个界面放到多大 media query：根据不同设备的特性 来匹配不同的样式。...如何清除浮动，为什么清除浮动 这是因为 float元素 不会占据父元素的布局空间，有可能 float元素 就会超出 父元素，从而对其它的元素 造成影响。...如何视频移动端？
绘制画板 或者您可以查看右侧的“检查器”列。如您所见，有几种不同设备尺寸的预设尺寸。我选择了iPhone 5。 ?...选择画板 注意：如果您需要调整画板的大小，只需选择其名称并拖动显示在角落上的白色框。 Sketch使产品设计变得非常简单。 如果你想看整个画布怎么办？让我们尝试使用位于屏幕顶部的工具进行缩小。 ?...适合画布到屏幕 添加形状 现在您的画板完全可见，让我们添加一个矩形。位于“插入”>“形状”>“矩形”中。 ? 矩形工具 我在画板的顶部做了一个细条，就像移动应用程序中的导航栏一样。 ?...绘制矩形 接下来，找到右侧菜单，官方称为“检查员”。这里有一个“边框”部分，带有一个复选框。取消选中它以删除默认边框。 ? 删除边框 我们还可以更改边框上方部分的填充。我使用＃104F8A。...您可以在吸管图标下方的框中输入此数字。 ? 改变填充 请注意，如果单击填充窗口底部的+号，则可以保存此颜色样本以供日后使用！ 准备好了吗？转到第2部分
这时候添加边框和内边距并不会影响内容盒子的大小，而是会导致整个盒子变大。...box-sizing还有另一个值border-box，width和height的计算会包括内边距和边框。外边距一直不会算到宽高内，只会影响盒子在页面中占据的整体空间。...3.2.1.1 相对定位 相对定位是将position属性的值设为relative，这时元素还会在文档流中占据原有的位置。...我们可以通过top、right、bottom、left设置四个方向的偏移值，如top: 20px;向下偏移 20px，不过文档流中占据的位置不变。...无论是否位移，相对定位的元素仍然会在原始文档流中占据初始的空间。因此，平移后会遮挡其他元素。
在设计的过程中有时需要设计一个div宽高都是整个屏幕，整个时候宽度很好设置，可是高度一般很难设置，因为页面一般都是可以滚动的，所以高度一般可变，所以这个时候可以使用一个小技巧，如下。...CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题。例如，display:table的CSS声明能够让一个HTML元素和它的子节点像table元素一样。...使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式， 而不会产生因为使用了table那样的制表标签所导致的语义化问题。.../blo… 实例：实现一个固定宽度但内容可变的列表 目前我有一个需求，有一个列表页，左侧固定，右侧固定，总宽度固定，但是左侧的内容可能会增加，右侧的内容也可能会增加，要求平时一行展示，增加的时候两行展示...box-orient 值：horizontal | vertical | inherit 框的子代是如何排列的？
像素 ; 总体背景是白色的 ; 课程表 在 版心的右侧 , 可以设置成 右浮动 , 设置一个 50 像素的 外上边距 ; /* Banner 条右侧 课程表盒子样式 */ .course {...border-bottom: 1px solid #ccc; /* 顶部设置 10 像素外边距 下面直接紧贴写文字 以达到多行文本居中对齐效果 */ margin-top: 10px; } 列表项中的三种文本...*/ .all { /* 显示模式 - 块级元素 */ display: block; /* 总高度 40 像素 , 有 2 像素的上下边框 */ height: 38px; /* 边框 1...li { /* 设置 无序列表项 从左到右排列 */ float: left; } /* 设置无序列表中的链接样式 */ .nav ul li a { /* 显示模式 块级元素 */ display...列表项 中的链接样式 */ .subnav li a { /* 默认情况下为白色 */ color: #fff; /* 字体大小 14 像素 */ font-size: 14px; /* 取消链接下方的下划线
，在此右侧的×我们并不进行考虑。...其实你可以统一在这里设置内边距，但是我选择在内容中设置内容，这样我可以更清楚的看见这些内容适应于内边距的样子，又或者根本不用设置内边距。...，背景色为透明： 接着更改这个标题行的宽度为 80%，然后设置整个博文行的水平对齐为居中，这样不就可以自动有内边距了吗？...接着我们添加一个行，命名为信息： 接着调整对应的高度和背景色： 此时我们还需要设置一个很重要的属性，那就宽度，否则这个部分的内容将会左对齐显示，此时设置宽度小于父容器宽度后，由于父容器的水平对齐设置将会使整个行居中显示...此时效果总感觉怪怪的，少了原版的分割线和边框： 此时有两个方法，第一个是直接给与边框，第二个是直接给与一个上外边距，使其具有一定距离后将会显示背景色，这样就可以自动有边框内容了： 效果如下
display:"inline-block" 使元素同时具有行内元素和块级元素的特点。...关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。...right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧。 inherit 规定应该从父元素继承 clear 属性的值。...relative（相对定位） 相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。...这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
/images/loading.gif hexo-pdf pdf传送门 宅音乐侧栏播放器插件 体验 目前在next中可能引起部分css冲突，建议在next中使用在单个页面中。...; iframe 在文章中插入 iframe。...">右侧边框蓝色块级 右侧边框紫色块级 上侧边框红色块级 <...下载色块 颜色块-红 颜色块-黄 颜色块-绿 颜色块-蓝 颜色块-紫 左侧边框红色块级 左侧边框黄色块级 左侧边框绿色块级 左侧边框蓝色块级 左侧边框紫色块级 右侧边框红色块级 右侧边框黄色块级 右侧边框绿色块级...右侧边框蓝色块级 右侧边框紫色块级 上侧边框红色块级 上侧边框黄色块级 上侧边框绿色块级 上侧边框蓝色块级 上侧边框紫色块级 下侧边框红色块级 下侧边框黄色块级 下侧边框绿色块级 下侧边框蓝色块级 下侧边框紫色块级
标签结构 2、CSS 样式 3、展示效果 绘制矩形框中的部分 : 一、网格商品展示模块盒子模型测量及样式 ---- 1、盒子尺寸测量 下面的 网格商品展示模块盒子模型 , 可以分为三个盒子 ,...: none; } /* 清除所有链接的下划线样式 */ a { text-decoration: none; } /* 清除按钮默认样式 ( 主要是按钮自带的边框 ) */ button {...li { /* 设置 无序列表项 从左到右排列 */ float: left; } /* 设置无序列表中的链接样式 */ .nav ul li a { /* 显示模式 块级元素 */ display...user-name { float: left; /* 名字与头像间隔 6 像素 */ margin-left: 6px; } /* Banner 条样式 */ .banner { /* 宽度自动填充整个浏览器...列表项 中的链接样式 */ .subnav li a { /* 默认情况下为白色 */ color: #fff; /* 字体大小 14 像素 */ font-size: 14px; /* 取消链接下方的下划线
采用 相对定位和绝对定位 实现的布局 会非常凌乱 并且 这样的布局是不可维护的。 在这篇文章中，我们将会具体讨论：float属性是什么；float属性 在具体的上下文中 是如何影响元素的。...会左移到：盒子的外边距的左最外沿(如果没有外边距，就是边框的左边沿) 接触到 包含该盒子的父元素的边沿 或者 另一个浮动元素的边沿。...Screen Shot 2017-07-18 at 5.36.24 PM.png 在上面例子中，p元素是块元素，所以p元素会 忽略 浮动元素，跨越整个父容器的宽度(减去padding)。...所以对非浮动元素 使用clear，去强制浮动元素占据它们本来的空间。...在任何浏览器中 使用overflow方法的唯一缺点是：父元素会有滚动条 或者 隐藏的内容。如果父元素中的任意的子元素 使用了负的外边距 或者 绝对定位，并且它们超过了父元素的边框，它们会被遮挡。
领取专属 10元无门槛券
手把手带您无忧上云
