css
曾曾子
求成长求进步
展开
-
css命名规范总结
网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率。 一、命名规则说明: 1)、所有的命名最好都小写 2)、属性的值一定要用双引号(“”)括起来 3)、每个标签都要有开始和结束,且要有正确的层次,排版有规律工整 4)、空元素要有结束的tag或于开始的tag后加上”/” 5)、表现与结构完全分离,代码中不涉及任何的表现元素,如style、f翻译 2016-01-18 14:17:29 · 365 阅读 · 0 评论 -
html5新增的常用元素
HTML5新增了大量元素,这些元素更好的丰富了HTML文档的语义。(一)文档结构元素 1. <aricle>:改元素用于代表页面上独立,完整的一篇”文章“,article元素内部可以使用header,footer,section,article等元素。 2. <section>:该元素用于对页面的内容进行分块。 3. <nav>:该元素专门用于定义页面上的”导航条“,包原创 2016-01-19 16:47:09 · 607 阅读 · 0 评论 -
css之clearfix清除浮动
bootstrap里面的写法: .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; line-height: 0; content: ""; } .clearfix:after { clear: both; } 2.推荐写法.clear翻译 2016-01-20 16:27:51 · 409 阅读 · 0 评论 -
css实现iframe的高度自适应
<div style="position: fixed;left: 0;right: 0;top: 104px; bottom: 0"> <iframe src="https://www.baidu.com/" style="width: 100%;height: 100%;"frameborder="0"></iframe> </div>给ifram原创 2016-02-01 12:07:21 · 1163 阅读 · 0 评论 -
-webkit-line-clamp
-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。 限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性: display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient翻译 2016-02-01 16:36:58 · 572 阅读 · 0 评论 -
微信网页设计样式库WeUI
为帮助网页开发者实现与微信客户端一致的视觉体验,并降低设计和开发成本,微信团队推出了网页设计样式库:WeUI。 该样式库目前包含 button (按钮)、cell (单元格)、toast (浮层提示)、dialog (对话框)等网页常用的各式元素,并已在 GitHub 上开源。开发者只需三步,就能在自己的网页上轻松实现按钮、浮层提示等功能: 1. 根据文档说明,下载 WeUI 库。 2. 在页翻译 2016-02-18 11:52:06 · 1433 阅读 · 0 评论 -
在Webstorm中Autoprefixer的环境配置
之前使用CSS3属性的时候都需要带各浏览器的前缀,甚至到现在,依然还有很多属性需要带前缀,之前都是使用mixins,现在发现使用autoprefixer这个插件就可以一键处理css3的不同平台的兼容性问题。参考借鉴一下了网上的文章,来整理一下在webstorm中配置一下autoprefixer。关于AutoprefixerAutoprefixer是一个后处理程序,不同于Sass以及Stylus之类的转载 2016-08-22 11:06:59 · 4889 阅读 · 1 评论 -
手机banner图片自适应手机宽高定位
<div class="image-header"> <img src="../b1.jpg" alt="" /> </div> .image-header{ position: relative; width: 100%; height: 0; padding-top:100%; img{ position: absolute;原创 2017-11-20 11:40:58 · 4856 阅读 · 0 评论 -
使用 CSS3 实现 Loading(加载)的动画效果
效果一html代码:<div class="spinner"> <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div翻译 2018-04-20 13:32:08 · 4017 阅读 · 0 评论