随笔分类 - CSS相关
页面样式，表单样式
摘要：网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案 Flex布局，可以简便、完整、响应式地实现各种
阅读全文
摘要：原文标题：Vertical Centering in CSS副标题：Yuhu's Definitive Solution with Unknown Height尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题（在一个DIV标签里有未知高度的文本或图片的情况下）...
阅读全文
摘要：最近做了一个排行榜页面，分类较多，并且以图文形式展示......最后页面明显过长了，用户体验自然不够好。最后想着在页面上部增加了页面内跳转导航，直接导航到本页的分类命名锚块。当然这就需要结合“返回顶部”功能来取得更好的体验了。当然一般情况下首先还是要避免页面过长，内容薄弱关联性不够的跳出率会很高。下...
阅读全文
摘要：常常使用position用于层的绝对定位，比如我们让一个层位于一个层内具体什么位置，为即可使用position:absolute和position:relative实现。一、position语法与结构 - TOPposition语法：position : static absolute relat...
阅读全文
摘要：之前看到很多人一直都问这个问题，不过当时我没当一回事，因为在 CSS 中要垂直居中，多数是在有高度的情况下，或者容器高度不定的情况下才用，看上去比较舒服，而且实现的方法也不少，不一定要拘泥于和 table 布局一样。不过最近有人问了几个例子，看来对此的需求还不少。现在就把我经验拿出来分享一下，希望大...
阅读全文
摘要：前端图片优化介绍随着前端页面越来越复杂，尤其是一些社区型的页面中，图片成了页面中不可或缺的资源，并且随着产品功能的叠加图片大小越来越多。以下是几个网站的图片所占的比重。由于图片是二进制文件，并不能像js、css、html那些源代码文件一样可以通过gzip压缩大大减小文件的大小。所以图片优化主要是选择合适的图片格式，在不降低图片质量的情况下去掉图片里的元数据信息。常用的一些优化方案目前图片优化使用比较多的主要是下面几种方式：选择合适的图片格式，如：png代替gif，尽量使用png8png使用pngout优化，jpg使用jpgtran通过yahoo的smush进行通过google的page spe
阅读全文
摘要：很多朋友接触CSS时间不短了。那你说CSS的优先级到底有什么规律呢？相信很多人会说，让我总结出规律来我一是说不上来，但是到了实际应用我一般都能弄清。是的，我也是这样，心里有一个大致的模糊印象，今天看到标准区几个帖子涉及到CSS选择符的优先级的话题。于是鄙人不才，潜下心来研究了一番。谬误之处，还请大侠们指出，一起共勉。说说我总结的css优先级的四大原则：原则一： 继承不如指定如果某样式是继承来的永远...
阅读全文
摘要：文档流将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动.内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素.有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 但是在IE中浮动元素也存在于文档流中(还让我觉...
阅读全文
摘要：css中中文注释导致aspx页面样式出错 今天遇到一个很奇怪的问题，网页设计把页面用层布局 发给我们以后，IE6下，静态HTML页面正常显示， 弄到vs里，扩展名改为aspx后页面就全变脸了，样式应用不上，布局错误 后同事从网上看到是因为css中添加了中文注释引起的，删除css中的中文注释，页面正常显示 PS:这种情况在IE7下没有出现，在火狐，IE6下出现 原文： 要你原先做的html...
阅读全文
摘要：一、发现问题 问题：绿色的浮动层被select组件“咬掉了一块”。 代码部分：浮动层 程序代码 汽车 化妆品 房地产 日用品 二、找到方法 上网搜索了一下之后发现，这个是html语言的通病，只...
阅读全文
摘要：定义 IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javas cript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式，CSS属性的值等于Javas cript表达式计算的结果。 在表达式中可以直接引用元素自身...
阅读全文
摘要：
阅读全文
摘要：CSS filters are a great way to add effects to text, images and other aspects of a webpage without having to make special graphics. Filters only work on Internet Explorer 4.0+, and only work on text if...
阅读全文
摘要：厌倦了在图片处理软件上给每张图片加上边框修饰？让CSS帮你一把吧！嘿嘿，看看下面的几张效果图，边框都不是用图片做的，很方便吧？ 文字块的应用效果 NARROW This is the text that goes in the middle. MEDIUM Another box that has a bit more text so that the box will be ...
阅读全文
摘要：原文出自：A List Apart 作者：Sergio Villarreal 中文翻译：onestab [2004.02.28] “…假如有一种技术，用 CSS 对任意块级元素灵活地添加阴影，而且能随着内容的大小自动扩展，还要适用于大多数流行的浏览器，那该有多好！不信么？告诉您，只需写几行代码就能做到。” 阴影效果成了平面设计的一个套路，平面设计师把它当作瑞士军刀的起子，随处使用，尽管招致不少...
阅读全文
摘要：有两个div .left { float:left; width:20%; border:solid 1px red; } .Right { float:right; width:76%; } 在firefox下右边框css设置只能用float：right ，IE下可以用float：left 设置完后 在IE下发现是正常显示的,但是在firefox下...
阅读全文
摘要：做网页时候为了美化网页，常常把表格边框的拐角处做成圆角，这样可以避免直接使用表格直角的生硬，使得网页整体更加美观。下面就给大家介绍两种制作圆角表格的常用的办法。 方法一：用图片制作圆角表格 这是最常用也是最通用的方法，它能很好地适应各种浏览器和不同分辨率，大部分网页都使用这种方法。 ①先用Photoshop等作图软件绘制一个圆角矩形，再用“矩形选框工具”选取左上交的圆角部分（如图1），复制它...
阅读全文
摘要：要一个宽度不固定的框，事情变得有些复杂了。宽度不固定，就意味着这个框在水平和垂直方向都有足够灵活的变化。 为什么说这更难一些呢？因为它需要对四张图片的合适安置——每个圆角用一张。每个圆角都要独立出来，以便框能够在各个方向伸展。于是，四张图片就意味着需要四个HTML对象来作为背景图片的载体。 有一些实现办法包括在样式表中使用“生成内容”，即使用：before和:after伪类来为单独的一...
阅读全文
摘要：前面的很多内容属于引言部分，如果您对这些内容比较了解，可以直接跳到下面的“盒模型问题的解决”，查看主要的内容。 首先谈谈!important问题的引起（盒模型问题）： 在CSS标准中，一个盒模型包括4个区，分别是：内容、内边距（padding）、边框（border） 和外边距（margin）。而Width宽度的计算，CSS有它的标准。但是实际上，不同的浏览器的表现却不同。比如， F...
阅读全文
摘要：自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义 cs...
阅读全文