随笔分类 -  css

摘要:目前使用 Web 中文字体应用指南 阅读全文
posted @ 2017-06-08 11:25 hupan508 阅读(120) 评论(0) 推荐(0) 编辑
摘要:原文 http://www.myronliu.com/2017/03/22/%E7%A7%BB%E5%8A%A8web/css_harline/?utm_source=tuicool&utm_medium=referral 在移动端web页面开发中,为了使css中使用的尺寸与设计稿一致,通常会采用  阅读全文
posted @ 2017-04-06 14:20 hupan508 阅读(325) 评论(0) 推荐(0) 编辑
摘要:强制不换行 自动换行 强制英文单词断行 css截字 阅读全文
posted @ 2017-03-09 16:55 hupan508 阅读(227) 评论(0) 推荐(0) 编辑
摘要:2列布局 看第二点(不错) 处理两列布局右边clear:both换行的问题 八种创建等高列布局 CSS布局——左定宽度右自适应宽度并且等高布局 CSS多列布局 CSS中两栏布局,三栏布局,等高布局 阅读全文
posted @ 2016-07-28 10:35 hupan508 阅读(154) 评论(0) 推荐(0) 编辑
摘要:这篇文字很详细 http://div.io/topic/1155 阅读全文
posted @ 2016-05-30 09:01 hupan508 阅读(77) 评论(0) 推荐(0) 编辑
摘要:demo 我们应该都知道使用 word-break: break-all; 让连续的英文数字字符换行显示;以及 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 让单行文字超出的时候使用点点点表示(Chrome目前有属性可 阅读全文
posted @ 2016-05-20 09:12 hupan508 阅读(193) 评论(0) 推荐(0) 编辑
摘要:原文地址https://segmentfault.com/a/1190000003978778 meta篇 1.视窗宽度 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,max 阅读全文
posted @ 2016-02-16 16:41 hupan508 阅读(259) 评论(0) 推荐(0) 编辑
摘要:这样一个需求,第三方联合登陆的头像和昵称整体水平居中,如图: 对于这样的需求,不能简单的对包含头像和昵称的div使用margin: 0 auto了,因为昵称的长度是未知的。 solution 1:利用行内元素的padding-left属性。把图片绝对定位到padding-left区域内,然后对外层d 阅读全文
posted @ 2016-02-16 09:49 hupan508 阅读(2541) 评论(0) 推荐(0) 编辑
摘要:.css { background-image: url(img@1x.png); } @media only screen and(-webkit-min-device-pixel-ratio: 2) { .css { background-image: url(img@2x.png); } } 阅读全文
posted @ 2016-02-16 09:27 hupan508 阅读(225) 评论(0) 推荐(0) 编辑
摘要:大前提:1、initial-scale 为 1;2、在项目css中(注意不要被公共的base、common之类的影响了,资源加载顺序也是蛮重要的),先把html的fontSize设置为 100px(或者加上媒体查询代码), 避免加载未完成时候样式错乱;html{fontSize:100px} 需要全 阅读全文
posted @ 2016-02-16 09:21 hupan508 阅读(932) 评论(0) 推荐(0) 编辑
摘要:网页布局(layout)是CSS的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实 阅读全文
posted @ 2016-02-15 09:53 hupan508 阅读(252) 评论(0) 推荐(0) 编辑
摘要://这个方法是利用display:table-cell在支持该属性的浏览器中,结合vertial-align:middle方法来实现图片垂直居中; //在不支持display:table-cell的浏览器(IE)中利用文字结合行高的方法来实现垂直居中; //display:table-cell这个属 阅读全文
posted @ 2016-02-15 09:06 hupan508 阅读(196) 评论(0) 推荐(0) 编辑
摘要:/*===== 清除默认的margin的属性值 =====*/ body, blockquote, dd, dl, figure, form, p, pre, h1, h2, h3, h4, h5, h6 {margin:0;} /*===== 统一设置列表的margin和padding,以及列表表 阅读全文
posted @ 2016-02-15 09:02 hupan508 阅读(169) 评论(0) 推荐(0) 编辑
摘要:@charset "utf-8";/*reset*/body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;paddi... 阅读全文
posted @ 2015-12-03 17:16 hupan508 阅读(129) 评论(0) 推荐(0) 编辑
摘要:适用场景当屏幕分辨率为320X500时模块标题效果如下:当屏幕分辨率为480X500时模块标题效果如下:也就是当屏幕分辨率大时显示的文字多,分辨率小时显示文字少,同时需要保证这一部分始终完全显示。实现方式方案一:DEMO来自@蒋轩哲为整个容器和标题文字容器添加 overflow:hidden;tex... 阅读全文
posted @ 2015-10-28 10:34 hupan508 阅读(935) 评论(0) 推荐(0) 编辑
摘要:企业QQ呼出QQ对话框方法1、手机端链接是这样的:mqqwpa://im/chat?chat_type=wpa&uin=386807630&version=1&src_type=web&web_src=oicqzone.com经过测试,此方法在微信浏览器失败。2、web端 : tencent://M... 阅读全文
posted @ 2015-10-13 15:38 hupan508 阅读(2207) 评论(0) 推荐(0) 编辑
摘要:代码的规范】 http://www.css88.com/doc/codeguide/【Viewport Sizes尺寸查询】http://viewportsizes.com/?filter=【在线小工具】http://www.xueui.cn/design/online-tools【px,em,re... 阅读全文
posted @ 2015-08-11 08:08 hupan508 阅读(165) 评论(0) 推荐(0) 编辑
摘要:css代码之所以初始化,是因为能尽量减少 各浏览器之间的兼容性问题!腾讯QQ官网 样式初始化body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0... 阅读全文
posted @ 2015-08-11 08:07 hupan508 阅读(150) 评论(0) 推荐(0) 编辑
摘要:此列表会一直更新、维护下去,以帮助大家了解、推动国内Web前端技术框架的发展,请记住我们的永久地址:http://www.alloyteam.com/?p=1009,同时欢迎大家留言补充!Arale(支付宝) -http://aralejs.org/Como(盛大) -http://www.coms... 阅读全文
posted @ 2015-07-20 08:56 hupan508 阅读(459) 评论(0) 推荐(0) 编辑
摘要:这个得结合js来做的。比如这里有3个层,js判断滚动到当前层位置的时候给其加上一个class即可,而加的这个class就是带css3执行动画的 class//引入jQuery.js 阅读全文
posted @ 2015-07-03 12:43 hupan508 阅读(666) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示