2013年11月19日

关于web中的自适应布局 简明范例

摘要: 一、”自适应网页设计”的概念 2010年,Ethan Marcotte提出了“自适应网页设计”(Responsive Web Design)--这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。二、允许网页宽度自动调整 “自适应网页设计”到底是怎么做到的?其实并不难。 首先,在网页代码的头部,加入一行viewport元标签。 viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。 所有主流浏览器都支持这个设... 阅读全文

posted @ 2013-11-19 10:00 星果果 阅读(212) 评论(0) 推荐(0) 编辑

利用@media screen实现网页布局的自适应

摘要: 经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应,优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值以下是针对自用主题而写的css,对宽度768以下设备只保留主要文章框架,以便在有限的空间里获得最佳阅读体验@media screen and (min-width:1200px){ #page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px}}@medi 阅读全文

posted @ 2013-11-19 09:40 星果果 阅读(231) 评论(0) 推荐(0) 编辑

2013年4月15日

table css控制边框

摘要: Table之CSS控制Table内外边框,颜色,大小其实按照常理来说,现在的网站应该早已经抛弃什么表格了,现在肯定是DIV+CSS当道嘛!不过客户的网站在添加内容的时候始终不满意那些边框效果:要么没有,要么很粗。看得出来,这位客户是位完美主义者。在默认的情况下,我们的CSS将Table的边框清除掉了,是没有的,看到的效果是这样的。无边框Table为了给,表格加一个边框,我在CSS里面写了这样一句:.table{border:solid 1px #add9c0;}哎,看来是我太天真了,浏览器里看到的效果是这样的:只有外边框的Table好吧,我承认,我确实已经有些年头没有动过Table了,不过这完 阅读全文

posted @ 2013-04-15 17:12 星果果 阅读(310) 评论(0) 推荐(0) 编辑

导航