码迷,mamicode.com
首页 > Web开发 > 详细

1-2 网页换肤

时间:2017-07-29 10:08:48      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:charset   utf-8   size   简写   variant   red   注释   nav   element   

网页换肤,代码如下:

<!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; 也是允许的。未设置的属性会使用其默认值。

1-2 网页换肤

标签:charset   utf-8   size   简写   variant   red   注释   nav   element   

原文地址:http://www.cnblogs.com/Z-Imp/p/7231428.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!