`
zccst
  • 浏览: 3319248 次
  • 性别: 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()
分享到:
评论

相关推荐

    个人博客div+css可以作为作业交的

    2. 布局设计:使用Div+CSS实现流式布局、网格布局或响应式布局。流式布局适合单栏内容展示,网格布局适用于多栏内容,而响应式布局则能保证在不同设备上良好显示。 3. 导航栏:创建易于导航的顶部菜单,包括主要...

    CSS工具-CSS工具

    - 支持多种布局类型,如流式布局、固定布局等。 - 自动生成的代码易于修改和扩展。 #### 八、Little Boxes - 布局模板集合 - **功能介绍**:提供了一系列布局模板,包括多栏布局、网格布局等。 - **应用场景**: ...

    css布局九决 学css不再难

    浮动(float)是CSS布局中的关键概念,用于创建流式布局。当元素浮动后,它会脱离正常文档流,可能导致父元素高度塌陷。为解决这个问题,可以在父元素中添加`clear:both`或者使用伪元素如`::after`并设置`clear:both...

    CSS权威指南(中文 全)

    - **流式布局**:元素按照顺序依次排列。 - **浮动布局**:元素可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动元素的边框为止。 - **定位布局**:通过`position`属性来实现,分为`static`, `relative...

    CSS-CC-42-float-3:CSS要点中的布局属性简介

    默认情况下,HTML元素是按照流式布局自上而下、从左到右排列的。当为元素设置`float: left`或`float: right`时,该元素会从当前的位置移出,使得其他元素可以沿着它的边线排列。 例如,`float: left`常用于创建多列...

    27款后台管理页面设计 DIV CSS

    1. 布局设计:后台管理页面通常需要清晰的层次结构,常见的布局有固定宽度、流式布局和响应式布局。Div和CSS可以轻松实现这些布局,以适应不同设备和屏幕尺寸。 2. 导航菜单:后台页面的导航菜单应简洁易用,可以...

    4中不同风格的div css下拉菜单

    每种风格的下拉菜单都涉及到CSS的核心概念,如选择器、盒模型、布局模式(如流式布局、网格布局、定位布局)以及过渡和动画。理解这些概念对于创建自定义的、符合设计需求的下拉菜单至关重要。 在实现过程中,要...

    5款漂亮的CSS横向下拉菜单导航条

    同时,可以通过调整布局,如网格系统或流式布局,来排列菜单项,使其适应网站的整体风格。 6. **可访问性与键盘导航** 考虑到残障用户的使用需求,横向下拉菜单应支持键盘导航,允许用户通过Tab键和箭头键进行操作...

    HTML5期末考核大作业:基于Html+Css+javascript的网页制作(化妆品公司网).md

    - **布局方法**:常见的网页布局方法有固定布局、流式布局、响应式布局等。本项目中使用的是浮动布局,它能够兼容各大主流浏览器,确保显示效果稳定。 - **视觉效果设计**:良好的视觉设计可以提升用户体验,如合理...

    开心消消乐游戏网页设计作品 学生dreamweaver作业静态HTML网页设计模板 游戏主题网页作业制作

    在本项目中,DIV元素与CSS结合使用,可以轻松地实现复杂的页面布局,如流式布局或响应式设计。 - **CSS**: 除了用于设置文本和图片的样式之外,还可以用于定义元素的位置关系,例如使用`float`属性实现左右浮动布局...

    H91_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip

    这套模板通过灵活的网格系统、流式布局以及图片和媒体的相对单位来实现这一目标,确保在任何设备上都能呈现良好的视觉效果。 4. 自适应技术:自适应设计是响应式设计的一种进化,它不仅关注布局变化,还关注内容的...

    响应式NBA体育赛事新闻资讯网站源码(自适应手机移动端)模板.txt

    流式布局是指页面元素的宽度使用百分比或em单位来定义,而不是固定像素值。这样可以让页面元素随着屏幕大小的变化而自动缩放,实现自适应显示。 ##### 2. CSS3 Media Queries CSS3 Media Queries 是一种用于根据...

    响应式品牌创新设计类网站源码HTML5设计创新模板(自适应手机版).txt

    1. **流式布局**:使用百分比单位来设置宽度,而不是固定像素值,以便内容可以根据容器大小自动调整。 2. **图片和媒体查询**:确保图片和多媒体内容能够根据屏幕尺寸自适应显示,通常可以通过设置图片的最大宽度...

    H316_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip

    这种设计方法依赖于流式布局、弹性图片和媒体查询,使网页能在不同分辨率和比例的屏幕上自然展现,满足多设备访问的需求。 五、前端框架与最佳实践 H316模板可能采用了诸如Bootstrap、Foundation等前端框架,这些...

    web2.0 网页设计师必备手册+教程

    这就需要用到流式布局、媒体查询和弹性图片等技术,确保内容适应各种设备。 接下来,我们来谈谈DIV和CSS。DIV是HTML中的一个容器元素,用于分组其他元素,实现布局和样式控制。CSS(层叠样式表)则是用于定义HTML或...

    图片 菜单 图片 菜单

    CSS提供了多种布局方式,如块级布局、流式布局、网格布局和Flexbox布局。在本例中,Flexbox可能最为合适,因为它允许我们在一行或多行中灵活地对齐和分布元素。通过设置`display: flex;`和相关的`justify-content`、...

    JavaScript重点总结

    CSS负责网页的样式,理解选择器、盒模型、布局模式(如流式布局、网格布局)以及CSS3的新特性如过渡和动画,能让你更好地实现视觉效果。HTML负责网页结构,熟悉标签语义、表单元素和表单验证,有助于创建可访问和可...

    手机端响应式 签到,大转盘抽奖

    首先,我们要理解响应式设计的核心是使用流式布局(Fluid Grid)、自适应图片(Responsive Images)和媒体查询(Media Queries)。流式布局允许网页元素根据屏幕大小自动调整布局,确保内容始终能够适配屏幕。自适应...

    网页特效学习总结.doc

    对于网页布局,常见的有流式布局、网格布局和响应式布局,设计师应根据内容和目标用户选择合适的布局方式。此外,色彩搭配和视觉层次感也是关键,要确保页面美观、易读且符合品牌形象。 网页设计不仅关注技术,更...

Global site tag (gtag.js) - Google Analytics