- 浏览: 3319121 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (567)
- Web前端-html/表单 (19)
- Web前端-CSS (24)
- Web前端-CSS框架 (4)
- Web前端-JS语言核心 (50)
- Web前端-JS客户端 (26)
- nodejs生态+grunt (10)
- seajs和requirejs (9)
- backbone等框架 (7)
- 模板基础 (7)
- Web前端-deps(不改动) (6)
- Web前端-component (10)
- Web前端-jquery-plugin (13)
- 浏览器兼容性 (6)
- Web前端-使用jQuery (25)
- Web前端-使用jqueryui (6)
- Web前端-性能优化 (3)
- Web协议-HTTP (6)
- ExtJS (13)
- PHP (22)
- PHP面向对象 (4)
- PHP扩展-SOAP (6)
- PHP扩展-curl (4)
- PHP与HTML(导出) (5)
- PHP扩展-综合 (7)
- mysql基础应用 (18)
- 技术心情 (18)
- 算法和面试题 (17)
- 工具(开发)使用 (36)
- memcached原理 (2)
- session和cookie (4)
- UML (2)
- Web前端_FusionCharts (5)
- Web前端_Flex (4)
- Web前端_JSP (3)
- JavaSE (10)
- JavaEE (4)
- tomcat (2)
- Servlet开发 (3)
- Spring开发 (1)
- REST相关 (2)
- 大访问量、高并发 (2)
- 网络编程 (1)
- YII (21)
- linux命令和内核 (12)
- yii与数据库 (10)
- yii与表单 (12)
- yii view层 (1)
- perl (7)
- yii扩展 (7)
- shell (4)
- photoshop (7)
- 视觉设计 (2)
- 我关注的名人在路上 (4)
- 1-自学能力 (1)
- 2-人际沟通能力 (3)
- 3-职业规划能力 (7)
- 4-项目管理能力 (2)
- python (3)
- django (4)
- Mysql高级应用 (6)
- prototype.js (4)
- Web系统安全 (1)
- Web前端-mobile (2)
- egret (6)
- jQuery源码分析 (5)
- fis (4)
最新评论
-
yzq21056563:
感谢作者分享~请教下,http://www.lisa33xia ...
CSS基础:text-overflow:ellipsis溢出文本 -
u012206458:
$.ajax的error,complete,success方法 -
DEMONU:
谢谢,虽然不能给你赞助,但是要给你顶
mysql中key 、primary key 、unique key 与index区别 -
njupt_tolmes:
阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿滕庆亚 ...
CSS基础:text-overflow:ellipsis溢出文本 -
zenmshuo:
用过SpreadJS,也包含数据可视化的图表
推荐几个web中常用js图表插件
作者: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水平、垂直居中
一、流式布局两个要点:
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()
发表评论
-
静态时间轴和动态时间轴实现原理
2015-07-12 17:24 5725作者:zccst 一、静态时间轴,仅css即可 HTML结构 ... -
css3 webkit属性
2015-05-06 13:57 1522作者:zccst 见了很多web-kit打头的css属性,但 ... -
[css3特效]loading加载中
2015-03-25 15:53 3593作者:zccst 以前loading都是一张图片,显示或隐藏 ... -
display,position和float之间的关系
2015-03-17 12:18 5598作者:zccst 对‘display ... -
CSS中的几种颜色表示法,如hsla
2015-03-15 17:47 1383作者:zccst 平常相对熟悉的也就RGB色了,其他基本不清 ... -
[css3]知识点积累
2015-03-14 22:28 1249作者:zccst animation , keyframe ... -
[css3]知识点(自己总结版)
2015-03-13 20:11 1406作者:zccst CSS3是一个包含多方面的知识,主要分两大 ... -
单行溢出和多行文本溢出
2015-03-05 18:54 6798作者:zccst 一、单行溢 ... -
table表格内容过多时自动换行css
2014-12-04 20:44 8232作者:zccst 总结了一下 ... -
div+css布局总结
2014-09-04 10:48 1425作者:zccst 3,position布局 #wrap ... -
print打印网页相关
2014-06-10 10:24 816作者:zccst 1,CSS <link hr ... -
CSS基础:text-overflow:ellipsis溢出文本
2014-01-15 17:12 38050作者:zccst 2015-06-19 今 ... -
纯CSS来画基本的矩形、圆形、椭圆、三角形、多边形等
2014-01-06 13:52 4662作者:zccst 2015-3-18 除了常规的三角形外,还 ... -
让table和table中的TD在指定区域滚动
2013-10-28 20:14 3911使用的属性如下: <div style="w ... -
div被撑大
2012-06-26 22:26 2165作者:zccst 情形二:外层div高度自适应,内部还有div ... -
常见CSS设置
2012-06-19 11:35 1162作者:zccst 1,图片与文字垂直对齐 办法一、设置块元素 ... -
自适应网页设计
2012-06-13 10:58 1147zccst转载 原地址:http:// ... -
CSS颜色代码
2012-05-17 17:02 1255作者:zccst 虽然CSS代码颜色有RGB组成,看似简单, ... -
CSS较好的网站推荐
2012-05-01 16:51 1189作者:zccst 在每一个领域都会诞生很多优秀的专业网站, ... -
background-position释义
2012-05-01 16:37 1292作者:zccst background-pos ...
相关推荐
2. 布局设计:使用Div+CSS实现流式布局、网格布局或响应式布局。流式布局适合单栏内容展示,网格布局适用于多栏内容,而响应式布局则能保证在不同设备上良好显示。 3. 导航栏:创建易于导航的顶部菜单,包括主要...
- 支持多种布局类型,如流式布局、固定布局等。 - 自动生成的代码易于修改和扩展。 #### 八、Little Boxes - 布局模板集合 - **功能介绍**:提供了一系列布局模板,包括多栏布局、网格布局等。 - **应用场景**: ...
浮动(float)是CSS布局中的关键概念,用于创建流式布局。当元素浮动后,它会脱离正常文档流,可能导致父元素高度塌陷。为解决这个问题,可以在父元素中添加`clear:both`或者使用伪元素如`::after`并设置`clear:both...
- **流式布局**:元素按照顺序依次排列。 - **浮动布局**:元素可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动元素的边框为止。 - **定位布局**:通过`position`属性来实现,分为`static`, `relative...
默认情况下,HTML元素是按照流式布局自上而下、从左到右排列的。当为元素设置`float: left`或`float: right`时,该元素会从当前的位置移出,使得其他元素可以沿着它的边线排列。 例如,`float: left`常用于创建多列...
1. 布局设计:后台管理页面通常需要清晰的层次结构,常见的布局有固定宽度、流式布局和响应式布局。Div和CSS可以轻松实现这些布局,以适应不同设备和屏幕尺寸。 2. 导航菜单:后台页面的导航菜单应简洁易用,可以...
每种风格的下拉菜单都涉及到CSS的核心概念,如选择器、盒模型、布局模式(如流式布局、网格布局、定位布局)以及过渡和动画。理解这些概念对于创建自定义的、符合设计需求的下拉菜单至关重要。 在实现过程中,要...
同时,可以通过调整布局,如网格系统或流式布局,来排列菜单项,使其适应网站的整体风格。 6. **可访问性与键盘导航** 考虑到残障用户的使用需求,横向下拉菜单应支持键盘导航,允许用户通过Tab键和箭头键进行操作...
- **布局方法**:常见的网页布局方法有固定布局、流式布局、响应式布局等。本项目中使用的是浮动布局,它能够兼容各大主流浏览器,确保显示效果稳定。 - **视觉效果设计**:良好的视觉设计可以提升用户体验,如合理...
在本项目中,DIV元素与CSS结合使用,可以轻松地实现复杂的页面布局,如流式布局或响应式设计。 - **CSS**: 除了用于设置文本和图片的样式之外,还可以用于定义元素的位置关系,例如使用`float`属性实现左右浮动布局...
这套模板通过灵活的网格系统、流式布局以及图片和媒体的相对单位来实现这一目标,确保在任何设备上都能呈现良好的视觉效果。 4. 自适应技术:自适应设计是响应式设计的一种进化,它不仅关注布局变化,还关注内容的...
流式布局是指页面元素的宽度使用百分比或em单位来定义,而不是固定像素值。这样可以让页面元素随着屏幕大小的变化而自动缩放,实现自适应显示。 ##### 2. CSS3 Media Queries CSS3 Media Queries 是一种用于根据...
1. **流式布局**:使用百分比单位来设置宽度,而不是固定像素值,以便内容可以根据容器大小自动调整。 2. **图片和媒体查询**:确保图片和多媒体内容能够根据屏幕尺寸自适应显示,通常可以通过设置图片的最大宽度...
这种设计方法依赖于流式布局、弹性图片和媒体查询,使网页能在不同分辨率和比例的屏幕上自然展现,满足多设备访问的需求。 五、前端框架与最佳实践 H316模板可能采用了诸如Bootstrap、Foundation等前端框架,这些...
这就需要用到流式布局、媒体查询和弹性图片等技术,确保内容适应各种设备。 接下来,我们来谈谈DIV和CSS。DIV是HTML中的一个容器元素,用于分组其他元素,实现布局和样式控制。CSS(层叠样式表)则是用于定义HTML或...
CSS提供了多种布局方式,如块级布局、流式布局、网格布局和Flexbox布局。在本例中,Flexbox可能最为合适,因为它允许我们在一行或多行中灵活地对齐和分布元素。通过设置`display: flex;`和相关的`justify-content`、...
CSS负责网页的样式,理解选择器、盒模型、布局模式(如流式布局、网格布局)以及CSS3的新特性如过渡和动画,能让你更好地实现视觉效果。HTML负责网页结构,熟悉标签语义、表单元素和表单验证,有助于创建可访问和可...
首先,我们要理解响应式设计的核心是使用流式布局(Fluid Grid)、自适应图片(Responsive Images)和媒体查询(Media Queries)。流式布局允许网页元素根据屏幕大小自动调整布局,确保内容始终能够适配屏幕。自适应...
对于网页布局,常见的有流式布局、网格布局和响应式布局,设计师应根据内容和目标用户选择合适的布局方式。此外,色彩搭配和视觉层次感也是关键,要确保页面美观、易读且符合品牌形象。 网页设计不仅关注技术,更...