`

css小贴士备忘录

阅读更多

 前言:在CSS的学习实践过程中,我经常遗忘一些貌似常用的代码,为了能够强化记忆特在此作归纳整理并将陆续增删,以备即时查阅。但愿今后能遇到问题及时解决,牢牢记住这些奇怪的字符们。

 

 

一、关于段落文本强制对齐

text-align:justify;  text-justify:inter-ideograph;

 若要文本两端对齐,必须先定义P的宽度,然后 { text-align:justify; text-justify :distribute-all-lines; }

 

 

 

二、给按钮的不同状态加CSS

<style type="text/css"> 
<!-- 
.over { ... } 
.down { ... } 
--> 
</style> 



<input type="button" 
onMouseOver="this.className='over';" 
onMouseOut="this.className=' ';" 
onMouseDown="this.className='down';" 
onMouseUp="this.className='over';" 
value="未被点击的按钮" 
onClick="this.value='被点击的按钮'" name="Button">

 

 

三、在一个CSS文件中导入另一个CSS

  @import url(***.css);

 

 

四、渐变背景色(使用这个一定得加width或height)

FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#EEF5F8,endColorStr=#ffffff);

使用这个时必须注意要对该DIV定义width或height值。

 

.gradient {   
    /* Firefox 3.6 */   
    background-image: -moz-linear-gradient(top, #81a8cb, #4477a1);    
  
    /* Safari & Chrome */   
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb));    
  
     /* IE6 & IE7 */   
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');   
  
    /* IE8 */   
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')";   
}  

 

 

 background:#f4faff\9;
 background:linear-gradient(#fff 0%,#f1f9ff 100%) no-repeat;
 background:-moz-linear-gradient(#fff 0%,#f1f9ff 100%) no-repeat;
 background:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#f1f9ff)) no-repeat;
 background:-o-linear-gradient(#fff 0%,#f1f9ff 100%) no-repeat

 

 

五、用PNG图片在IE6中做出透明效果

*html #id{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=images/*.png); background:none; }

 

 

六、单行省略文本

{ overflow:hidden; text-overflow:ellipsis;  white-space:nowrap; }

使用这个时必须注意要对需要省略文本的单行(如div或li)定义width值。

 

七、设为首页和加入收藏的代码

<a style="BEHAVIOR: url(#default#homepage)" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.hengdong8.cn');" href="javascript:" target="_self">设为首页</a>|<a href="contact.htm">联系我们</a>|<a href="javascript:window.external.AddFavorite('http://www.hengdong8.cn','衡东吧')" target="_self">加入收藏</a>

 

八、中文描边效果

<style type="text/css">
<!--
body {
     font:12px "Verdana";
     filter:alpha(style=1,startY=0,finishY=100,startX=100,finishX=100);
     background-color:#ccc;
}
.sizscolor {
     font-size:14px; font-weight:bold;
     position:absolute;
     padding:4px;
     filter:
         Dropshadow(offx=1,offy=0,color=white)
         Dropshadow(offx=0,offy=1,color=white)
         Dropshadow(offx=0,offy=-1,color=white)
         Dropshadow(offx=-1,offy=0,color=white);
}

-->
</style>
</head>

<body><div class="sizscolor">中文描边效果</div>
</body>

 

九、调整字间距

{ text-transform: uppercase; letter-spacing: 2px }

 

十、margin加倍的问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline; 例如: <#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:5px; /*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}

 

十一、把鼠标放在图片上会出现图片变亮的效果

可以用图片替换的技巧,也可以用如下的滤镜,代码如下:
.pictures img { filter: alpha(opacity=45); }
.pictures a:hover img { filter: alpha(opacity=90); }

 

十二、区分不同浏览器

区别FFIE7IE6
background:orange ;* background:green !important ;*background:blue ;
注:IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;

 

IE6 IE7 FF
* ×
!important ×

 


另外再补充一个,下划线”_ “,
IE6支持下划线,IE7和firefox均不支持下划线。

 

于是大家还可以这样来区分IE6IE7firefox
: background:orange ;* background:green ;_ background:blue ;

注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。

 

十三、单行图片文字垂直居中对齐

style *{vertical-align:middle;.....}

 


十四、input加样式(1)

input[type~=radio]  
  {  
  ...  
  }  
   
  含义:请将所有的input应用下面的style,但是其type属性是radio的input则例外。  

 

 

十五、input加样式(2)

<input type="submit" class="btn" onmouseover="this.className='btnOver'" onmouseout="this.className='btn'" onmousedown="this.className='btnDown'" value="确认" />

 

<input id="" name="" type="text" class="input1" onblur="this.className='input1'" onfocus="this.className='input1-bor'" />

 

 

十六、给文字加阴影

 

h1 { float: left; text-indent:0em; text-shadow:black 2px 2px 2px;  filter: dropshadow(OffX=2, OffY=2, Color='black', Positive='true');

 

 

十七、用Javascript和CSS去掉链接中的虚线框和下划线

 

在链接标签中添加onFocus="if(this.blur)this.blur()"这句代码即可屏蔽点击时四周出现的虚线框,如:
<A href="http://www.cce.com.cn" onFocus="if(this.blur)this.blur()"& gt;中国电脑教育报</a>

 

十八、 input type="image"

 

十九、删除链接上的虚线框

a:active, a:focus { outline:none; } 

 

 

二十、改变上传按钮的样式

<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<input type="text" size="20" name="upfile" id="upfile" style="border:1px dotted #ccc">
<input type="button" value="浏览" onclick="path.click()" style="border:1px solid #ccc;background:#fff">
<input type="file" id="path" style="display:none" onchange="upfile.value=this.value">
</BODY>
</HTML>

 

 或

<span id="uploadImg">
<input type="file" id="file" size="1"  style="width:100" class="upload">
<a href="#">上传</a></span>

 

#uploadImg{ font-size:12px; overflow:hidden; position:absolute;  left:190px; top:6px; }
#uploadImg a { color:#000; line-height:24px; text-align:center; display:block; width:70px; margin:0; height:24px; border:1px solid #aecbd3; background:url(../images/btnbj.gif) repeat-x 0 0; }
#file{ position:absolute; z-index:100; margin-left:-180px; font-size:60px;opacity:0;filter:alpha(opacity=0); margin-top:-5px;}

 

<style>
input{border:1px solid green;}
div {width:300px;position:relative;}
p {float:left}
.file {position:absolute;top:20px;right:300px;+top:0;+right:73px;width:0px;height:30px;
filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}
#txt {height:29px;margin:1px}
#ii {width:70px;height:27px;margin-top:2px;}
</style>
<div>
<form method="post" action="" enctype="multipart/form-data">
<p>
<input type="text" id="txt" name="txt" />
</p>
<p>
<input id="ii" type="image" src="http://bbs.blueidea.com/images/blue/logo.gif" value="请选择文件" />
</p>
<p>
<input type="file" onchange="txt.value=this.value" class="file" />
</p>
</form>
</div>

 

 

二十一、css bug

 

  IE6 IE7 IE8 Firefox Chrome Safari
!important   Y   Y    
_ Y          
* Y Y        
*+   Y        
\9 Y Y Y      
\0     Y      
nth-of-type(1)         Y Y
分享到:
评论

相关推荐

    纯CSS3超酷日常工作备忘录列表特效

    在本项目中,我们探索的是一个使用纯CSS3实现的超酷日常工作备忘录列表特效。这个创新的设计完全不依赖JavaScript代码,而是巧妙地利用了HTML的Checkbox元素及其相关CSS属性来实现交互功能,使用户可以轻松标记日常...

    微信小程序Demo:备忘录

    "微信小程序Demo:备忘录" 是一个基于微信小程序开发的示例项目,旨在帮助开发者理解如何利用微信小程序框架创建一个功能完备的备忘录应用。 该"todolist-master"压缩包很可能是这个备忘录小程序的源代码仓库,包含...

    微信小程序备忘录.zip

    "微信小程序备忘录"是一个典型的示例,它利用微信小程序的框架和API,为用户提供一个便捷的记事工具。 在开发微信小程序备忘录时,我们需要掌握以下几个核心知识点: 1. **小程序框架**:微信小程序基于WXML...

    html制作的备忘录html制作的备忘录

    综上所述,创建一个HTML备忘录应用需要掌握HTML的基本结构和元素,理解如何通过CSS进行美化,以及使用JavaScript增加交互性。通过`todoList-master`这个文件名,我们可以猜测这可能是一个关于任务管理的实例,可能...

    微信小程序开发-备忘录案例源码.zip

    在这个“微信小程序开发-备忘录案例源码.zip”压缩包中,包含了用于教学或自学习目的的微信小程序备忘录功能的完整源代码。下面将详细阐述微信小程序的开发环境搭建、基本结构、核心语法以及备忘录功能的实现。 ...

    微信小程序备忘录小程序源码(源码+源码导入视频教程+源码导入文档教程)小程序精选源码亲测可用

    这个压缩包文件包含了一套完整的微信小程序备忘录应用的源码,以及相关的学习资源,非常适合初学者或者希望快速搭建小程序的开发者使用。 源码部分是实现备忘录功能的小程序代码,包括了前端的WXML(微信小程序标记...

    移动端备忘录

    这篇内容包含了代码和截图,意味着我们将探讨如何开发一个移动端备忘录小程序,以及可能涉及的技术和实现细节。 首先,我们注意到标签中有"app",这表明我们将讨论的是一个应用程序,而"weixin"则暗示这个备忘录是...

    C# ASP.NET 模块 - 网站备忘录

    本模块的主题是"网站备忘录",这是一个基于C# ASP.NET 实现的功能模块,旨在帮助用户方便地管理他们的备忘录。下面我们将详细探讨这个模块涉及的技术和知识点。 首先,备忘录功能的实现离不开前端和后端的协同工作...

    微信小程序-备忘录示例代码.zip

    在“微信小程序-备忘录示例代码.zip”这个压缩包中,我们得到了一个关于创建备忘录功能的小程序模板。下面将详细解释相关知识点。 1. **微信小程序框架**:微信小程序采用自研的WXML(WeChat Markup Language)和...

    备忘录.zip小程序精选源码

    【标题】"备忘录.zip小程序精选源码"所涉及的知识点主要集中在小程序开发和源码分析两个领域。小程序作为一种轻量级的应用形式,它在移动互联网时代深受开发者和用户的喜爱,因为它不需要下载安装,即扫即用,方便...

    小雪备忘录PHP开源系统(xNote) v1.0.zip

    1. **前端界面**:备忘录系统的用户界面通常使用HTML、CSS和JavaScript构建,提供友好的交互体验。JavaScript负责处理用户的实时交互,如添加、编辑备忘录,而PHP主要在后端处理数据和业务逻辑。 2. **后端逻辑**:...

    jQuery日历表设置日期备忘录代码

    在本示例中,我们将探讨如何使用jQuery实现一个日历表功能,并添加日期备忘录代码。这个功能可以用于网页应用程序,帮助用户方便地查看和管理他们的日期提醒。 首先,我们需要引入jQuery库。这通常通过在HTML文件中...

    微信小程序开发-工具类-备忘录案例源码.zip

    这个"微信小程序开发-工具类-备忘录案例源码.zip"文件显然包含了用于创建一个备忘录小程序的源代码,这为我们提供了一个很好的学习和实践机会。 在开发微信小程序时,我们首先需要了解其核心概念和技术栈。微信小...

    s2sh框架实例——个人备忘录系统源码

    【标题】"s2sh框架实例——个人备忘录系统源码" 提供了一个学习和研究Web开发的宝贵资源,特别适合对Java Web技术感兴趣的初学者。S2SH是Struts2、Spring和Hibernate三个开源框架的组合,是Java领域广泛应用的MVC...

    简单的备忘录模板,事项列表,创建计划事项小程序前端模板下载。

    本文将详细讲解“简单的备忘录模板,事项列表,创建计划事项小程序前端模板”的相关知识点,包括小程序的基本概念、前端开发技术以及源码软件的应用。 首先,我们要理解什么是小程序。小程序是微信、支付宝等平台...

    asp.net在线电话备忘录

    【ASP.Net在线电话备忘录】是一个基于ASP.Net技术构建的应用程序,主要用于管理电话通讯记录,提供便捷的在线存储和查询功能。这个系统可能包含了用户登录、电话记录添加、编辑、删除以及搜索等功能,旨在提高工作...

    jQuery简单带备忘录功能的日期选择器插件

    - `css` 文件夹:这里包含了插件的样式文件,如CSS样式表,它们负责定义日期选择器和备忘录的外观和布局。通过修改这些样式,我们可以自定义插件的视觉效果以适应不同的项目需求。 - `fonts` 文件夹:可能包含字体...

    beiwanglu.rar_备忘录代码

    【标题】"备忘录代码"指的是一个编程项目,它实现了备忘录功能。备忘录应用程序是常见的软件工具,允许用户记录、存储和管理日常生活中的待办事项、提醒和其他重要信息。在这个“beiwanglu.rar”压缩包中,包含的...

    HTML网页助手,包括JS万年历、闹钟、备忘录 常用查询.rar

    JavaScript的DOM操作用于在页面上显示和更新备忘录条目。 4. **天气预报**:天气预报功能通常需要从外部API获取数据,如OpenWeatherMap等,然后使用Ajax(Asynchronous JavaScript and XML)或Fetch API异步加载...

Global site tag (gtag.js) - Google Analytics