来看看:五条十分主要的CSS技能
DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascadingstyleSheets的简称,中文译作“层叠样式表单”。明天向人人先容别的五条十分主要的CSS技能,大概有反复,人人多多了解这些常识必定有收益。
1、图象交换文本
#headerh1a{
display:block;
text-indent:-9999em;
background:(images/logo.png)no-repeat00;
height:87px;
width:250px;
overflow:hidden;
}
看得懂这个吗?我看到良多们都LOGO都只是用图片取代,而没有链接。其他,只必要更复杂的办法,使用图象交换文本的办法,显现LOGO,并具有链接。各个值的功效display:block;a的默许形态是inline的,必要让它酿成块状的,才大概界说高度和宽度,以顺应LOGO的宽高。别的的一个功效是,让链接在text-indent后,在原地区可点击。
text-indent:-9999em;-岂非你想删除logo中的笔墨?如许应当是你的最初选择。由于这不切合语议标志,以是,也对搜刮引擎不友爱。而这个值就是让你的字体缩进到看不到的中央。让你不必删除笔墨。
其他的不必讲了吧…
2、display:inline-block;
在写sofisheddaily的CSS时,在顶站定日期的空间,就用了display:inline-block;望文生义,就是在内联情形也的块状,能够设定高度宽度。在GR看到一篇share讲了说到了跨扫瞄器显现这个显现display:inline-block的办法:
.element-class{
display:-moz-inline-stack;//Firefoxonlycode
display:inline-block;//somestandardbrowsers
zoom:1;//IEonly
*display:inline;//OnlyIEknowthiscode(CSSHack)
}
优点是甚么?优点就是不必利用float,在一行中显现设定宽高的元素。不外,下面提到的跨扫瞄器,貌似我在IE下仍然能够显现,岂非是IEtester的成绩?
3、用line-height笔墨垂直居中
你大概晓得用text-align来让笔墨程度剧中,不外,却找不到更间接的办法来让元素垂直居。这里,也许你能够使用一下line-height。好比你要在导航中让笔墨几乎居中于导航,大概会想到用padding和margin,不外,这时候,烦人的IE大概会给你打造出贫苦,以是,用line-height吧,这是一个更复杂的办法:
下面这张图片的导航高度是28px,你能够给a设定如许的值:#navigationa{font-size:14px;line-height:28px;},如许,就少往了用padding和margin的贫苦了。
4、结构居中
你会发明,良多网站的结构都是剧中的。缘故原由是便利扫瞄,对用户对照好?关于初学CSS的人来讲,大概其实不晓得怎样做吧。很复杂,就一句,假定你的结构的谁人div壳是#wrapper:
div#wrapper{margin:0auto;}
这就是说,让下面没有margin,而摆布主动顺应,选择相称的宽度。如许就能够更好地在各个扫瞄器中体现了。
5、CSS缩写
CSS缩写,为何?复杂来讲有两个优点。一,让你写代码更无效率,由于短;二便利修正,谁也不想对着一堆混乱的代码发愣。貌似有良多人写过这个,不外,这里,就反复一下吧。我其实不想间接写出一切,如许文章看起来仿佛出格长,就给一些链接看看,你就分明了。
CSS经常使用属性缩写实例http://www.poluoluo.com/css/divcss-8021.html
CSS代码缩写实例和CSS缩写缘故原由总结http://www.poluoluo.com/css/divcss-8019.html
CSS缩写6个图例总结http://www.poluoluo.com/css/divcss-8018.html
CSS缩写优化CSS文件的体积http://www.poluoluo.com/css/divcss-6331.html
Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。 在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。 还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。 可以使用 CSS 检查工具进行设计。 可以使用 CSS 检查工具进行设计。 HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器) Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。 还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
页:
[1]