页面布局

页面布局的三种方式： （1）table 布局：过时 （2）div css：当前主流 （3）html5布局标签：未来趋势 <div>LOGO欢迎语句</div> <div>导航</div> <div>侧边栏</div> <div>页尾：版权申明</div> <table> 　　<thead><!--thead标签没有特别的含义，只是一种语义--> 　　　　<tr><th></th><tr> 　　</thead> 　　<tbody> 　　　　<tr><td></td><tr> 　　　　<tr><td></td><tr> 　　</tbody> 　　<tfoot> 　　　　<tr><td></td><tr> 　　</tfoot> </table> 来源： CSDN 作者： 会做饭的技术男 链接： https://blog.csdn.net/u011927449/article/details/103538511

css3 flex 实现常见页面布局 上中下布局 左中右三列布局 圣杯布局 Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{display:flex;} 行内元素也可以使用Flex布局。 .box{display:inline-flex;} Webkit内核的浏览器，必须加上-webkit前缀。 .box{display:-webkit-flex;/* Safari */display:flex;} 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 上中下布局 < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "utf-8" > < title > flex 布局 < / title > < style type = "text/css" > * { padding : 0 ; margin : 0 ; } header { height : 200 px ; background : # C4DFEB ; } footer { height : 200 px ; background : pink ; } . container { display :

使用DIV+CSS对网页进行标准化布局前，除了要掌握盒子模型，还要掌握定位和浮动两个比较重要的概念，它们可以控制在页面上排列和显示元素的方式。一个盒子是装内容的区块，如果多个盒子组合在一起使用，再通过定位和浮动的设置，就可以对整个页面进行布局。如图1所示为由多个盒子布局的页面，每个虚线框代表一个盒子模型。 图1 多个盒子定义页面布局 虽然CSS的样式属性非常多，但实际参与页面布局的属性其实很少。CSS的定位属性应用得非常广泛，可以控制元素的平面或空间位置，以及高度、宽度和可见性。也可以使用CSS的display属性改变生成区块的类型，例如将display属性设置为none，则这个区块框及其所有内容就不再显示。通过将display属性设置为block，可以让行内元素表现得像块级元素一样。常见的参与页面布局的CSS属性如表1所示。 表1 常见的参与页面布局的CSS属性 在CSS中提供了相对和绝对两种定位方法。所谓相对定位是指让操作的元素在相对其他元素的位置上进行偏移，而绝对定位是指让操作的元素参照原始文档进行偏移。使用表2-2中部分定位属性的例句代码如下所示： 来源： https://www.cnblogs.com/itxdl/p/12014676.html

使用DIV+CSS对网页进行标准化布局前，除了要掌握盒子模型，还要掌握定位和浮动两个比较重要的概念，它们可以控制在页面上排列和显示元素的方式。一个盒子是装内容的区块，如果多个盒子组合在一起使用，再通过定位和浮动的设置，就可以对整个页面进行布局。如图1所示为由多个盒子布局的页面，每个虚线框代表一个盒子模型。 图1 多个盒子定义页面布局 虽然CSS的样式属性非常多，但实际参与页面布局的属性其实很少。CSS的定位属性应用得非常广泛，可以控制元素的平面或空间位置，以及高度、宽度和可见性。也可以使用CSS的display属性改变生成区块的类型，例如将display属性设置为none，则这个区块框及其所有内容就不再显示。通过将display属性设置为block，可以让行内元素表现得像块级元素一样。常见的参与页面布局的CSS属性如表1所示。 表1 常见的参与页面布局的CSS属性 在CSS中提供了相对和绝对两种定位方法。所谓相对定位是指让操作的元素在相对其他元素的位置上进行偏移，而绝对定位是指让操作的元素参照原始文档进行偏移。使用表2-2中部分定位属性的例句代码如下所示： 来源： oschina 链接： https://my.oschina.net/u/4125915/blog/3140307

响应式布局 l 响应式布局是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念，简而言之，就是一个网站能够兼容 多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。 l 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移 动设备的普及，越来越多的设计师采用这个技术。 l 一个典型的响应式布局网站： http://www.16ketang.com/ l 试着逐渐缩小该页面的窗口，看看网页有什么变化 l 由于响应式布局要针对不同的视口尺寸，对样式作出更多的修改，因此并不像流式布局那样让宽度 自动适应那么简单。 l 实现响应式布局最核心的技术就是使用媒体查询（ media selector ）。 l 媒体查询是 CSS3 引入的概念，是指针对不同的设备、不同的视口尺寸，使用不同的样式代码。 l 响应式布局的原理，正是大量的使用媒体查询，让页面中一些元素在不同的视口中具有不同的样式 表现。 l 常见的视口尺寸 l 虽然你现在知道了如何使用媒体查询，但我们真正关心的，是页面在手机、平板、上网本或小型笔 记本、 PC 端中具有更好的表现力。 l 但问题是手机型号众多，其他设备也是如此，它们的尺寸不尽相同，我们如何来判定当前的视口尺 寸属于什么设备呢？ l 好在经过大量的实践应用

使用DIV+CSS对网页进行标准化布局前，除了要掌握盒子模型，还要掌握定位和浮动两个比较重要的概念，它们可以控制在页面上排列和显示元素的方式。一个盒子是装内容的区块，如果多个盒子组合在一起使用，再通过定位和浮动的设置，就可以对整个页面进行布局。如图1所示为由多个盒子布局的页面，每个虚线框代表一个盒子模型。 图1 多个盒子定义页面布局 虽然CSS的样式属性非常多，但实际参与页面布局的属性其实很少。CSS的定位属性应用得非常广泛，可以控制元素的平面或空间位置，以及高度、宽度和可见性。也可以使用CSS的display属性改变生成区块的类型，例如将display属性设置为none，则这个区块框及其所有内容就不再显示。通过将display属性设置为block，可以让行内元素表现得像块级元素一样。常见的参与页面布局的CSS属性如表1所示。 表1 常见的参与页面布局的CSS属性 在CSS中提供了相对和绝对两种定位方法。所谓相对定位是指让操作的元素在相对其他元素的位置上进行偏移，而绝对定位是指让操作的元素参照原始文档进行偏移。使用表2-2中部分定位属性的例句代码如下所示： 来源： oschina 链接： https://my.oschina.net/u/4125915/blog/3139031

- 许宏健 - 过去两天完成的任务 - 口头描述 这两天在做数据库作业，项目没有进展 - 代码签入图片 - 接下来的任务 学习RecyclerView切换页面的操作，真正实现与他人的代码实现无缝接入 - 还剩下哪些任务 1.页面切换 2.聊天界面优化 - 燃尽图 - 遇到了哪些困难 遇到了网上查不到资料的困难，可能其他开发安卓的人为这是个很简单的问题，所以没有人写这个要怎么做，所以只能靠自己的摸索，所以我才决定换一种布局，以求突破。 - 有哪些收获和疑问 收获：学会了RecyeclerView的大概用法。疑问：到底要怎样才能使用这种布局切换页面呢？这种布局为什么跟其他布局有这么大的区别呢。 来源： https://www.cnblogs.com/xhongj/p/12005653.html

用apicloud开发的优化策略总结： 类别 优化点 说明 HTML 1 用div代替a 省去默认效果 2 使用HTML5语义化标签 如<nav></nav> <section></section>可以包header和footer 窗口结构 1 Window+Frame结构布局 Frame的高度用margin布局 2 按需求优先使用FrameGroup Window和Frame是原生的，效率很高 页面加速 1 HTML,CSS,Javascript写在同一页面中，尽量少定义lnk和script标签 让浏览器引擎尽可能地一次读写（IO）加载完所有代码 不用重型框架 1 不用jq和bootstrap 降低加载速度，在移动端存在兼容问题 交互响应 1 使用tapmode和api.parseTabmode处理click事件 可加快300ms，这个分别要在HTML和JS代码中主动处理 2 扩大点击区域设计和交互效果 让用户知道更容易点和知道自己点了 编码规范 1 任何文件名避免中文和大写英文 可能造成编译失败或未知错误 转载于:https://www.cnblogs.com/zengdi/p/9234887.html 来源： CSDN 作者： weixin_30737363 链接： https://blog.csdn.net/weixin_30737363/article/details

效果图 <!doctype html> <html lang=""> <head> <meta charset="utf-8"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>biPcMobile</title> <link rel="apple-touch-icon" href="apple-touch-icon.png"> <!-- Place favicon.ico in the root directory --> <!-- build:css styles/vendor.css --> <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css"> <!-- bower:css --> <!-- endbower --> <!-- endbuild --> <!-- build:css styles

footer可以根据浏览器视口高度自适应显示位置，当页面垂直方向可以滚动时，footer显示在文档最底部，当不可滚动时，footer显示在浏览器视口最底部 <div class="root"> <div class="place"></div> <div class="content"> <div class="header">header</div> <div class="main">main</div> </div> <div class="footer">footer</div> </div> html, body, .root, .place { height: 100%; } body { margin: 0; font-size: 0; line-height: 1; } .place, .content { display: inline-block; vertical-align: top; box-sizing: border-box; padding-bottom: 100px; } .content { width: 100%; } .header { font-size: 26px; text-align: center; line-height: 100px; background: blue; } .main { font-size: 26px;