一、三列布局
(1)两边固定 (先float左右固定值,再middle 用margin)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style type='text/css'> * { margin: 0; padding: 0; } #left { width: 100px; float: left; background: green; height: 300px; /*overflow: hidden;*/ } #right { width: 100px; float: right; background: red; height: 300px; /*/ overflow: hidden;*/ } #middle { margin-right: 100px; margin-left: 100px; height: 300px; background: #ccc; } </style> </head> <body> <div id="left"> </div> <div id="right"> </div> <div id="middle"> </div> </body> </html>
(2)中间固定(三个float;左右width=50%先用负margin,设置好右边位置,在用内部 不设宽度div magin 确定左边位置)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #left, #right { float: left; margin-left:-271px; width: 50%; } #main { width: 540px; float: left; background: green; } .inner { padding: 20px; } #left .inner, #right .inner { margin-left: 271px; background: orange; } </style> </head> <body> <div id="left"> <div class="inner">this is left sidebar content</div> </div> <div id="main"> <div class="inner">this is main content</div> </div> <div id="right"> <div class="inner">this is right siderbar content</div> </div> </body> </html>
二、相应式布局(重点在CSS3 中的 @media only screen and (min-width:700px){ 再写新样式 })
<!DOCTYPE HTML> <head> <script src="jquery-1.8.2.min.js"></script> <style> * { margin:0; padding:0; } .ul { background-color:rgb(134, 170, 209); height: 55px; } .ul li { float:left; list-style: none; background-color:rgb(134, 170, 209); width: 20%; height: 100%; } .item { display: block; text-align:center; line-height: 49px; height: 100%; transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari 和 Chrome */ -o-transition: all 0.5s; cursor:pointer; } .item:hover { background-color:rgb(168, 209, 253); } @media only screen and (max-width: 700px) { .ul li { width: 100%; height: 100%; } } </style> <script> </script> </head> <body class="sapUiBody"> <header> <ul class="ul"> <li><a class="item">Home</a></li> <li><a class="item">First</a></li> <li><a class="item">Second</a></li> <li><a class="item">Thirdly</a></li> <li><a class="item">Fourth</a></li> </ul> </header> </body>
三、瀑布流式布局()
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Jquery瀑布流布局(每行代码都有详细注释)-作者:刘晓帆</title> <style type="text/css"> body, ul, li, h3 { margin: 0; padding: 0; list-style: none; font: bold 12px "微软雅黑"; } /*瀑布流布局样式*/ #lxf-box { position: relative; } #lxf-box li { position: absolute; background: #fff; border: solid 1px #ccc; text-align: center; padding: 10px; left: 0px; top: 0; } h3 { padding-top: 8px; } img { width: 200px; height: auto; display: block; border: 0 } /*css3动画*/ li { -webkit-transition: all .7s ease-out .1s; -moz-transition: all .7s ease-out; -o-transition: all .7s ease-out .1s; transition: all .7s ease-out .1s } </style> <script src="../jsForAll/jquery-1.9.1.js" type="text/javascript"></script> </head> <body> <ul id="lxf-box"> <li><a href="http://www.liuxiaofan.com/"><img src="../../image/1.jpg"></a> <h3>图片标题</h3> </li> <li><a href="http://www.liuxiaofan.com/"><img src="../../image/2.jpg"></a> <h3>图片标题</h3> </li> <li><a href="http://www.liuxiaofan.com/"><img src="../../image/3.jpg"></a> <h3>图片标题</h3> </li> <li><a href="http://www.liuxiaofan.com/"><img src="../../image/4.jpg"></a> <h3>图片标题</h3> </li> <li><a href="http://www.liuxiaofan.com/"><img src="../../image/5.jpg"></a> <h3>图片标题</h3> </li> <li><a href="http://www.liuxiaofan.com/"><img src="../../image/6.jpg"></a> <h3>图片标题</h3> </li> <li><a href="http://www.liuxiaofan.com/"><img src="../../image/7.jpg"></a> <h3>图片标题</h3> </li> <li><a href="http://www.liuxiaofan.com/"><img src="../../image/8.jpg"></a> <h3>图片标题</h3> </li> <li><a href="http://www.liuxiaofan.com/"><img src="../../image/9.jpg"></a> <h3>图片标题</h3> </li> <li><a href="http://www.liuxiaofan.com/"><img src="../../image/10.jpg"></a> <h3>图片标题</h3> </li> <li><a href="http://www.liuxiaofan.com/"><img src="../../image/9.jpg"></a> <h3>图片标题</h3> </li> <li><a href="http://www.liuxiaofan.com/"><img src="../../image/8.jpg"></a> <h3>图片标题</h3> </li> <li><a href="http://www.liuxiaofan.com/"><img src="../../image/7.jpg"></a> <h3>图片标题</h3> </li> <li><a href="http://www.liuxiaofan.com/"><img src="../../image/2.jpg"></a> <h3>图片标题</h3> </li> </ul> <script> /* 原理:1.把所有的li的高度值放到数组里面 2.第一行的top都为0 3.计算高度值最小的值是哪个li 4.把接下来的li放到那个li的下面 作者:刘晓帆 博客地址:[url]http://liuxiaofan.com[/url] 编写时间:2012年6月9日 */ var margin = 10;//这里设置间距 var li=$("li");//这里是区块名称 var li_W = li[0].offsetWidth+margin;//取区块的实际宽度(包含间距,这里使用源生的offsetWidth函数,不适用jQuery的width()函数是因为它不能取得实际宽度,例如元素内有pandding就不行了) function liuxiaofan(){//定义成函数便于调用 var h=[];//记录区块高度的数组 var n = document.documentElement.offsetWidth/li_W|0;//窗口的宽度除以区块宽度就是一行能放几个区块 for(var i = 0;i < li.length;i++) {//有多少个li就循环多少次 li_H = li[i].offsetHeight;//获取每个li的高度 if(i < n) {//n是一行最多的li,所以小于n就是第一行了 h[i]=li_H;//把每个li放到数组里面 li.eq(i).css("top",0);//第一行的Li的top值为0 li.eq(i).css("left",i * li_W);//第i个li的左坐标就是i*li的宽度 } else{ min_H =Math.min.apply(null,h) ;//取得数组中的最小值,区块中高度值最小的那个 minKey = getarraykey(h, min_H);//最小的值对应的指针 h[minKey] += li_H+margin ;//加上新高度后更新高度值 li.eq(i).css("top",min_H+margin);//先得到高度最小的Li,然后把接下来的li放到它的下面 li.eq(i).css("left",minKey * li_W); //第i个li的左坐标就是i*li的宽度 } $("h3").eq(i).text("编号:"+i+",高度:"+li_H);//把区块的序号和它的高度值写入对应的区块H3标题里面 } } /* 使用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个) */ function getarraykey(s, v) {for(k in s) {if(s[k] == v) {return k;}}} /*这里一定要用onload,因为图片不加载完就不知道高度值*/ window.onload = function() {liuxiaofan();}; /*浏览器窗口改变时也运行函数*/ window.onresize = function() {liuxiaofan();}; </script> </body> </html>
相关推荐
这是一款采用透明背景的响应式css3图片网格布局模板。整个网格布局采用流式布局,每行的图片数量自适应屏幕宽度。该网格布局使用图标代替图片,当鼠标滑过网格时,网格背景色发生变化并用动态文字说明。
本资源包括: 1)28个页面(都是响应式的流式布局) 2)404特效页面 3)win8 风格的流式布局
移动互联网时代到来了。本书将当前 Web 设计中热门的响应式设计技术与 ...不仅讨论了媒体查询、流式 布局、相对字体、响应式媒体,更将 HTML5 和 CSS3 的相关知识点一并讲解,是学习最新 Web 设计技术 不可多得的佳作。
这是一款使用纯css3制作的响应式3d时间轴效果。该css3 3d时间轴效果采用流式布局,在用户点击时间轴上的某个节点时,该节点会改变颜色并发生3d倾斜效果。
前端设计人员必备教程;...不仅讨论了媒体查询、流式布局、相对字体、响应式媒体,更将HTML5和CSS3的相关知识点一并讲解,是学习最新WEB设计技术不可多得的佳作。本书适合各个层次的web开发和设计人员阅读。
移动互联网时代到来了。本书将当前Web设 计中热门的响应式设计技术与HTML5和CSS3结合 ...媒体查询、流式布局、相对字体、响应式媒体, 更将HTML5和CSS3的相关知识点一并讲解,是学 习最新Web设计技术不可多得的佳作。
这是一款仿Pinterest网站的简单实用的响应式网格瀑布流布局jQuery插件。该瀑布流插件通过简单的CSS和js代码制作出流式布局的网格系统,并通过媒体查询来控制网格的响应式效果。
minigrid是一款非常实用的动态网格瀑布流布局js插件。该瀑布流插件的大小只有2KB,纯js编写,没有任何外部依赖。你可以使用CSS3动画来制作简单的网格动画,也可以和dynamics.js集合来制作炫酷的网格动画。
移动互联网时代到来了。《响应式Web设计:HTML5和CSS3实战》将当前Web设计中...不仅讨论了媒体查询、流式布局、相对字体、响应式媒体,更将HTML5和CSS3的相关知识点一并讲解,是学习最新Web设计技术不可多得的佳作。
这是一款仿Pinterest网站的简洁大方又实用的全屏响应式...该瀑布流插件通过简单的CSS和js代码制作出流式布局的网格系统,并通过媒体查询来控制网格的响应式效果。鼠标上去图片显示边框阴影,而且还有向上滑动动画效果。
固定布局、流式布局、响应式布局 适应移动设备的发展 Reset.css样式重置 normalize.css rebot.css Css 选择器 Css 盒模型 Flex 弹性盒模型 @media 媒体查询 Gradient 渐变 Animation 动画 Iconfont 字体图标 ...
这是一款使用jquery.calendario配合css3制作的全屏响应式jQuery日历插件。这款日历插件可用于移动设备、平板和手机。它采用流式布局,当屏幕足够小的时候只显示一列。
不仅讨论了媒体查询、流式布局、相对字体、响应式媒体,更将HTML5 和CSS3 的相关知识点一并讲解,是学习最新Web 设计技术不可多得的佳作。Web设计:HTML5和CSS3实战适合各个层次的Web 开发和设计人员阅读。 王永强...
第1章 Bootstrap提供的网站框架1.1 Bootstrap到底是什么1.2 Bootstrap的文件结构1.3 基本的HTML模板1.4 全局样式1.5 默认网格系统1.6 流式网格系统1.7 容器布局1.8 响应式设计第2章 Bootstrap预定义的CSS样式2.1 ...
Travel 一个旅游网站,适合初学者拿去学习html和css。 简单介绍下这个项目,这是很久之前刚开始学前端做的项目,用来练习HTML和CSS的,只是单纯的页面...这一版主要是利用了媒体查询和流式布局来做的,也算是最终版了。
一、前言 前端开发,作为现代互联网...4. 响应式设计:学习如何使用媒体查询、流式布局等技术,实现网页在不同设备上的良好显示。 5. 前端框架:了解并学习常用的前端框架,如React、Vue、Angular等,提高开发效率。
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统(Grid System),随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。 一、什么是网格(Grid)? 在平面设计中,网格是一种由一系列用于组织内容...
原生UI 鉴于之前的很多前端框架(特别是响应式布局的框架),UI控件看起来太像网页,没有原生感觉,因此追求原生UI感觉也是我们的重要目标 MUI以iOS平台UI为基础,补充部分Android平台特有的UI控件 流畅体验 下拉...
6. 响应式设计:通过使用媒体查询和流式布局等技术,使网页能够在不同设备和屏幕尺寸下自适应展示,提升用户体验。 7. 移动端开发:针对移动设备的浏览器进行优化,使用 HTML5 和 CSS3 等技术开发适配移动设备的...