`
zccst
  • 浏览: 3291861 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

[css3]流式布局要点

阅读更多
作者:zccst

让一个div水平、垂直居中




一、流式布局两个要点:
1,在link中加入media
<link src="global.css" />
<link src="ipad.css " media="(max-width:980px) and (min-width:600px)" />
<link src="mobile.css " media="(max-width:599px)" />


2,把精确的像素改为百分比,并使用box-sizing:border-box。
盒模型以border为准。
解决流式布局中两个水平盒子各分50%的宽度


二、在页面布局中小的点
在上面要点基础上也有一些小的点用来精细的设置页面

甚至padding也可以使用百分比。

border-radius

-webkit-linear-graient();



用js检测用户使用设备

使用device.js检测浏览器

device.ipad()
device.mobile()
device.iphone()
device.android()
device.tablet()
device.portait()
device.landscape()
分享到:
评论

相关推荐

    css布局 之 流式布局-原子风格

    ­利用js实现的流式布局,风格模仿 poki game 官网。其官网采用grid布局,但由于太灵活难以掌控,便手敲JS

    HTML5.CSS3网页布局和样式精粹

    HTML5.CSS3网页布局和样式精粹欢迎大家下载!

    HTML5+CSS3网页布局任务教程课件汇总整本书电子教案全套课件完整版ppt教学教程.pptx

    HTML5+CSS3网页布局任务教程课件汇总整本书电子教案全套课件完整版ppt教学教程.pptx

    [HTML5.CSS3网页布局和样式精粹].张亚飞.扫描版

    [HTML5.CSS3网页布局和样式精粹].张亚飞.扫描版

    html5 css3 web布局(基于npm webpack vue2).zip

    html5 css3 web布局(基于npm webpack vue2).ziphtml5 css3 web布局(基于npm webpack vue2).ziphtml5 css3 web布局(基于npm webpack vue2).ziphtml5 css3 web布局(基于npm webpack vue2).ziphtml5 css3 web布局(基于...

    HTML5CSS3网页布局和样式精粹

    资源名称:HTML5 CSS3网页布局和样式精粹内容简介:对于初入门的网页设计者和开发者而言,学习网页设计和开发就应该从html5和css3开始,这是毋庸置疑的。对于有经验的工程师来说,如果想完整掌握html5和css3新技术,...

    CSS网站布局与美化,css

    CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与...

    CSS3网页布局

    下面我们就开始一步一步使用DIV+CSS进行网页布局设计。 所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我...

    流式布局和rem布局

    flexible 是淘宝发布的js插件,用来rem布局,通过js动态改变根元素的大小

    HTML5+CSS3网站布局应用教程 (赵振方) 随书光盘

    《HTML5+CSS3网站布局应用教程》全面介绍HTML 5与CSS 3进行Web设计的知识。全书由16章组成。主要内容包括:主流浏览器对HTML 5的支持情况、HTML 5与HTML4在语法上的区别、结构元素、表单与文件、图形绘制、多媒体...

    css3响应式图片网格布局

    这是一款采用透明背景的响应式css3图片网格布局模板。整个网格布局采用流式布局,每行的图片数量自适应屏幕宽度。该网格布局使用图标代替图片,当鼠标滑过网格时,网格背景色发生变化并用动态文字说明。

    html5 css3页面布局特效zip

    html5 css3页面布局特效是一款响应式的盒子布局,点击其中的一个盒子可切换到全屏视图,别的盒子会自动收缩隐藏。 html5 css3页面布局特效:

    流式布局---京东案例

    文件内容与博客《前端与移动开发----移动web开发流式布局》是一起的,昨天没有做完,今天结合弹性布局一起做了出来

    CSS的flex布局.ppt

    网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C提出了一...

    前端:京东首页的制作(流式布局)

    内容概要:通过HTML、CSS、JS以及移动端常用布局-流式布局的相关知识完成京东首页的制作:搜索栏、轮播图以及新闻模块等。 适合人群:具备一定编程基础,前端刚入门的初学者。 能学到什么:1.HTML、CSS、JS以及...

    HTML5 + CSS3 实现 3d 室内布局源码

    HTML5 + CSS3 实现 3d 室内布局源码。

    不对称的流式布局

    本资源包括: 1)28个页面(都是响应式的流式布局) 2)404特效页面 3)win8 风格的流式布局

    js+css3图片3D倾斜布局点击弹窗放大预览代码

    一款挺有创意的js+css3图片3D倾斜布局点击弹窗放大预览代码,图片放大幻灯片切换展示。学习交流。

    CSS+DIV布局案例CSS+DIV布局案例CSS+DIV布局案例

    CSS+DIV布局案例CSS+DIV布局案例CSS+DIV布局案例CSS+DIV布局案例

    html5+css3页面布局

    简单的HTML5与CSS3页面布局。

Global site tag (gtag.js) - Google Analytics