zoukankan      html  css  js  c++  java
  • 纯CSS选项卡

    html:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <link href="123.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div id="Container">
      <div id="Header">
        <div id="Logo">55555555555555555</div>
      </div>
      <div id="Content">
        <div id="LeftContent">
          <dl>
            <dt><a href="#xw">新闻</a><a href="#YL">娱乐</a><a href="#TY">体育</a></dt>
            <dd>
              <ul id="xw">
                <li>新闻1</li>
                <li>新闻2</li>
                <li>新闻3</li>
                <li>新闻4</li>
                <li>新闻5</li>
              </ul>
              <ul id="YL">
                <li>娱乐1</li>
                <li>娱乐2</li>
                <li>娱乐3</li>
                <li>娱乐4</li>
                <li>娱乐5</li>
                <li>娱乐6</li>
              </ul>
              <ul id="TY">
                <li>体育1</li>
                <li>体育2</li>
              </ul>
            </dd>
          </dl>
        </div>
        <div id="MainContent"> 主内容 </div>
      </div>
      <div class="clear"></div>
      <div id="Footer">页脚</div>
    </div>
    </body>
    </html>

    CSS:

    @charset "utf-8";
    /* CSS Document */
    
    #Container {
         1000px;
        margion: 0 auto;
        height: 1000px
    }
    #Header {
        height: 100Px;
        background: green;
    }
    #Logo {
        padding-left: 50px;
        padding-bottom: 20px;
        padding-top: 10px;
    }
    #Content {
        margin: 5, 5, 5, 5;
        height: 600px;
    }
    #LeftContent {
         300px;
        height: 800px;
        float: left;
        margion: 20px;
        background: red;
    }
    #MainContent {
         700px;
        height: 800px;
        float: left;
        margion: 20px;
        background: #0C78DD;
        
    }
    .clear {
        clear: both;
    }
    #Footer {
        height: 100px;
        background: #0AF333;
    }
    dl {
        position: absolute;/*绝对的*/
         200px;
        height: 200px;
        border: 10px solid #E9F5E9;
    }
    dd {
         200px;
        height: 200px;
        overflow: hidden;
    }
    dt {
        position: absolute;
        right: 1px;
    }
    ul {
        margion: 0;
        padding: 0;
         220px;
        height: 200px;
        list-style: none;
        border: 1px solid black
    }
    li {
         207px;
        height: 27px;
        overflow: hidden;
    }
    dt a {
        display:block;
        /*margin: 1px;*/
         30px;
        height: 56px;
        text-align: center;
        font: 700 12px/55px "宋体",sans-serif;
        color: #fff;
        text-decoration: none;
        background: #666;
        /*display:block;
    margin:1px;
    30px;
    height:56px;
    text-align:center;
    font:700 12px/55px "宋体",sans-serif;
    color:#fff;
    text-decoration:none;
    background:#666;*/
    }
    
    dt a:hover{
        background:green;}
  • 相关阅读:
    hdu 1042 N!
    hdu 1002 A + B Problem II
    c++大数模板
    hdu 1004 Let the Balloon Rise
    hdu 4027 Can you answer these queries?
    poj 2823 Sliding Window
    hdu 3074 Multiply game
    hdu 1394 Minimum Inversion Number
    hdu 5199 Gunner
    九度oj 1521 二叉树的镜像
  • 原文地址:https://www.cnblogs.com/tangchun/p/4505805.html
Copyright © 2011-2022 走看看