CSS使用笔记
最近做网站项目,用到一些CSS技巧,为了帮助以后使用同时也为了让别人节约调试时间,把项目中的一些用例记录下来。
1、table内容为空时,IE中tabale属性失效。加入如下代码会生效(本人用法,如有更好方法,希望分享)
<table id="detail" rules="none" frame="void">
2、滚动新闻条列间距大小一致,jsp代码及CSS代码。
<div class="content" id="marquee_demo">
<table cellspacing="0" cellpadding="3" align="center" border="0">
<tbody>
<tr>
<td id="marquee_product1" valign="top">
<table class="release" style="margin-bottom: -8px;
">
<c:forEach items="${productsRelease}" var="productTemp" >
<tr>
<td class="target" align="left" >
<a href="${pageContext.request.contextPath}/products/catalog/${productTemp.catalog}_${productTemp.title}">
<img src="${pageContext.request.contextPath}/css/images/release.png"/>
<span>${productTemp.title}</span>
</a>
</td>
</tr>
</c:forEach>
</table>
</td>
</tr>
<tr>
<td id="marquee_product2" valign="top"> </td>
</tr>
</tbody>
</table>
</div>
CSS代码:
.release{margin:0px;padding:0px;height:18;table-layout:fixed;word-break:break-all;}
.release .target{text-align:left;height:15px;width:236px; line-height:15px;border-bottom:1px dotted #CFCFCF;text-indent:3px; color:#F5A11B;}
.release .target span{color:#F3A119;}
注:红色字体为控制新闻列表中第一条和最后一条的衔接距离。
3、图片拼接,jsp页面代码和CSS代码
<div class="searchImage">
<img src="${pageContext.request.contextPath}/images/search_L.jpg" style="margin-left:6px;"/>
<input type="text" id="fulltextw" value="${fulltext}"/>
<img class="hand search" src="${pageContext.request.contextPath}/images/search_R.jpg" onclick="search();"/>
</div>
CSS代码:
.searchImage{margin-left:12px;margin-top:6px;width:220px;}
.searchImage img{float:left;}
.searchImage .search {float:left;margin-right:0px;}
.searchImage input{float:left;background-image:url(../images/search_M.jpg);border:0px;line-height: 22px;width:178px;}
4、IE6下背景色为透明图片显示问题,只有图片格式为gif的,背景才显示为透明。
5、新页面打开 target=_blank
6、隔行显示不同颜色
jQuery(".tableList tr:old").addClass("evenTR");
class="tableList "的偶数行。显示为css中"evenTR"属性特征。
jquery表格奇数偶数行换色
$("tr:odd").addClass("odd"); 对奇数行加class样式
$("tr:even").addClass("even");对奇偶数行加class样式
jQuery(".tableList tr:even").addClass("evenTR");
class="tableList "的奇数行。显示为css中"evenTR"属性特征。
本人也是初学CSS,在以后项目用到技巧时,会继续添加,您有什么好的建议也可以联系本人。
分享到:
相关推荐
一直用ie为准做网页,今天到火狐官方网站下了个没有google插件的安装了(特别讨厌插件,而国内几乎下载不到没有google插件的火狐浏览器!) 打开一看,哇哈,终于来了,ff好多不兼容的问题来了。随便点击了下不兼容...
五、firefox无法显示背景图片:解决方案 ASP.NET 一、 控件连接数据库 二. 从excel导入数据到数据库 比较 一、Web Application Projects和Web Site Projects两种编程模型比较 疑难问题解决 一.密码最短长度...
8、CSS设置网页在IE下为灰色显示 250 9、HTML A链接CSS样式 251 10、CSS强制换行样式 251 11、CSS强制同行超出部分隐藏样式 253 12、CSS设置行间距样式 253 13、CSS水平下拉菜单被FLASH覆盖如何解决 253 14、禁止...
thinkphp响应式记录记忆简单博客网站模板+...本模板自带eyoucms内核,无需再下载eyou系统,原创设计、手工书写DIV+CSS,完美兼容IE7+、Firefox、Chrome、360浏览器等;主流浏览器;结构容易优化;多终端均可正常预览。
Chrome,FireFox,Opera,IE,Safari 火狐浏览器 打开Firefox并输入about:debugging页面 单击“此Firefox”(在Firefox的较新版本中) 单击“加载临时加载项” 然后,在扩展程序目录中选择任何文件。
下面一直飘红线,再仔细查了一下,原来是在 Chrome, Safari 中使用 -webkit-filter ,还有 -moz-filter (适配Firefox), -o-filter (适配Opera), -ms-filter (适配ie)而微信小程序里使用的话,使用 filter 就...
支持:所有的主流浏览器都支持H5(Chrome,FireFox,Safari,IE9及更高版本,IE9为有选择的支持非全部支持)。 改变了用户与文档的交互方式:多媒体:视频,音频,画布。 增加了其他的新特性:语义特性,本地存储,...
与 CSS 过渡不同,关键帧动画目前仅在 Webkit 浏览器和 Firefox 中受支持,不久将在 IE 10 中受支持。不受支持的浏览器将忽略您的动画代码。 动画属性有八个子属性: animation-delay 定义动画开始的时间。 ...
Ajax及其工作原理 AJAX 是一种与服务器交换数据无需刷新网页的技术,最早由Google公司在谷歌地图里使用,并迅速风靡。 AJAX是不能跨域的,如需跨域,可以使用document.domain=’a....所有现代浏览器(IE7+、Firefox、Ch
谷歌师兄的leetcode刷题笔记加入CSS 一个 Sass Mixin,用于调试和检查您的设计的可访问性 这个 mixin 将允许您获得布局的所有区域的概览,获得一个灰度版本来检查对比度,以及 8 种不同的过滤器来模拟最常见的色盲...
2、Mozilla Firefox 3、Google Chrome 4、Apple Safari 5、Opera Opera(欧朋) 3、主要技术 1、HTML 2、CSS 3、Javascript 2、HTML入门(重点) 1、什么是HTML Hyper Text Markup Language 超级 文本 标记 ...
浏览器参照基准:Firefox, Chrome, Safari, Opera, IE; * IE6不支持CSS min-height属性。最小高度的定义:1. 元素拥有默认高度;2. 当内容超出元素的默认高度时,元素的高度随内容增加而增加Figure 1:如下图的...
2:界面:兼容IE8+,firefox,google等等 3:数据库:兼容MySQL,oracel,sqlserver2008 通用性: 让项目只注重业务,为企业或个人有效率地节约人力资源的成本! 1:系统具有最基本的用户,角色,资源,权限管理,...
再次与大家分享一个H5抽奖大转盘,这个转盘大抽奖还带有中奖名单的显示,适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。 这里需要注意两个参数设置,主要是指...
响应表演示版经过测试 This control was successfully tested in Chrome, Firefox, Safari, Opera and IE9+.依存关系 * No dependencies (HTML, CSS, Javascript (Vanilla))笔记 - Some parameters can have ...
###浏览器兼容性### 该脚本在以下浏览器上应该可以正常工作: 火狐 3.5+ 谷歌浏览器歌剧 12+ IE9+ 野生动物园 6+ 由于每个 CSS 属性都需要手动构建才能获得支持,因此有许多属性尚不受支持。用法笔记! 这些说明用于...
MMJ.VN 静态版 工具使用 Yeoman 脚手架项目 用于管理依赖项的 Bower 用于自动任务的 Gruntjs 依赖关系 ...浏览器支持:IE9+、Opera、Firefox、Chrome。 不是 IE9+ 和 Opera mini 的后备 css 过滤器。
IE浏览器 苹果浏览器 火狐浏览器 歌剧 TOR浏览器 应用: 传输FTP :FTP客户端。 Evernote :很棒的笔记应用程序 Skitch :通过网址分享您的屏幕截图 Slack :团队沟通应用 git : 开源 SVN,与 github 搭配得很好:...