1. 防padding属性改变盒子模型宽度
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
当前css将固定盒子模型宽度总是以(显示)指定的宽度(width:300px)为准, 并不会受到padding而强制改变和模型宽度.
2. 文字包围图片
img { float: right; margin: 2px; }
在相同和模型中, 将图片浮动而文字内容不浮动时, 将形成文字包围图片的效果.
Note: 因float已脱离流式布局, 为防止图片溢出和模型, 即需要在和模型中使用样式 -- overflow:aotu;
3. 使用inline-block实现栅格化布局
.layout-box { display: inline-block; width: 200px; height: 100px; margin: 2px; }
如果使用 display:block; float:left; 则需要小心当前和模型容器的高度是否会影响到后面的布局, 而使用inline-block则无需担心, 它会将盒模型撑开.
4. 将文字内容分列显示, column
当屏幕过宽且文字内容较多时, 你是否常常很难找到正在阅读的内容, 下一行的开始位置呢? 以下css会将文字内容分为三列显示
.three-column { padding: 1em; -moz-column-count: 3; -moz-column-gap: 1em; -webkit-column-count: 3; -webkit-column-gap: 1em; column-count: 3; column-gap: 16px; }
Note: 查看column兼容性说明
3. CSS设定旋转功能
.rotate .item:hover { -webkit-transform:rotate(-5deg); -moz-transform:rotate(-5deg); -o-transform:rotate(-5deg); -ms-transform:rotate(-5deg); }
相关推荐
几乎全部收录常用文档-API-帮助文档-编程学习必备 此资源20分都值 大部分是中文版 CHM格式 自己学习收集的 拿出来共享 简体中文版JDK_API_1_6 CHM格式(此包太大了)单独在...
收录了40个常用的CSS+DIV布局方案 总有一个适合你的~~ ^_^
本文档探讨的是前端设计种最常用的页面圆角框效果的7种不同方法实现解决方案,其核心 关键词是“圆滑、完美、兼容、重用性、语义”,这些技术都是收集目前网络上最流行的做 法。纵观种种方法,各有其优势,请针对...
heplful-js-css-lib收录一些常用的js,css库,方便下载使用css/flex.scss弹性布局CSS/animate 各种css3动画效果js/gulpfile.jsgulp示例文件js/svg-drawDoughnutChart svg 画圆圈百分比图js/swipe.js 移动端滑动手势js...
如果不写该属性则搜索引擎会对图片进行收录 width 设置图片的宽度 height 设置图片的高度 图片的格式 JPEG 颜色丰富的图片,如,照片 GIF 颜色单一,简单透明的图片,动态图 PNG 颜色...
i电子商务(idcct.com)(全自动收录网站系统)主要功能包括全站自动/手动审核功能,新闻/公告,常用工具,名站管理,友情链接,合作伙伴,后台有强大的筛选功能,可以自己看,前台有最新加入、最新点入、最新点出、点击...
commom 包括 normalize.css 本土化重置加入常用工具类等构成 base.css animate.css 包括最常用的数十种css3动画效果 pub_init.css 为具体业务组件依赖样式 js部分 core 包括 jquery, require, zepto ctrl 包括 ...
最后,需要注意的是,蜘蛛不喜欢一个页面有太多的css代码,否则同样会影响蜘蛛的爬行,影响搜索引擎的收录,所以采用外部调用的方式调用CSS是非常不错的方法。而同时,若非必须太多花哨的网站,采用CSS布局,同样...
2、主页模板主体布局清晰实用,分为五部分:(1)国内名站 - 最主流网民最常用的网站。(2)影视游戏(3)休闲交友(4)日常生活(5)其它导航3、全站采用纯静态html方式,分类页包含个性化的title、meta,易于搜索引擎收录!4...
支持所有Asp虚拟空间,兼容良好,程序采用Div Css设计,兼容ie6、ie7、ie8、,全站经过网站优化结构,容易被搜索引擎收录,上排名!因为业务繁忙,暂不提供技术支持,修改请保留版权,谢谢您支持。 全部功能,无限制...
万能阅读器软件力求解决常用文件的打开问题,万能是我们的软件努力的方向。 当您在下载一个文件或接到客户文件后,碰到文件无法打开时,当您为了只想查看一下文件,而不想安装庞大的打开软件时 (如Office文档,AutoCad...
最后,需要注意的是,蜘蛛不喜欢一个页面有太多的css代码,否则同样会影响蜘蛛的爬行,影响搜索引擎的收录,所以采用外部调用的方式调用CSS是非常不错的方法。而同时,若非必须太多花哨的网站,采用CSS布局,同样...
红鸟GZIP简介 红鸟GZIP,可以针对单独文件使用,让我们操作更自由,且不完全依赖服务器! 众所周知,gzip的开启需要服务器的支持; 对于不具备服务器操作权限的用户来说只能望洋兴叹了;...同类推荐:站长常用源码
支持所有Asp虚拟空间,兼容良好,程序采用Div+Css设计,兼容ie6、ie7、ie8、火狐等英文浏览器,网站优化结构设计,配置网站地图,容易被搜索引擎收录,上关键词排名!欢迎大家使用。程序功能:含新闻发布系统,产品...
新闻,产品,单页独立关键字设计,提高搜索引擎收录。 、内置IIS测试,双击打启动预览网站 Angel_asp工作室企业网站管理系统(AngelCms)后台功能简介: 网站基本信息:联系方式、关键字、版权信息等等; 1、支持...
CSS:css3的一些骚操作,部分代码借鉴然后整理的一些常用代码。 JavaScript:js编写的日常用到的功能组件,xxx.html对应xxx.js这样的目录结构。utils.js是所有工具类型代码整合的收录文件,方便我自己复制粘贴用。 ...
新闻,产品,单页独立关键字设计,提高搜索引擎收录。 、内置IIS测试,双击打启动预览网站 Angel_asp工作室企业网站管理系统(AngelCms)后台功能简介: 网站基本信息:联系方式、关键字、版权信息等等; 1、支持...
* 增加名站导航切换栏,可以在后台修改调用网址,如“常用软件”,“热门游戏”之类; * 增加天气预报的定制功能,并移至天气处可展开未来三天的天气预报; * 增加程序升级提醒,方便站长获得官方升级信息 * ...
支持所有Asp虚拟空间,兼容良好,程序采用Div Css设计,兼容ie6、ie7、ie8、,全站经过网站优化结构,容易被搜索引擎收录,上排名!因为业务繁忙,暂不提供技术支持,修改请保留版权,谢谢您支持。 程序功能:含...
支持所有Asp虚拟空间,兼容良好,程序采用Div Css设计,兼容ie6、ie7、ie8、,全站经过网站优化结构,容易被搜索引擎收录,上排名!因为业务繁忙,暂不提供技术支持,修改请保留版权,谢谢您支持。 程序功能:含...