欢迎来到天天文库
浏览记录
ID:23263809
大小:54.00 KB
页数:5页
时间:2018-11-05
《网页标准化制作:css的超级技巧大放送》由会员上传分享,免费在线阅读,更多相关内容在工程资料-天天文库。
1、网页标准化制作:CSS的超级技巧大放送>>edu.5151doc.教育资源库 在之前贴出的CSS说明中已经说明了#m_blogdiv.tit是Blog文章标题的代码所以我们只要把添加>图片的代码添加在后面的{}中即可。 添加代码如下: line-height:多少px;设置标题的高度,其实这里的设置为图片的高度就可以了 text-indent:多少px;设置标题的文本前面空多少宽度,这里可以填图片的宽度,为了美观起见,可以再多+5、6px,因为图片和标题贴着不好看,这个主要还是看个人感觉和喜好设置了 background:url(图片地址)no-re
2、peat;设置添加的图片地址,no-repeat就是不重复,一定要设置,不然图片就覆盖满整个标题栏了,其实在我的最新评论中,每个留言名字前面有个小爪子,其代码设置方法跟这个也是一样的,只要设置在#m_mentdiv.item{}下就可以了。 如果你喜欢的话,也可以在其他模版中做设置,各模块代码ID请参看百度CSS说明、详解 有朋友说看不懂,要我说的更详细点,我觉得我说的满详细了,我把我的相关设置的代码贴出来给大家看看,或许能够让大家看的更明白点 #m_blogdiv.tit{font-size:14px;font-/459fd6ca87470c46f21
3、fe79d.jpg)no-repeat;} 红色的这段就是自己加进去的设置,大家只要把url后面()中的地址换成自己要换的图片地址,然后把line-height和text-indent后面的数值换成自己换上去的图片的高和宽就可以了——天涯书塾 大家应该看到我的空间的标题有点与众不同 可能不仔细看的话还不会发现 我的标题的格局与普遍的空间标题格局不一样就是标题和介绍是左右排列而不是上下排列的,嘿嘿~~~ 来看看我的设置代码吧 #headerdiv.tit{top:5px;left:20px;line-height:60px;font-size:60p
4、x;font-family:隶书} #headerdiv.tita.titlink{color:#813533;text-decoration:none} #headerdiv.tita.titlink:visited{color:#813533;text-decoration:none} #headerdiv.tita.titlink:hover{color:#FFFFFF;text-decoration:none} #headerdiv.desc{top:27px;left:320px;color:#813533;font-size:16px}
5、这就是我的空间标题设置的代码 下面来详细解说一下 #headerdiv.tit{}这是标题的设置 #headerdiv.tita.titlink{}这是标题超链接的设置 #headerdiv.tita.titlink:visited{}这是标题超链接已经被访问过的设置 #headerdiv.tita.titlink:hover{}这是当鼠标移动到标题超链接上时显示的属性 #headerdiv.desc{}这是空间标题后面的简介的内容设置 然后来解释一下当中的属性和详细参数 top:5px距离模版顶部的间隔距离为5px left:20px距离模
6、版左边的间隔距离为20px line-height:60px设置总高度为60px font-size:60px设置字体大小为60px,这个不能设置的比的line-height大,不然标题字体的一部分会被遮掉的 font-family:隶书设置字体的型号 color:#813533设置字体的颜色代码为#813533,这里也可以写颜色的英文名,比如black,。只有两个例外情况可以不定义单位:行高和0值。除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格。 三.区分大小写 当在XHTML中使用CSS,CSS里定义的元素名称是区分大小写的。
7、为了避免这种错误,我建议所有的定义名称都采用小写。 class和id的值在HTML和XHTML中也是区分大小写的,如果你一定要大小写混合写,请仔细确认你在CSS的定义和XHTML里的标签是一致的。 四.取消class和id前的元素限定 当你写给一个元素定义class或者id,你可以省略前面的元素限定,因为ID在一个页面里是唯一的,鴆lass可以在页面中多次使用。你限定某个元素毫无意义。例如: div#content{/*de12下一页[这篇文章来自..,]clarations*/} fieldset.details{/*declarations*/}
8、 可以写成 #content{/*
此文档下载收益归作者所有