float实现流体布局

第32 章项目实战-移动端流体布局[3]学习要点:1.搜索部分2.旅游部分3.媒体查询 本章主要开始如果通过第一个PC 端项目进行重构,设计成移动端可访问的页面,这个项目采用的是流体布局.一．搜索部分搜索部分包含三个内容,背景区块.文本框和按钮.//HTML 部分<div id="search"><input type="text" class="search" placeholder="请输入旅游景点或城市"

第32 章项目实战-移动端流体布局[6]学习要点:1.旅游资讯2.机票预定 本章主要开始如果通过第一个PC 端项目进行重构,设计成移动端可访问的页面,这个项目采用的是流体布局.一．旅游资讯这个如果做成移动端,那么一切从简,否则缩小时就无法容纳太多的文字.//html,布局和PC 端差不多<figure><img src="img/tour1.png" ><figcaption><hgroup><h2 class="titl

第32 章项目实战-移动端流体布局[4]学习要点:1.旅游图片部分 本章主要开始如果通过第一个PC 端项目进行重构,设计成移动端可访问的页面,这个项目采用的是流体布局.一．旅游图片部分//HTML 部分<div class="container"><figure><img src="img/tour1.png" ><figcaption><h4><曼谷-芭提雅6 日游></h4>&l

移动流体布局和响应式布局总结 宽度与高度 区块宽度一般用max-width 最大宽度和百分比,来定义宽度,因为要实现自动缩放 高度如果要自适应,就不需要定义高度,或者定义最小高度 注意:横向的尽量用百分比,如边距等 图片自适应 保证小于图片分辨率的手机,自适应等宽屏幕 图片一定要能够自适应等比例缩放 才能保证布局的 正确性. 方法:将图片的img标签转换成区块,将最大宽度设置为100%,这样图片就会自适应了 img{ display: block; max-width: 100%; } 媒体查询

文档流 先说说什么是公文流转  什么流 它是一系列连续的东西 <div style="background-color:pink;width:40px;height:80px;">第一个框 </div> <div style="background-color:red;width:40px;height:80px;">第二个框 </div> <div style="background-color:ye

第32 章项目实战-移动端流体布局[5] 学习要点: 1.导航固顶 2.三个栏目 3.公司简介 本章主要开始如果通过第一个PC 端项目进行重构,设计成移动端可访问的页面,这个 项目采用的是流体布局. 一．导航固定 由于移动设备屏幕高度较低,没有滚动条操作的便利性.一般来说,栏目的导航部分总 是固定在移动设备的某一个方位.我们这里将头部的导航永远固定在头部,不会随着页面向 下滑动而更改. //固顶定位 #header { position: fixed; top: 0; z-index: 9999

IEEE754标准中,浮点数的内存布局 以下仅以float(内存中占据4个字节,32bits)来说明,double(8个字节,64bits)同理,只是有细微的差别. float的内存分布 IEEE754规定,32bit的float在内存中是这样分布的: 符号位(S) 阶码(E) 尾数(M) 1 8 23 整数.浮点数在内存中都是以二进制的形式存在的(补码),而浮点数是二进制下的科学计数法存储在内存中的.可以表示 为:$ s 1.m^e$ 符号位占据一个比特,当S = 0时表示正数,当S = 1时

文档流 先说说什么是文档流  流是什么 就是一串连续的东西 <div style="background-color:pink;width:40px;height:80px;">第一个框 </div> <div style="background-color:red;width:40px;height:80px;">第二个框 </div> <div style="background-color:yel

1 文字环绕,将标题放在中间: 左边元素:float:left; 右边元素:float:right; text-align:center; 2.单侧固定: 左侧:width: float: 右侧:padding-left/margin-left; Dom与显示位置匹配的单侧固定布局: width:100%;float:  ; padding-left/margin-left; width+float+margin的值; 3.高级自适应尺寸: float: display:table-cell;