版权栏,给它加个背景,与页头相映,里面文字要自动居中对齐,有多行内容时,行间距合适,这里的链接样式也可以单独指定,我这里就不做了。其样式代码如下:
以下是引用片段: #footer { height: 50px; width: 740px; line-height: 2em; text-align: center; background-color: #009966; padding: 10px; } |
最后回到样式开头大家会看到这样的样式代码:
以下是引用片段: * { margin: 0px; padding: 0px; } |
这是用了通配符初始化各标签边界和填充,(因为有部分标签默认会有一定的边界,如Form标签)那么接下来就不用对每个标签再加以这样的控制,这可以在一定程度上简化代码。最终完成全部样式代码是这样的:
以下是引用片段: <style type="text/css"> <!-- * { margin: 0px; padding: 0px; } body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0px auto; height: auto; width: 760px; border: 1px solid #006633; } #header { height: 100px; width: 760px; background-image: url(headPic.gif); background-repeat: no-repeat; margin:0px 0px 3px 0px; } #nav { height: 25px; width: 760px; font-size: 14px; list-style-type: none; } #nav li { float:left; } #nav li a{ color:#000000; text-decoration:none; padding-top:4px; display:block; width:97px; height:22px; text-align:center; background-color: #009966; margin-left:2px; } #nav li a:hover{ background-color:#006633; color:#FFFFFF; } #content { height:auto; width: 740px; line-height: 1.5em; padding: 10px; } #content p { text-indent: 2em; } #content h5 { font-size: 16px; margin: 10px; } #footer { height: 50px; width: 740px; line-height: 2em; text-align: center; background-color: #009966; padding: 10px; } --> </style> |
上一页 [1] [2] [3] [4] [5] [6] [7] [8] 下一页 |