css系列（6）css的运用（二）

本节继续介绍css在html页面重的应用实例。

(1)div的border-style属性:

none:   无样式
hidden: 除了同表格的边框发生冲突的时候,其它同none
dotted: 点划线
dashed: 虚线
solid:  实线
double: 双线,两条线加上中间的空白等于border-width的取值
groove: 槽状
ridge:  脊状,和groove相反
inset:  凹陷
outset: 凸出,和inset相反

<html>
<head>
  <title>示例6.1</title>
  <style>
  div{
    width: 200px;
    height: 200px;
    float:left
  }
  #div_01{
    border-style: outset; 
    border-bottom-color: red;
    border-width: 50px; 
  }
  #div_02{
    border-style: inset; 
    border-bottom-color: red;
    border-width: 50px; 
  }
  #div_03{
    border-style: dotted; 
    border-width: 5px; 
  }
  #div_04{
    border-style: solid; 
    border-color: red;
    border-width: 5px; 
  }
  </style>
</head>
<body style="margin:0px;">
    <div id="div_01"></div>
    <div id="div_02"></div>
    <div id="div_03"></div>
    <div id="div_04"></div>
</body>
</html>

(2)用ul和li制作的导航栏:

<!DOCTYPE html>
<html>
<head>
    <title>示例6.2</title>
    <!--type属性干嘛的-->
    <style type="text/css">
        * {
            margin:0px;
        }
        div {
            background-color:yellow;
            height:35px;
            width:800px;
            margin:0px auto;
        }
        ul li {
            float:left;
            list-style:none;
            width:150px;
            line-height:30px;
        }
        A:hover {
            font-size:x-large;
            background-color:pink;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <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>
        </ul>
    </div>
</body>
</html>

(3)列表与div的混合:

<!DOCTYPE html>
<html>
<head>
  <title>示例6.3</title>
  <style type="text/css">
  * {
    font-size:12px;
    margin:0px;
    }
  .divIndex {
    height:390px;
    width:300px;  
    margin:0px auto;
    padding:0px;
    }
  .div1 {
    height:35px;
    width:300px;
    background-color:#248AD4;
    color:white;
    text-indent:30px;
    line-height:35px;
    }
  .t1 {
    font-weight:bolder;
    text-indent:10px;
    line-height:25px;
    }
  .t2 {
    color:#236EB2;
    border-bottom:1px dashed #cccccc;
    line-height:25px;
    }
  .t3 {
    color:red;
    text-align:right;
    font-weight:bolder;
    border-bottom:1px dashed #cccccc;
    }
  .t4 {
    color:blue;
    font-weight:bolder;
    text-align:right;
    border-bottom:1px dashed #cccccc;
    }  
  </style>
</head>
<body>
    <div class="divIndex">
    <table id="td1" cellpadding="0px" cellspacing="0px">
      <tr>
        <td>
        <div class="div1">程序设计学习进程信息</div>
        </td>
      </tr>
      <tr>
        <td>
        <table cellpadding="0px"  cellspacing="0px" width="300px">
          <tr>
            <td class="t1">基础班</td>
            <td></td>
          </tr>
          <tr>
            <td class="t2">北京-2014年6月14号</td>
            <td class="t3">预约报名中</td>
          </tr>
           <tr>
            <td class="t2">北京-2014年5月5号</td>
            <td class="t4">爆满已开班</td>
          </tr>
           <tr>
            <td class="t2">广州-2014年6月21号</td>
            <td class="t3">预约报名中</td>
          </tr>
           <tr>
            <td class="t2">北京-2014年5月20号</td>
            <td class="t4">爆满已开班</td>
          </tr>
           <tr>
            <td class="t1">进阶班</td>
            <td></td>
          </tr>
           <tr>
            <td class="t2">北京-2014年6月4号</td>
            <td class="t3">预约报名中</td>
          </tr>
           <tr>
            <td class="t2">北京-2014年4月26号</td>
            <td class="t4">爆满已开班</td>
          </tr>
          <tr>
            <td class="t2">广州-2014年6月22号</td>
            <td class="t3">预约报名中</td>
          </tr>
          <tr>
            <td class="t2">广州-2014年5月13号</td>
            <td class="t4">爆满已开班</td>
          </tr>
          <tr>
            <td class="t1">高级班</td>
            <td></td>
          </tr>
          <tr>
            <td class="t2">北京-2014年6月14号</td>
            <td class="t3">远程班预约报名中</td>
          </tr>
           <tr>
            <td class="t2">北京-2014年6月4号</td>
            <td class="t3">远程班预约报名中</td>
          </tr>
        </table>
        </td>
      </tr>
    </table>
    </div>
</body>
</html>

(4)伪选择器:

a标签的四个属性:

1.a:link{text-decoration:none ; color:#c00 ;}
2.a:visited {text-decoration:none ; color:#c30 ;}
3.a:hover {text-decoration:underline ; color:#f60 ;}
4.a:active {text-decoration:none ; color:#F90 ;}

以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。写的时候尽量按照顺序。

<html>
<head>
    <title>伪选择器</title>
    <style type="text/css">
      p:hover {
        color: blue;
        cursor: pointer;
        font-size: 20px;
      }
      #p_firstline:first-line {
        font-size:25px;
      }

      #p_firstletter:first-letter {
        font-size:30px;
        color:red;
      }
      a:hover {
        text-decoration:none;
        color:red;
        font-size:25px;
      }
      a:active {
        color:purple;
        font-size:30px;
      }
    </style>
</head>
<body>
    <p id="p_firstline">
    通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。<br/>
    不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。但是在那个浏览器大战的血腥年代里，这种情况就未必会发生，那
时候对标准的支持并不是企业的优先选择。</p>
    <p id="p_firstletter">比方说，Netscape 4 就不支持继承，它不仅忽略继承，而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题，在表格内的字体样式会被忽略。我们又该如何是
好呢？
    </p>
    <a href="##">伪选择器</a><br />
    <a href="##">MenAngel</a><br />
    <a href="##">sunjimeng</a><br />
    <a href="##">孙继锰</a><br />
</body>
</html>

(5)设置背景图片:

<html>
<head>
<style type="text/css">
  div.div1 { 
    width:300px;
    height:200px;
    background-image: url(http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_background.gif);
    background-repeat: repeat-x;
  }
  div.div2{
    width:300px;
    height:200px;
    background-image: url(http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_background.gif);
    background-repeat: repeat-y;
  }
</style>
</head>
<body>
 <div class="div1"></div>
 <div class="div2"></div>
</body>
</html>