易截截图软件、单文件、免安装、纯绿色、仅160KB

学走路 第7天 接任务(CSS悟)

今天受一同学的委托,接了以个网站的美工的活!主要是做CSS方面设计的问题,这方面的东西我还比较喜欢做,因为都是一些美好的东西嘛,并且所见即所得。
其实CSS这个东西并不难,比起算法和程序设计容易多了,难得是怎么用!
CSS无非包括框架,布局,字体,颜色,这四个部分。
个人感觉想学好CSS没有别的着数,只有认认真真的找一本经典的教程做一遍就什么都明白了。
入门。CSS入门就是学好怎样控制颜色和字。颜色搭配好的话,可以使得整个网页的效果让人流连忘返。字体中字号,种类,颜色,缩进,字宽,特效也可以使得页面更加和谐。对于一个标签设置属性的时候一般按照(上,右,下,左)进行安排的。比如border-color:red,white,black,gray;就是说上边框的颜色是红色的。
进阶。了解了基本的操作后,就可以试着对模块进行布局。这里的模块主要分为两种一种是“段”类的,一种是“行”类的,所谓的段类表示的是这这标签中的内容代表的内容是一段,结束又换行符,代表的标签有(DHP及,Div,H1,P)。行类就是代表这个标签内的内容是一行,内容结束后没有换行,这一类的标签有(SS,即Span,Strong)。布局时候一定要用好display属性(block--强制表示段,none--不显示,inline--默认),以及float属性(left,right),还有clear属性(left--左边不能有浮动块,right--)。所谓的浮动块就是标签中带有float属性,且floating属性为left或right。
高级。掌握属性的继承和叠加,有时候我们写出的CSS代码跟我们想的结果并不一样。显示的效果,并不是我们在样式表中所定义的那一个,这时候你就应该好好看一下,你的CSS代码属性是不是出现了继承而被覆盖。
一般来说,属性显示的顺序是:上级属性---》下级属性---》页面内属性。外边距(margin)是一个值得研究的选择器,因为这个标签经常出现叠加的效果,特别是在垂直结构时候。如果上面的div 中margin-bottom:20px,而下面的是margin-top:10px,但是这两个div会叠加一起,下面的margin-top就变为了0,而上面的margin-bottom仍为20。这说明在叠加的过程是选择大的数值的。
发现了一个好的教程,www.w3school.com.cn 。
项目结束的时候我想贴一个完整的实例以留念,今天已经是明天了,哎!


相关文档:

Great Html Tab Panel Using CSS and Javascript

I needed a tab pane to put some content in my web pages. There are many solutions around
and I must say that they are quite good, but I had some extra requirements that I needed.
I did search around but I did not find what I wanted, so I ended up producing something and now I am sharing
it with y ......

table Css常用样式

<html>
<body>
    <table class="t FCK__ShowTableBorders" cellspacing="0" cellpadding="8" width="600" border="0">
    <tbody>
        <tr>
          &n ......

CSS对IE6、IE7、IE8支持详细的易用的参考

來源:http://www.webjx.com/css/divcss-17091.html
中文原文:CSS在Internet Explorer 6, 7 和8中的差别
译自:CSS Differences in Internet Explorer 6, 7 and 8
关于浏览器的最离奇的统计结果之一就是Internet Explorer
 
版本6,7和8共存。截至本文,Internet Explorer各个版本总共占据了大约65%的市场 ......

使用CSS样式 clear:both 实现div不并排

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#wai{
 width:500px;
 height:500px;
 background-color: #990;
}
#nei {
 float:left;
 width:200p ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号