1-2 网页换肤
网页换肤,代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html"> <title>网页换肤</title> <style> body, ul,li { margin: 0; padding: 0; } html, body { height: 100%; } body { font: 12px/1.5 Tahoma; } li { list-style-type: none; } a:link, a:visited { text-decoration: none; } a:hover { text-decoration: underline; } #outer { width: 500px; margin: 0 auto; overflow: hidden; zoom: 1; } #skin, #nav { overflow: hidden; zoom: 1; } #skin { margin: 10px 0; } #skin li { float: left; width: 6px; height: 6px; cursor: pointer; overflow: hidden; margin-right: 10px; text-indent: -9999px; border-width: 4px; border-style: solid; } #skin li.current { background: #fff!important; } #red { border-color: red; background: red; } #green { border-color: green; background: green; } #black { border-color: black; background: black; } #nav { border: 1px solid #fff; } #nav li { float: left; width: 82px; line-height: 25px; text-align: center; border-right: 1px solid #fff; } #nav li.last { width: 83px; border-right-width: 0; } #nav li a { color: #fff; } </style> <link href="green.css" rel="stylesheet" type="text/css"> <script> window.onload = function () { var oLink = document.getElementsByTagName("link")[0]; var oSkin = document.getElementById("skin").getElementsByTagName("li"); for(var i = 0; i< oSkin.length; i++) { oSkin[i].onclick = function () { for(var p in oSkin) oSkin[p].className = ""; this.className = "current"; oLink['href'] = this.id + ".css"; } } } </script> </head> <body> <div id="outer"> <ul id="skin"> <li id="red" title="红色">红</li> <li id="green" class="current" title="绿色">绿</li> <li id="black" title="黑色">黑</li> </ul> <ul id="nav"> <li><a href="#">新闻</a></li> <li><a href="#">娱乐</a></li> <li><a href="#">体育</a></li> <li><a href="#">电影</a></li> <li><a href="#">音乐</a></li> <li class="last"><a href="#">旅游</a></li> </ul> </div> </body> </html>
margin: 0 auto; 可以使布局左右居中。
块级元素一般不要设置高度,靠里面的内容来撑开。
CSS font属性
font 简写属性在一个声明中设置所有字体属性。
注释:此属性也有第六个值:"line-height",可设置行间距。
这个简写属性用于一次设置元素字体的两个或更多方面。使用 icon 等关键字可以适当地设置元素的字体,使之与用户计算机环境中的某个方面一致。注意,如果没有使用这些关键词,至少要指定字体大小和字体系列。
可以按顺序设置如下属性:
- font-style
- font-variant
- font-weight
- font-size/line-height
- font-family
可以不设置其中的某个值,比如 font:100% verdana; 也是允许的。未设置的属性会使用其默认值。
for(var p in oSkin) oSkin[p].className = ""; //如果oKin为array,则p为下标;如果oKin为object,则p为属性名