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%; } 媒体查询

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

我的主要参考资料是[Object object]的文章 float 布局应该是目前各大网站用的最多的一种布局方式了,但是也特别复杂,这里详细讲一下 首先,什么是浮动? 浮动元素是脱离文档流的,但不脱离文本流,这是什么意思呢,用过 word 的应该知道有一种图片环绕的方式是文字环绕吧,就是这种效果. 那么它有什么特点呢 对自身的影响 float 元素可以形成块,如 span 元素.可以让行内元素也拥有宽和高,因为块级元素具有宽高 浮动元素的位置尽量靠上 尽量靠左(float:left)或右(flo

css3 resize属性(Firefox 4+.Safari 以及 Chrome 支持 resize 属性.) div{resize:both:overflow:auto:} 规定可以由用户调整 div 元素的大小: display:table-cell   http://www.zhangxinxu.com/wordpress/2010/10/我所知道的几种displaytable-cell的应用/

一个浮动(左浮动或右浮动) 垂直环绕布局(浮动和清除浮动) 左右两列布局 注意:网页设计中应该尽量避免使用浮动 1.一个浮动(左浮动或右浮动) 当一个div里面含有浮动元素和非浮动元素,IE6,7中的浮动元素会出现错位现象. 解决方案:  ①将浮动元素位于非浮动元素的前面.②非浮动设置为浮动元素.③浮动元素设置margin-top的负值. <div class="title"><span>新闻列表</span><a href="jav

我们来看看CSS重要属性--float. 以下内容分为如下小节: 1:float属性 2:float属性的特性     2.1:float之文字环绕效果 2.2:float之父元素高度塌陷 3:清除浮动的方法 3.1:html法 3.2:css伪元素法 4:float去空格化 5:float元素块状化 6:float流体布局     6.1:单侧固定 6.2:DOM与显示位置不同的单侧固定 6.3:DOM与显示位置相同的单侧固定 6.4:智能布局 1:float属性 float,顾名思义是漂浮,