水平居中设置 （如果有些词组较陌生，可以快速浏览一遍我发布的随笔"html常用标签"，"CSS总结（上，中，下篇）"，再回顾一下）。 ☆水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中场景，现在来总结一下怎么设置水平居中的。如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。如下代码：html代码： 1 2 3 4 5 定宽块状元素水平居中 6 7 di...
1.控制超出部分显示省略（单行）： white-space: nowrap;text-overflow:ellipsis;overflow: hidden; 下面使用css3部分控制多行超出部分显示省略（此处适配谷歌内核浏览器）： overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;/* 设置最高值，防止超出部分显示出来 */max-height: 30px; 2.实现标签背景透明，内容不透明： ba...
水平居中设置-定宽块状元素 当被设置元素为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。这一小节我们先来讲一讲定宽块状元素。 满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中： html代码： 我是定宽块状元素，哈哈，我要水平居中显示。 css...
题外话 传统的开发我们是在编辑器操作代码保存,再到浏览器预览查看效果的; 而如今的firebug和chrome的内置调试器就不需要了..可以直接实时编辑且看到效果; 在调试中对代码的操作不会保存到本地实际代码中..是不是很赞!!; 定位HTML元素的三种方式 进入调试工具界面,按下”瓢虫”旁边的小鼠标,再进行网页元素的选择 默认快捷键,Ctrl + shift + C 鼠标移动到网页的某一块元素,鼠标右键,使用Firebug查看元素 HTM...
下面是特邀Umar Hansa做的一篇文章。Umar有一个新闻组，我是他的粉丝，他很亲切地应我们要求把这篇约稿写成了新闻组的形式。我将让他介绍一下他自己。 嘿，我是Umar。我喜欢在Twitter(@umaar)上分享web开发相关的小技巧，同时也喜欢通过Dev Tips以gif的形式分享开发的小技巧。Dev Tips是开发者的一个新闻组。现在，它主要是Chrome开发工具相关的内容。开始之前，感谢CSS-Tricks给我机会为自己喜欢的一个组织做点贡献。 这篇文...
1， Bootstrap Bundle （http://bootstrapbundle.com/）: 提供了15中不同的MVC Bootstrap模板。【扩展和更新】中搜索“Bootstrap Bundle” 下载安装。新建项目的时候就可以直接选择模板了。 2，Bootswatch (http://bootswatch.com/): 提供了一些不同色调的bootstraps css文件,可以直接下载所需主题的css文件覆盖项目中的css: 3，Bootstrap Snippets(http://bootsnipp.com/): 可以直接在vs中插入bootstr...
Chrome 开发者工具是一款Web开发者们公认的优秀的前端调试工具,本身功能强大，有了这个工具,你可以做很多有趣的事情。 快速编辑HTML元素 在Elements面板,鼠标双击需要打开的DOM元素标签,就可以编辑它，完成之后会自动更新页面和关闭标签。 还是在Elements面板按下ctrl + F 或 F3 ,在搜索栏里输入自己想要查找的内容，如果存在，就会在DOM中，用不同的颜色标出。 快速定位行和列 在sources面板...
1、善用css缩写可以减少页面文件大小，提高下载速度，同时使代码简洁可读。 如： 1. border-top:1px solid #cccccc; border-left:1px solid #cccccc; border-right:1px soli #cccccc; border-bottom:1px solid #cccccc; 可以写为:border:1px solid #cccccc; 2. margin-top:10px;margin-right:20px; margin-bottom:30px; margin-left:40px; 可以改写为： /*注...
偶遇一个可爱的css布局学习网站，立刻学起来哟～ max-width:当页面左右宽度缩小时，为了避免出现左右滚动条的糟糕体验，就可以用到max-width啦！页面比宽度小时，会自动缩小哦～max-width : 500px;margin: 0 auto;} box-sizing:对元素设置box-sizing:border-box后，确定宽度后再设置padding和border，不会改变宽度。可以对全局设置，解决浏览器兼容问题的写法如下：-webkit-box-sizing : border-box;-moz-box-sizi...
1、a标签的链接顺序，link-visited-hover-focus-active。 2、marquee标签，我之前基本上没有用到过这个标签，在最近的面试中才知道这个标签的强大之处，他可以帮我们实现滚动在固定范围内的上下，左右滚动等效果。marquee有以下几个属性 （1）direction,控制滚动方向，属性值有left,right,up,down; （2）behavior，控制滚动方式，属性值有scroll连续滚动，slide只滚动一次，alternate往返滚动； （3）loop，控制循环次...
影響開信率的因素是什麼？當收件者打開收件匣後，收件者會看到的要素包括：寄件者姓名、主旨、預覽文字。 我們先假設起跑點是一樣的：收件者、寄件者都處於相同狀態、且內容都十分吸引人的情況下，訊息傳遞的完整性會是引起開信興趣的決定性因素。 因此我們可以理解，在收件匣中，預覽文字代表的是主旨的延伸 – 是十分有限且珍貴的資源。由於email 預設抓取的是電子報最上方的純文字。因此，有時會因為戰略的需求，而犧牲預...
最后更新于：2016-01-13 16:16 以下是我积累的一些常用的css代码，会不断更新，最新的代码会显示在最前面，同时我也会提供最新更新日期以便查阅。 居中对齐 很多时候我们需要把一个元素在其父级容器里水平、垂直居中对齐。以下我列出了常用的几种方法： 1.在知道子元素宽度与高度的情况下进行居中，采用位置定位：absolute + margin .parent { position: relative;}.child { position: absolute; width:...
谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器。伴随每六个星期一次的发布周期和不断扩大的强大的开发功能，Chrome变成了一个必须的工具。大多数可能熟悉关于chorme的许多特点，例如使用 console 和 debugger 在线编辑CSS。在这篇文章中，我们将分享一些很酷的技巧，让你能够更好的改进工作流程。 通过 console 面板修改页面元素及元素内容： 获取元素节点 右键选择 Edit as HTML 或者 Edi...
编者按：慎用向右滑动操作、慎用横屏展示效果、按钮原理页面底部、使用SVG格式做矢量图…… 以上提到的技巧全都出自今天这篇好文，简单小巧但实操性很强，作为设计师，也要尽量避开这些坑。 1、交互上，慎用向右滑动的操作方式。 如：刮刮乐涂抹效果，左右滑动翻页等。 原因：苹果手机上，向右滑动容易触发返回“上一级页面”效果。 2、交互上，慎用横屏展示效果。 原因：体验上，需要用户设备开启屏幕...
慎用向右滑动操作、慎用横屏展示效果、按钮原理页面底部、使用SVG格式做矢量图…… 以上提到的技巧全都出自今天这篇好文，简单小巧但实操性很强，作为设计师，也要尽量避开这些坑。 1、交互上，慎用向右滑动的操作方式。 如：刮刮乐涂抹效果，左右滑动翻页等。 原因：苹果手机上，向右滑动容易触发返回“上一级页面”效果。 2、交互上，慎用横屏展示效果。 原因：体验上，需要用户设备开启屏幕旋转功能...