随笔分类 - CSS
CSS成长之路
摘要：由于历史原因，IE较早的版本不支持PNG透明可以支持GIF等的透明由于png图片相对较小，所以很多网站还是青睐于PNG图片最近就遇到这种情况，使用js和css滤镜来实现的与大家分享一下下：首先，判断浏览器和版本，如果是IE7一下版本，进行处理再者，遍历所有控件，如果为png格式的处理；最后，img的onload加载图片，并用css滤镜处理图片//ie6 编码图片function ES_PNG(obj,rootPath){if( !( $.browser.msie && parseFloat( $.browser.version ) 0 && imgSrc.ind
阅读全文
摘要：当然习惯用 的同学，可以用这种方式来处理，但是这种方式不灵活，不好维护更好的方式是使用css来控制要想实现左对齐或右对齐，可以用align属性设置其为right或left，或者用css的text-align:left;靠左多少间距可用padding-left:200px;我的实现方式是 ：<td height='20' style='padding-right:200px;'><div align='right'><s:property value="#request.sortGroup[
阅读全文
摘要：1. 对数据表格应用样式普通的用表格展现的数据，一般会形成杂乱的布局，会使用户难以阅读对表格内容用少量垂直和水平填充进行视觉分隔，主要的列标题通过一种精细的重复背景图像区别于数据，颜色交替的行帮助引导用户的实线在每个单元格之间水平移动，同时视觉上不会显得太混乱，为了进一步帮助读者，可以在每一行上应用鼠标停留效果@ 1 表格特有的元素 #1 summary和caption caption：他基本上用做表格的标题 summary：可应用于表格的标签，用来描述表格的内容（与image的alt文本相似） <table id="listTable" summary="
阅读全文
摘要：1. 基本列表样式基本列表样式如下：<ul> <li>音乐</li> <li>电影</li> <li>电视剧</li></ul>一般为了添加定制的列表符号，可以使用list-style-image属性。但是，这种方法对符号图像的位置的控制能力不强而更常用的方法是关闭列表符号，并将定制的图像作为背景加载列表元素上，然后可以使用背景图像的定位属性精确的控制定制符号的对准方式一般IE和Opera使用左空白边控制列表的缩进，而Safari和Firefox选择使用左填充因此，首先要将列表的margin和pad
阅读全文
摘要：1.简单链接样式对链接最简单的方式是使用锚类型选择器：a {color:red;}锚的内部链接<p><a href="#mainContent">Skip to main Content</a></p>....<h1><a name="mainContent">Welcome</a></h1>这样虽然只想让真正的链接变成红色，但标题的内容颜色也会变成红色，为了避免这个问题,CSS提供了两个伪类选择器:link 用来寻找没有被访问过的链接:visited 用来寻
阅读全文
摘要：1.简单CSS阴影将一个大的阴影图像应用于容器div的背景，然后使用负值的空白边偏移这个图像，从而显出阴影。<div class="img-wrapper"><img src="dunstan.jpg" width="300" height="300" alt="qixing"/></div>.img-wrapper{ background:url(images/shadow.gif) no-repeat bottom left; clear:right; f
阅读全文
摘要：1.固定宽度的圆角框最容易的一种方式是：使用两个圆角图片，一个放在顶部，一个放在底部<div class="box"> <h2>Headline</h2> <p>Content</p></div>.box{ width:418px; background:url(images/bottom.gif) no-repeat left bottom;}.box h2 { background:url(images/top.gif) no-repeat left top;}要是不希望内容碰到框的边界，所以还需在
阅读全文
摘要：body{ background:url(pattern.gif);}一般浏览器默认是水平或垂直地重复的现实这个图像可以选择背景图像的平铺方式：水平平铺：repeat-x垂直平铺：repeat-y不平铺：no-rpeatbody{ background: #CCC rul(pattern.gif) repeat-x;}如果想在站点的每个标题上添加一个符号h1{ padding-left:30px; background:url(images/bullet.gif) no-repeat left center;}关键字：left,center等背景的位置也可以使用单位：像素和百分数像素：...
阅读全文
摘要：这些概念控制在页面上安排和显示元素的方式1.框模型他指定元素如何显示和如何相互交互，页面上的每个元素被看作一个矩形框，这个框由元素的内容、填充、边框和空白边组成填充出现在内容区域的周围，若在元素上添加背景，那么背景会出现在内容和填充组成的区域因此，常常使用填充在内容周围创建一个隔离带，使内容不会和背景混在一起添加边框会在填充区域外加一条边，可是实现、虚线或点线边框外面是空白边，空白边是透明的，一般使用它控制元素之间的距离填充、边框和空白边都是可选的，默认值是0空白边：margin填充： padding边框： borderCSS中width和height是指内容的宽和高，而元素的总宽高为：内容宽
阅读全文
摘要：在样式表现时，有可能会出现两个或更多的样式寻找同一元素，这就可能出现表现层的不确定性和样式冲突CSS通过“层叠”给每个规则分配一个重要度层叠一般采用以下重要度层次： * 标准！important的用户样式 * 标准！important的作者样式 * 作者样式 * 用户样式 * 浏览器和用户代理应用的样式根据选择器的特殊性决定规则的次序，若是特殊性相同，后定义的规则优先。特殊性为了计算选择器的特殊性，每种选择器被分配一个数字值，将规则的每个选择器的值加在一起，计算出规则的特殊性。选择器的特殊性分为四个等级：a、b、c、d * 行内样式一般为，a=1 * b=ID选择器的数量 * ...
阅读全文
摘要：CSS常用选择器一般有：1.类型选择器p{color:#FF0000;}h1{font-weight:bold;}2.后代选择器li a{text-decoration:none;}上述两种样式适用于那些应用范围广的一般性样式。对于更特定的元素可以适用：1.ID选择器ID选择器由#表示#intro{font-weight:bold;}<p id="intro">Some Text</p>2.类选择器类选择器由.表示.datePosed{color:green;}<p class="datePosed">24/3/201
阅读全文
摘要：div元素有助于在文档添加结构，合理处理布局。div实际上代表部分，它提供了将文档分割为有意义的区域的方法。但为了将不必要的标记减少到最少，应该只在没有现有的元素能够实现区域分割的情况下使用div元素。如：<div id="mainNav"> <ul> <li>Home</li> <li>Aboute</li> </ul> </div>可以删除div，直接在列表上使用ID<ul id="mainNav"> <li>Home</li
阅读全文
浙公网安备 33010602011771号