由于各浏览器的默认CSS样式不一样，我们必须写一个CSS Reset统一起来。
通常我的做法是在common.css里写全局控制，这里面也包括header和footer，其它CSS文件就通过@import url(”common.css”);引用。
body{padding:10px;margin:0;background:#fff;font-size:12px;line-height:14px;color:#333;font-family:Arial;}
form,ul,ol,h1,h2,h3,h4,h5,h6,p{margin:0;padding:0;list-style:none;}
input,textarea,select,button{font-size:12px;}
img{border:none;}
address,cite,small{color:#999;font-style:normal;font-size:12px;}
a{color:#09c;text-decoration:none;}
a:hover{text-decoration:underline;}
#header{...}
#footer{...} ......
<style type="text/css">
<!--
input{ background:expression((this.readOnly &&this.readOnly==true)?"#CCCCCC":"")}
-->
</style>
<body>
<input type="text" name="" />
<input type="text" name="" readonly="readonly" />
expression:处理方式：
expression(操作手法)；
expression(?:) ......
原文地址：http://www.devwebpro.com/25-rounded-corners-techniques-with-css/
* This post is regularly updated. *
Rounded corners is one of the most popular and frequently requested
CSS techniques even the father of internet Google
also launch the rounded corners style markup
with her Google Adsense
and let users to custom their ads recently. Actually, there are a lot
of methods and techniques to create rounded corners with Cascading
Stylesheets. Some are quite simple just need pure CSS, and a part of
them need 2 to 4 background corner images and Javascript. So i select
some quality and usable rounded corners with CSS techniques for you to
have the best choices.
Note:
Here are some additional related
articles on DevWebPro you should also take a look at:
- Advantages of Using Corners Without Images
- Smooth Your Design and Round Those Corners!
- Rounded Corners Using CSS
Techniques
ThrashBox – create rounded-corner boxes with visual flare and the
absol ......
CSS是一个非常强大的网站设计标记语言。
虽然你可能会认为，任何人都可以转去写CSS代码，但是为了确保您在正确的轨道上，这里有如下8项
CSS原则，每个网页设计师应该遵循。
1、W3C验证
如果你是1个正在写CSS编码的人员，那么建议您每次对您所创建的CSS代码进行验证。但是，有很多设
计师却在这个重要的一步跳过。验证您的代码清理反馈的任何问题，确保它的工作对访问者友好。除了验证
你的CSS文件，你也应该验证您的HTML或XHTML文件。验证这些文件之前，请确保您已经声明了正确的HTML或
XHTML的doctype。声明您的doctype似乎是一个简单的细节，但很多设计师经过很多次验证不通过以后才发
现原来是因为他没有声明doctype。
2、文件
无论你的项目是一个人单干还是团队协作，很重要的是文件创建工作。如果您是在团队中单人项目，总
有机会，你的单人项目将最终演变成一个团队项目，如果发生这种情况，手头上有文件会变得很多，创建好
文件归类与名称，写好注释，协作更方便。即使在如果你是个人单干的项目，当您在创意或使用上突然想用
到某些文件，您却不知道放在哪去了？当您想找到某段代码，却发现因为没有注 ......
CSS 中有个重要的概念，就是盒子模式(Box model)。
盒子里由里至外依次是：
content 内容(比如文本、图片等)
padding 内边距
border 边框
margin 外边距
padding属性用来设置元素内容到元素边框的距离。
border属性用来设置一个元素的边线。
margin属性用来设置一个元素所占空间的边缘到相邻元素之间的距离。
CSS背景属性指的是content和padding区域。
CSS属性中的width和height指的是content区域的宽和高。
......
像上面的一张图片我们该怎么用js 和css + div 很好的应用到我们的项目中呢？
<style>
.InpuRight{
height:20px;background:url(img/msg_bg.png) no-repeat;background-position:0px -250px;
}
.InputError{
width:20px;height:20px;background:url(img/msg_bg.png) no-repeat 0px 0px;
}
.inputLogin{
width:20px;height:20px;background:url(img/msg_bg.png) no-repeat;background-position:0px -150px;
}
</style>
定义的css样式，仔细看InputError和其它的区别你会明白很多
看看页面是怎么定义的呢：
<div id="ceshi" class="inputLogin"></div>
<a href="javascript:checkName()" >click</a>
再看看我们的js吧
function checkName(){
var uu = document.getElementById("ceshi");
uu.className="InpuRight";
uu.innerHTML=" <font color='red'>asdfdsf</font>";
}
看看我们的一开始运行吧
再看看click后的吧
小小的研究啊，用去了我半天的时间，悔恨当初没有好好的学啊！ ......
像上面的一张图片我们该怎么用js 和css + div 很好的应用到我们的项目中呢？
<style>
.InpuRight{
height:20px;background:url(img/msg_bg.png) no-repeat;background-position:0px -250px;
}
.InputError{
width:20px;height:20px;background:url(img/msg_bg.png) no-repeat 0px 0px;
}
.inputLogin{
width:20px;height:20px;background:url(img/msg_bg.png) no-repeat;background-position:0px -150px;
}
</style>
定义的css样式，仔细看InputError和其它的区别你会明白很多
看看页面是怎么定义的呢：
<div id="ceshi" class="inputLogin"></div>
<a href="javascript:checkName()" >click</a>
再看看我们的js吧
function checkName(){
var uu = document.getElementById("ceshi");
uu.className="InpuRight";
uu.innerHTML=" <font color='red'>asdfdsf</font>";
}
看看我们的一开始运行吧
再看看click后的吧
小小的研究啊，用去了我半天的时间，悔恨当初没有好好的学啊！ ......
最新文章 : css