• css+div学习


    1. first:
      1 <!DOCTYPE html>
      2 <html>
      3 <head lang="en">
      4     <meta charset="UTF-8">
      5     <title></title>
      6     <style>
      7         body {
      8             margin: 0; /*设置外边距为0*/
      9             text-align: center;
     10             background-color: #ffffcc;
     11         }
     12 
     13         #container {
     14             margin: 0 auto; /*居中显示,块自适应宽*/
     15             width: 800px;
     16             height: 1000px;
     17         }
     18 
     19         #header {
     20             float: left; /*元素向左浮动*/
     21             width: 800px;
     22             height: 100px;
     23             margin: 0 auto;
     24             clear: both; /*拒绝下方的元素飘上来,例如menu*/
     25             background-color: #ff0000;
     26         }
     27 
     28         #logo {
     29             float: left;
     30             width: 250px;
     31             height: 90px;
     32             background-color: green;
     33             clear: right;
     34             margin: 0;
     35         }
     36 
     37         #banner {
     38             float: right;
     39             width: 540px;
     40             height: 90px;
     41             margin: 0;
     42             background-color: #67ff0c;
     43         }
     44 
     45         #menu {
     46             width: 800px;
     47             height: 35px;
     48             margin: 0 auto;
     49             clear: both;
     50         }
     51 
     52         #menu ul{
     53             float:left;
     54             list-style: none;
     55             margin: 0 auto;
     56         }
     57         #menu ul li{
     58             float:left;
     59             display: block;
     60             line-height: 35px;
     61             margin: 0 10px;
     62         }
     63         .menuDiv{
     64             width: 1px;
     65             height: 35px;
     66             background-color: green;
     67         }
     68         #menu ul li a:link,#menu ul li a:visited{
     69             font-weight: bold;
     70             color: #0000ff;
     71 
     72         }
     73         #menu ul li a:hover{
     74             font-weight: 800;
     75             color: red;
     76         }
     77 
     78         .nav {
     79             margin: 0 auto;
     80             width: 800px;
     81             height: 10px;
     82             clear: both;
     83             background-color: #ffffff;
     84             line-height: 10px; /*设置行高,免得字体超出*/
     85         }
     86 
     87         .nav_a {
     88             float: left;
     89             /*margin: 0 auto;因为不占整屏的宽度所以就不设置了*/
     90             width: 610px;
     91             height: 10px;
     92             clear: both;
     93             background-color: #ffffff;
     94             line-height: 10px;
     95         }
     96 
     97         .left_main {
     98             margin: 0;
     99             float: left;
    100             width: 610px;
    101             height: 420px;
    102             clear: right;
    103             background-color: #ff0000;
    104         }
    105 
    106         .right_main {
    107             margin: 0;
    108             float: right;
    109             width: 180px;
    110             height: 420px;
    111             background-color: rgba(91, 69, 180, 0.89);
    112         }
    113 
    114         .left_a {
    115             margin: 0;
    116             float: left;
    117             width: 300px;
    118             height: 205px;
    119             background-color: #0000ff;
    120         }
    121 
    122         .left_b {
    123             margin: 0;
    124             float: right;
    125             width: 300px;
    126             height: 205px;
    127             clear: right; /*可有可无*/
    128             background-color: #0000ff;
    129         }
    130 
    131         .con {
    132             margin: 0px;
    133             width: 800px;
    134             height: 200px;
    135             clear: both;
    136             border-bottom-style: solid;
    137             background-color: #691a36;
    138         }
    139 
    140         .one {
    141             margin-left: 5px;
    142             float: left;
    143             width: 150px;
    144             height: 200px;
    145             clear: left;
    146             background-color: #ff99f0;
    147         }
    148 
    149         .two {
    150             float: left;
    151             margin-left: 10px;
    152             width: 150px;
    153             height: 200px;
    154             background-color: #ffccf0;
    155         }
    156 
    157         .three {
    158             float: left;
    159             margin-left: 10px;
    160             width: 150px;
    161             height: 200px;
    162             background-color: #0ffff0;
    163         }
    164 
    165         .four {
    166             float: left;
    167             margin-left: 10px;
    168             width: 150px;
    169             height: 200px;
    170             background-color: #f0fff0;
    171         }
    172 
    173         .five {
    174             float: left;
    175             margin-left: 10px;
    176             width: 150px;
    177             height: 200px;
    178             background-color: rgba(35, 255, 202, 0.45);
    179         }
    180 
    181         #footer {
    182             margin: 0 auto;
    183             width: 800px;
    184             height: 25px;
    185             background-color: red;
    186         }
    187 
    188         .tab1 h3{
    189             margin: 0px;
    190             width: 290px;
    191             height: 20px;
    192             float: left;
    193             font-size: 13px;
    194             text-align: left;
    195             color: red;
    196             line-height: 20px;
    197             /*background: url(1.jpg);*/
    198             background: #adff2f;
    199             padding-left: 10px;
    200 
    201         }
    202 
    203         .tab2{
    204             margin: 0px;
    205             width: 300px;
    206             height: 185px;
    207             background: yellow;
    208         }
    209         .tab2 ul{
    210             margin: 4px 0 0;
    211             list-style: none;
    212             padding: 0;
    213             background: gray;
    214         }
    215         .tab2 ul li{
    216             float: left;
    217             width: 50%;
    218             /*background: gold;*/
    219 
    220         }
    221         .tab2 ul li a{
    222             display: block;
    223             width: 84%;
    224             height: 25px;
    225             line-height: 25px;
    226             margin-left: 8px;
    227             font-size: 12px;
    228             text-decoration: none;
    229             color:  #333;
    230         }
    231 
    232     </style>
    233 </head>
    234 <body>
    235 
    236 
    237 <div id="container">
    238     <div id="header">
    239         <div id="logo">logo</div>
    240         <div id="banner">banner</div>
    241     </div>
    242     <div id="menu">
    243         <ul>
    244             <li><a href="1.html">网站首页</a></li>
    245             <li class="menuDiv"></li>
    246             <li><a href="#">关于瓦猫</a></li>
    247             <li class="menuDiv"></li>
    248             <li><a href="#">网站首页</a></li>
    249             <li class="menuDiv"></li>
    250             <li><a href="#">关于瓦猫</a></li>
    251             <li class="menuDiv"></li>
    252             <li><a href="#">网站首页</a></li>
    253             <li class="menuDiv"></li>
    254             <li><a href="#">关于瓦猫</a></li>
    255             <li class="menuDiv"></li>
    256             <li><a href="#">关于瓦猫</a></li>
    257             <li class="menuDiv"></li>
    258 
    259 
    260         </ul>
    261     </div>
    262     <div class="nav">nav</div>
    263     <div class="left_main">
    264         <div class="left_a">
    265             <div class="tab1">
    266                 <h3>第一栏目</h3>
    267             </div>
    268             <div class="tab2">
    269                 <ul>
    270                     <li><a href="#">111111111</a></li>
    271                     <li><a href="#">111111111</a></li>
    272                     <li><a href="#">111111111</a></li>
    273                     <li><a href="#">111111111</a></li>
    274                     <li><a href="#">111111111</a></li>
    275                     <li><a href="#">111111111</a></li>
    276                     <li><a href="#">111111111</a></li>
    277                     <li><a href="#">111111111</a></li>
    278                     <li><a href="#">111111111</a></li>
    279                     <li><a href="#">111111111</a></li>
    280                     <li><a href="#">111111111</a></li>
    281                     <li><a href="#">111111111</a></li>
    282                 </ul>
    283             </div>
    284         </div>
    285         <div class="left_b">
    286             <div class="tab1">
    287                 <h3>第一栏目</h3>
    288             </div>
    289             <div class="tab2">
    290                 <ul>
    291                     <li><a href="#">111111111</a></li>
    292                     <li><a href="#">111111111</a></li>
    293                     <li><a href="#">111111111</a></li>
    294                     <li><a href="#">111111111</a></li>
    295                     <li><a href="#">111111111</a></li>
    296                     <li><a href="#">111111111</a></li>
    297                     <li><a href="#">111111111</a></li>
    298                     <li><a href="#">111111111</a></li>
    299                     <li><a href="#">111111111</a></li>
    300                     <li><a href="#">111111111</a></li>
    301                     <li><a href="#">111111111</a></li>
    302                     <li><a href="#">111111111</a></li>
    303                 </ul>
    304             </div>
    305         </div>
    306         <div class="nav_a">nav</div>
    307         <div class="left_a">
    308             <div class="tab1">
    309                 <h3>第一栏目</h3>
    310             </div>
    311             <div class="tab2">
    312                 <ul>
    313                     <li><a href="#">111111111</a></li>
    314                     <li><a href="#">111111111</a></li>
    315                     <li><a href="#">111111111</a></li>
    316                     <li><a href="#">111111111</a></li>
    317                     <li><a href="#">111111111</a></li>
    318                     <li><a href="#">111111111</a></li>
    319                     <li><a href="#">111111111</a></li>
    320                     <li><a href="#">111111111</a></li>
    321                     <li><a href="#">111111111</a></li>
    322                     <li><a href="#">111111111</a></li>
    323                     <li><a href="#">111111111</a></li>
    324                     <li><a href="#">111111111</a></li>
    325                 </ul>
    326             </div>
    327         </div>
    328         <div class="left_b">
    329             <div class="tab1">
    330                 <h3>第一栏目</h3>
    331             </div>
    332             <div class="tab2">
    333                 <ul>
    334                     <li><a href="#">111111111</a></li>
    335                     <li><a href="#">111111111</a></li>
    336                     <li><a href="#">111111111</a></li>
    337                     <li><a href="#">111111111</a></li>
    338                     <li><a href="#">111111111</a></li>
    339                     <li><a href="#">111111111</a></li>
    340                     <li><a href="#">111111111</a></li>
    341                     <li><a href="#">111111111</a></li>
    342                     <li><a href="#">111111111</a></li>
    343                     <li><a href="#">111111111</a></li>
    344                     <li><a href="#">111111111</a></li>
    345                     <li><a href="#">111111111</a></li>
    346                 </ul>
    347             </div>
    348         </div>
    349     </div>
    350     <div class="right_main">right_main</div>
    351     <div class="nav">nav</div>
    352     <div class="con">
    353         <div class="one">one</div>
    354         <div class="two">two</div>
    355         <div class="three">three</div>
    356         <div class="four">four</div>
    357         <div class="five">five</div>
    358     </div>
    359     <div class="con">
    360         <div class="one">one</div>
    361         <div class="two">two</div>
    362         <div class="three">three</div>
    363         <div class="four">four</div>
    364         <div class="five">five</div>
    365     </div>
    366     <div id="footer">footer</div>
    367 
    368 </div>
    369 </body>
    370 </html>
    View Code

      2.second:

      1 <!DOCTYPE html>
      2 <html>
      3 <head lang="en">
      4 <meta charset="UTF-8">
      5 <title></title>
      6 <style>
      7 body {
      8     margin: 0; /*设置外边距为0*/
      9     text-align: center;
     10     background-color: #ffffcc;
     11 }
     12 
     13 #container {
     14     margin: 0 auto; /*居中显示,块自适应宽*/
     15     width: 800px;
     16     height: 1230px;
     17     background-color: springgreen;
     18 }
     19 
     20 #header {
     21     float: left; /*元素向左浮动*/
     22     width: 800px;
     23     height: 100px;
     24     margin: 0 auto;
     25     clear: both; /*拒绝下方的元素飘上来,例如menu*/
     26     background-color: #ff0000;
     27 }
     28 
     29 #logo {
     30     float: left;
     31     width: 250px;
     32     height: 90px;
     33     background-color: green;
     34     clear: right;
     35     margin: 0;
     36 }
     37 
     38 #banner {
     39     float: right;
     40     width: 540px;
     41     height: 90px;
     42     margin: 0;
     43     background-color: #67ff0c;
     44 }
     45 
     46 #menu {
     47     width: 800px;
     48     height: 35px;
     49     margin: 0 auto;
     50     clear: both;
     51 }
     52 
     53 #menu ul {
     54     float: left;
     55     list-style: none;
     56     margin: 0 auto;
     57 }
     58 
     59 #menu ul li {
     60     float: left;
     61     display: block;
     62     line-height: 35px;
     63     margin: 0 10px;
     64 }
     65 
     66 .menuDiv {
     67     width: 1px;
     68     height: 35px;
     69     background-color: green;
     70 }
     71 
     72 #menu ul li a:link, #menu ul li a:visited {
     73     font-weight: bold;
     74     color: #0000ff;
     75 
     76 }
     77 
     78 #menu ul li a:hover {
     79     font-weight: 800;
     80     color: red;
     81 }
     82 
     83 .nav {
     84     margin: 0 auto;
     85     width: 800px;
     86     height: 10px;
     87     clear: both;
     88     background-color: #ffffff;
     89     line-height: 10px; /*设置行高,免得字体超出*/
     90 }
     91 
     92 .nav_a {
     93     float: left;
     94     /*margin: 0 auto;因为不占整屏的宽度所以就不设置了*/
     95     width: 610px;
     96     height: 10px;
     97     clear: both;
     98     background-color: #ffffff;
     99     line-height: 10px;
    100 }
    101 
    102 .left_main {
    103     margin: 0;
    104     float: left;
    105     width: 610px;
    106     height: 420px;
    107     clear: right;
    108     background-color: #ff0000;
    109 }
    110 
    111 .right_main {
    112     margin: 0;
    113     float: right;
    114     width: 180px;
    115     height: 420px;
    116     background-color: rgba(91, 69, 180, 0.89);
    117 }
    118 
    119 .left_a {
    120     margin: 0;
    121     float: left;
    122     width: 300px;
    123     height: 205px;
    124     background-color: #0000ff;
    125 }
    126 
    127 .left_b {
    128     margin: 0;
    129     float: right;
    130     width: 300px;
    131     height: 205px;
    132     clear: right; /*可有可无*/
    133     background-color: #0000ff;
    134 }
    135 
    136 .con {
    137     margin: 0px;
    138     width: 800px;
    139     height: 200px;
    140     clear: both;
    141     border-bottom-style: solid;
    142     background-color: #691a36;
    143 }
    144 
    145 .one {
    146     margin-left: 5px;
    147     float: left;
    148     width: 150px;
    149     height: 200px;
    150     clear: left;
    151     background-color: #ff99f0;
    152 }
    153 
    154 .two {
    155     float: left;
    156     margin-left: 10px;
    157     width: 150px;
    158     height: 200px;
    159     background-color: #ffccf0;
    160 }
    161 
    162 .three {
    163     float: left;
    164     margin-left: 10px;
    165     width: 150px;
    166     height: 200px;
    167     background-color: #0ffff0;
    168 }
    169 
    170 .four {
    171     float: left;
    172     margin-left: 10px;
    173     width: 150px;
    174     height: 200px;
    175     background-color: #f0fff0;
    176 }
    177 
    178 .five {
    179     float: left;
    180     margin-left: 10px;
    181     width: 150px;
    182     height: 200px;
    183     background-color: rgba(35, 255, 202, 0.45);
    184 }
    185 
    186 #footer {
    187     margin: 0 auto;
    188     width: 800px;
    189     height: 25px;
    190     background-color: red;
    191 }
    192 
    193 .tab1 h3 {
    194     margin: 0px;
    195     width: 290px;
    196     height: 20px;
    197     float: left;
    198     font-size: 13px;
    199     text-align: left;
    200     color: red;
    201     line-height: 20px;
    202     /*background: url(1.jpg);*/
    203     background: #adff2f;
    204     padding-left: 10px;
    205 
    206 }
    207 
    208 .tab2 {
    209     margin: 0px;
    210     width: 300px;
    211     height: 185px;
    212     background: yellow;
    213 }
    214 
    215 .tab2 ul {
    216     margin: 4px 0 0;
    217     list-style: none;
    218     padding: 0;
    219     background: gray;
    220 }
    221 
    222 .tab2 ul li {
    223     float: left;
    224     width: 50%;
    225     /*background: gold;*/
    226 
    227 }
    228 
    229 .tab2 ul li a {
    230     display: block;
    231     width: 84%;
    232     height: 25px;
    233     line-height: 25px;
    234     margin-left: 8px;
    235     font-size: 12px;
    236     text-decoration: none;
    237     color: #333;
    238 }
    239 
    240 </style>
    241 </head>
    242 <body>
    243 <div id="container">
    244     <div id="header">
    245         <div id="logo">logo</div>
    246         <div id="banner">banner</div>
    247     </div>
    248     <div id="menu">
    249         <ul>
    250             <li><a href="1.html">网站首页</a></li>
    251             <li class="menuDiv"></li>
    252             <li><a href="#">关于瓦猫</a></li>
    253             <li class="menuDiv"></li>
    254             <li><a href="#">网站首页</a></li>
    255             <li class="menuDiv"></li>
    256             <li><a href="#">关于瓦猫</a></li>
    257             <li class="menuDiv"></li>
    258             <li><a href="#">网站首页</a></li>
    259             <li class="menuDiv"></li>
    260             <li><a href="#">关于瓦猫</a></li>
    261             <li class="menuDiv"></li>
    262             <li><a href="#">关于瓦猫</a></li>
    263             <li class="menuDiv"></li>
    264 
    265 
    266         </ul>
    267     </div>
    268     <div class="nav">nav</div>
    269     <div class="left_main">
    270         <div class="left_a">
    271             <div class="tab1">
    272                 <h3>第一栏目</h3>
    273             </div>
    274             <div class="tab2">
    275                 <ul>
    276                     <li><a href="#">111111111</a></li>
    277                     <li><a href="#">111111111</a></li>
    278                     <li><a href="#">111111111</a></li>
    279                     <li><a href="#">111111111</a></li>
    280                     <li><a href="#">111111111</a></li>
    281                     <li><a href="#">111111111</a></li>
    282                     <li><a href="#">111111111</a></li>
    283                     <li><a href="#">111111111</a></li>
    284                     <li><a href="#">111111111</a></li>
    285                     <li><a href="#">111111111</a></li>
    286                     <li><a href="#">111111111</a></li>
    287                     <li><a href="#">111111111</a></li>
    288                 </ul>
    289             </div>
    290         </div>
    291         <div class="left_b">
    292             <div class="tab1">
    293                 <h3>第一栏目</h3>
    294             </div>
    295             <div class="tab2">
    296                 <ul>
    297                     <li><a href="#">111111111</a></li>
    298                     <li><a href="#">111111111</a></li>
    299                     <li><a href="#">111111111</a></li>
    300                     <li><a href="#">111111111</a></li>
    301                     <li><a href="#">111111111</a></li>
    302                     <li><a href="#">111111111</a></li>
    303                     <li><a href="#">111111111</a></li>
    304                     <li><a href="#">111111111</a></li>
    305                     <li><a href="#">111111111</a></li>
    306                     <li><a href="#">111111111</a></li>
    307                     <li><a href="#">111111111</a></li>
    308                     <li><a href="#">111111111</a></li>
    309                 </ul>
    310             </div>
    311         </div>
    312         <div class="nav_a">nav</div>
    313         <div class="left_a">
    314             <div class="tab1">
    315                 <h3>第一栏目</h3>
    316             </div>
    317             <div class="tab2">
    318                 <ul>
    319                     <li><a href="#">111111111</a></li>
    320                     <li><a href="#">111111111</a></li>
    321                     <li><a href="#">111111111</a></li>
    322                     <li><a href="#">111111111</a></li>
    323                     <li><a href="#">111111111</a></li>
    324                     <li><a href="#">111111111</a></li>
    325                     <li><a href="#">111111111</a></li>
    326                     <li><a href="#">111111111</a></li>
    327                     <li><a href="#">111111111</a></li>
    328                     <li><a href="#">111111111</a></li>
    329                     <li><a href="#">111111111</a></li>
    330                     <li><a href="#">111111111</a></li>
    331                 </ul>
    332             </div>
    333         </div>
    334         <div class="left_b">
    335             <div class="tab1">
    336                 <h3>第一栏目</h3>
    337             </div>
    338             <div class="tab2">
    339                 <ul>
    340                     <li><a href="#">111111111</a></li>
    341                     <li><a href="#">111111111</a></li>
    342                     <li><a href="#">111111111</a></li>
    343                     <li><a href="#">111111111</a></li>
    344                     <li><a href="#">111111111</a></li>
    345                     <li><a href="#">111111111</a></li>
    346                     <li><a href="#">111111111</a></li>
    347                     <li><a href="#">111111111</a></li>
    348                     <li><a href="#">111111111</a></li>
    349                     <li><a href="#">111111111</a></li>
    350                     <li><a href="#">111111111</a></li>
    351                     <li><a href="#">111111111</a></li>
    352                 </ul>
    353             </div>
    354         </div>
    355     </div>
    356     <div class="right_main">right_main</div>
    357     <div class="nav">nav</div>
    358     <div class="con">
    359         <div class="one">one</div>
    360         <div class="two">two</div>
    361         <div class="three">three</div>
    362         <div class="four">four</div>
    363         <div class="five">five</div>
    364     </div>
    365     <div class="left_main">
    366         <div class="left_a">left_a</div>
    367         <div class="left_b">left_b</div>
    368         <div class="nav_a">nav</div>
    369         <div class="left_a">left_a</div>
    370         <div class="left_b">left_b</div>
    371     </div>
    372     <div class="right_main">right_main</div>
    373     <div class="nav">nav</div>
    374     <div id="footer">footer</div>
    375 </div>
    376 </body>
    377 </html>
    View Code

       3.以上为备份,以下是问题【暂未解决】

    不知道,是哪里出错,导致选项卡不能正常切换【选项卡点哪个选项显示哪个,其余则隐藏】

    但是双击此选项卡会隐藏。。。但次数多了就失效了,点击单个会逐个往下堆积,按顺序堆积

    源代码:

      1 <!DOCTYPE html>
      2 <html>
      3 <head lang="en">
      4 <meta charset="UTF-8">
      5 <title>div+css实现网页布局</title>
      6 <style>
      7 body {
      8     margin: 0;
      9     text-align: center;
     10     background-color: #ffffcc;
     11 }
     12 
     13 #container {
     14     margin: 0 auto;
     15     width: 800px;
     16     height: 2000px;
     17     background-color: springgreen;
     18 }
     19 
     20 #header {
     21     float: left;
     22     width: 800px;
     23     height: 100px;
     24     margin: 0 auto;
     25     clear: both;
     26     background-color: red;
     27 }
     28 
     29 #logo {
     30     float: left;
     31     width: 250px;
     32     height: 90px;
     33     background-color: green;
     34     margin: 0;
     35 }
     36 
     37 #banner {
     38     float: right;
     39     width: 540px;
     40     height: 90px;
     41     margin: 0;
     42     background-color: blue;
     43 }
     44 
     45 #menu {
     46     width: 800px;
     47     height: 35px;
     48     margin: 0 auto;
     49     clear: both;
     50 }
     51 
     52 #menu ul {
     53     float: left;
     54     list-style: none;
     55     margin: 0;
     56 }
     57 
     58 #menu ul li {
     59     float: left;
     60     display: block;
     61     line-height: 35px;
     62     margin: 0 10px;
     63 }
     64 
     65 .menuDiv {
     66     width: 1px;
     67     height: 35px;
     68     background-color: green;
     69 }
     70 
     71 #menu ul li a:link, #menu ul li a:visited {
     72     font-weight: bold;
     73     color: #0000ff;
     74 }
     75 
     76 #menu ul li a:hover {
     77     font-weight: 800;
     78     color: red;
     79 }
     80 
     81 .nav {
     82     margin:0 auto;
     83     width: 800px;
     84     height: 10px;
     85     clear: both;
     86     background-color: #ffffff;
     87     line-height: 10px;
     88 }
     89 
     90 .nav_a {
     91     float:left;
     92     margin:0;
     93     width: 610px;
     94     height: 10px;
     95     clear: both;
     96     background-color: #ffffff;
     97     line-height: 10px;
     98 }
     99 
    100 .left_main {
    101     margin: 0;
    102     float: left;
    103     width: 610px;
    104     height: 420px;
    105     background-color: red;
    106 }
    107 
    108 .right_main {
    109     margin: 0;
    110     float: right;
    111     width: 180px;
    112     height: 420px;
    113     /*clear: left;*/
    114     background-color: green;
    115 }
    116 
    117 .left_a {
    118     margin: 0;
    119     float: left;
    120     width: 300px;
    121     height: 205px;
    122     background-color: blue;
    123 }
    124 
    125 .left_b {
    126     margin: 0;
    127     float: right;
    128     width: 300px;
    129     height: 205px;
    130     /*clear:left;*/
    131     background-color: #0000ff;
    132 }
    133 
    134 .con {
    135     margin: 0;
    136     width: 800px;
    137     height: 200px;
    138     clear: both;
    139     border-bottom-style: solid;
    140     background-color: green;
    141 }
    142 
    143 .one {
    144     float: left;
    145     width: 200px;
    146     height: 200px;
    147     clear: right;
    148     background-color: #ff99f0;
    149 }
    150 
    151 .two {
    152     float: left;
    153     width: 200px;
    154     height: 200px;
    155     background-color: #ffcc00;
    156 }
    157 
    158 .three {
    159     float: left;
    160     width: 200px;
    161     height: 200px;
    162     background-color: #0ffff0;
    163 }
    164 
    165 .four {
    166     float: right;
    167     width: 190px;
    168     height: 200px;
    169     background-color: #f0fff0;
    170 }
    171 
    172 #footer {
    173     margin: 0 auto;
    174     width: 800px;
    175     height: 25px;
    176     clear:both;
    177     background-color: #691a36;
    178 }
    179 
    180 .tab1 h3 {
    181     margin: 0;
    182     width: 290px;
    183     height: 20px;
    184     float: left;
    185     font-size: 13px;
    186     text-align: left;
    187     color: red;
    188     line-height: 20px;
    189     background: green;
    190     padding-left: 10px;
    191 }
    192 
    193 .tab2 {
    194     width: 300px;
    195     height: 180px;
    196     background: yellow;
    197 }
    198 
    199 .tab2 ul {
    200     margin: 4px 0 0;
    201     list-style: none;
    202     padding: 0;
    203 }
    204 
    205 .tab2 li {
    206     float: left;
    207     width: 50%;
    208 }
    209 
    210 .tab2 li a {
    211     display: block;
    212     width: 84%;
    213     height: 25px;
    214     line-height: 25px;
    215     margin-left: 8%;
    216     font-size: 12px;
    217     text-decoration: none;
    218     color: #333;
    219 }
    220 /*选项卡点哪个选项显示哪个,其余则隐藏*/
    221 #tab {
    222     margin: 0;
    223     width: 610px;
    224     height: 205px;
    225     position: relative;
    226     float: left;
    227     background: green;
    228 }
    229 
    230 #tab h3 {
    231     float: left;
    232     width: 122px;
    233     height: 26px;
    234     line-height: 26px;
    235     margin: 0;
    236     font-size: 12px;
    237     cursor: pointer;
    238     text-align: center;
    239     color: #ff00ff;
    240     background: #aacc33;
    241 }
    242 
    243 #tab .block {
    244     display: block;/*显示*/
    245 }
    246 
    247 #tab .up {
    248     background:blue;
    249 }
    250 
    251 #tab div {
    252     display:none;/*不显示*/
    253     float: left;
    254     top: 26px;
    255     left: 0;
    256     width: 610px;
    257     height: 179px;
    258     border: solid #eee;
    259     border-width: 0 1px 1px;
    260     background: #0f0f0f;
    261 }
    262 
    263 #tab ul {
    264     margin: 15px 0 0;
    265     list-style-type: none;
    266     padding: 0;
    267 
    268 }
    269 
    270 #tab ul li {
    271     width: 50%;
    272     float: left;
    273     background: #123456;
    274 }
    275 
    276 #tab li a {
    277     display: block;
    278     width: 90%;
    279     height: 25px;
    280     line-height: 25px;
    281     margin-left: 8%;
    282     font-size: 12px;
    283     text-decoration: none;
    284     color: #ffffff;
    285 }
    286 
    287 #tab li a:hover {
    288     font-size:24px;
    289     text-decoration: underline;
    290     color: red;
    291 }
    292 </style>
    293 </head>
    294 <body>
    295 <div id="container">
    296 <div id="header">
    297     <div id="logo">logo</div>
    298     <div id="banner">banner</div>
    299 </div>
    300 <div id="menu">
    301     <ul>
    302         <li><a href="1.html">网站首页</a></li>
    303         <li class="menuDiv"></li>
    304         <li><a href="#">关于瓦猫</a></li>
    305         <li class="menuDiv"></li>
    306         <li><a href="#">网站首页</a></li>
    307         <li class="menuDiv"></li>
    308         <li><a href="#">关于瓦猫</a></li>
    309         <li class="menuDiv"></li>
    310         <li><a href="#">网站首页</a></li>
    311         <li class="menuDiv"></li>
    312         <li><a href="#">关于瓦猫</a></li>
    313         <li class="menuDiv"></li>
    314         <li><a href="#">关于瓦猫</a></li>
    315         <li class="menuDiv"></li>
    316     </ul>
    317 </div>
    318 <div class="nav">nav</div>
    319 <div class="left_main">
    320     <div class="left_a">
    321         <div class="tab1">
    322             <h3>第一栏目</h3>
    323         </div>
    324         <div class="tab2">
    325             <ul>
    326                 <li><a href="#">111111111</a></li>
    327                 <li><a href="#">111111111</a></li>
    328                 <li><a href="#">111111111</a></li>
    329                 <li><a href="#">111111111</a></li>
    330                 <li><a href="#">111111111</a></li>
    331                 <li><a href="#">111111111</a></li>
    332                 <li><a href="#">111111111</a></li>
    333                 <li><a href="#">111111111</a></li>
    334                 <li><a href="#">111111111</a></li>
    335                 <li><a href="#">111111111</a></li>
    336                 <li><a href="#">111111111</a></li>
    337                 <li><a href="#">111111111</a></li>
    338             </ul>
    339         </div>
    340     </div>
    341     <div class="left_b">
    342         <div class="tab1">
    343             <h3>第一栏目</h3>
    344         </div>
    345         <div class="tab2">
    346             <ul>
    347                 <li><a href="#">111111111</a></li>
    348                 <li><a href="#">111111111</a></li>
    349                 <li><a href="#">111111111</a></li>
    350                 <li><a href="#">111111111</a></li>
    351                 <li><a href="#">111111111</a></li>
    352                 <li><a href="#">111111111</a></li>
    353                 <li><a href="#">111111111</a></li>
    354                 <li><a href="#">111111111</a></li>
    355                 <li><a href="#">111111111</a></li>
    356                 <li><a href="#">111111111</a></li>
    357                 <li><a href="#">111111111</a></li>
    358                 <li><a href="#">111111111</a></li>
    359             </ul>
    360         </div>
    361     </div>
    362     <div class="nav_a">nav_a</div>
    363     <div class="left_a">
    364         <div class="tab1">
    365             <h3>第一栏目</h3>
    366         </div>
    367         <div class="tab2">
    368             <ul>
    369                 <li><a href="#">111111111</a></li>
    370                 <li><a href="#">111111111</a></li>
    371                 <li><a href="#">111111111</a></li>
    372                 <li><a href="#">111111111</a></li>
    373                 <li><a href="#">111111111</a></li>
    374                 <li><a href="#">111111111</a></li>
    375                 <li><a href="#">111111111</a></li>
    376                 <li><a href="#">111111111</a></li>
    377                 <li><a href="#">111111111</a></li>
    378                 <li><a href="#">111111111</a></li>
    379                 <li><a href="#">111111111</a></li>
    380                 <li><a href="#">111111111</a></li>
    381             </ul>
    382         </div>
    383     </div>
    384     <div class="left_b">
    385         <div class="tab1">
    386             <h3>第一栏目</h3>
    387         </div>
    388         <div class="tab2">
    389             <ul>
    390                 <li><a href="#">111111111</a></li>
    391                 <li><a href="#">111111111</a></li>
    392                 <li><a href="#">111111111</a></li>
    393                 <li><a href="#">111111111</a></li>
    394                 <li><a href="#">111111111</a></li>
    395                 <li><a href="#">111111111</a></li>
    396                 <li><a href="#">111111111</a></li>
    397                 <li><a href="#">111111111</a></li>
    398                 <li><a href="#">111111111</a></li>
    399                 <li><a href="#">111111111</a></li>
    400                 <li><a href="#">111111111</a></li>
    401                 <li><a href="#">111111111</a></li>
    402             </ul>
    403         </div>
    404     </div>
    405 </div>
    406 <div class="right_main">right_main</div>
    407 <div class="nav">nav</div>
    408 <div class="con">
    409     <div class="one">one</div>
    410     <div class="two">two</div>
    411     <div class="three">three</div>
    412     <div class="four">four</div>
    413 </div>
    414 <div class="left_main">
    415     <div class="left_a"></div>
    416     <div class="left_b"></div>
    417     <div class="nav_a">nav_a</div>
    418     <div id="tab">
    419         <h3 onclick="go_to(1)">选择一</h3>
    420         <h3 onclick="go_to(2)">选择二</h3>
    421         <h3 onclick="go_to(3)">选择三</h3>
    422         <h3 onclick="go_to(4)">选择四</h3>
    423         <h3 onclick="go_to(5)">选择五</h3>
    424         <div>
    425             <ul>
    426                 <li><a href="#">111111</a></li>
    427                 <li><a href="#">111111</a></li>
    428                 <li><a href="#">111111</a></li>
    429                 <li><a href="#">111111</a></li>
    430                 <li><a href="#">111111</a></li>
    431                 <li><a href="#">111111</a></li>
    432                 <li><a href="#">111111</a></li>
    433                 <li><a href="#">111111</a></li>
    434             </ul>
    435         </div>
    436 
    437         <div>
    438             <ul>
    439                 <li><a href="#">222222</a></li>
    440                 <li><a href="#">222222</a></li>
    441                 <li><a href="#">222222</a></li>
    442                 <li><a href="#">222222</a></li>
    443                 <li><a href="#">222222</a></li>
    444                 <li><a href="#">222222</a></li>
    445             </ul>
    446         </div>
    447 
    448         <div>
    449             <ul>
    450                 <li><a href="#">333333</a></li>
    451                 <li><a href="#">333333</a></li>
    452                 <li><a href="#">333333</a></li>
    453                 <li><a href="#">333333</a></li>
    454                 <li><a href="#">333333</a></li>
    455                 <li><a href="#">333333</a></li>
    456                 <li><a href="#">333333</a></li>
    457             </ul>
    458         </div>
    459 
    460         <div>
    461             <ul>
    462                 <li><a href="#">444444</a></li>
    463                 <li><a href="#">444444</a></li>
    464                 <li><a href="#">444444</a></li>
    465                 <li><a href="#">444444</a></li>
    466                 <li><a href="#">444444</a></li>
    467                 <li><a href="#">444444</a></li>
    468                 <li><a href="#">444444</a></li>
    469                 <li><a href="#">444444</a></li>
    470             </ul>
    471         </div>
    472 
    473         <div>
    474             <ul>
    475                 <li><a href="#">555555</a></li>
    476                 <li><a href="#">555555</a></li>
    477                 <li><a href="#">555555</a></li>
    478                 <li><a href="#">555555</a></li>
    479                 <li><a href="#">555555</a></li>
    480                 <li><a href="#">555555</a></li>
    481                 <li><a href="#">555555</a></li>
    482                 <li><a href="#">555555</a></li>
    483             </ul>
    484         </div>
    485 
    486 
    487     </div>
    488 
    489 
    490 </div>
    491     <div class="right_main">right_main</div>
    492     <div class="nav">nav</div>
    493     <div id="footer">footer</div>
    494 </div>
    495 <script>
    496     var h = document.getElementById("tab").getElementsByTagName("h3");/*多个h3组成数组*/
    497     var d = document.getElementById("tab").getElementsByTagName("div");
    498     function go_to(ao) {
    499         for (var i = 0; i < h.length; i++) {
    500             if (ao - 1 == i) {
    501                 d[i].className += "block";
    502                 h[i].className += "up";
    503             } else {
    504                 h[i].className += " ";
    505                 d[i].className += " ";
    506             }
    507         }
    508     }
    509 </script>
    510 </body>
    511 </html>
    View Code

    主要代码:

    • css部分:
     1 #tab {
     2     margin: 0;
     3      610px;
     4     height: 205px;
     5     position: relative;
     6     float: left;
     7     background: green;
     8 }
     9 
    10 #tab h3 {
    11     float: left;
    12      122px;
    13     height: 26px;
    14     line-height: 26px;
    15     margin: 0;
    16     font-size: 12px;
    17     cursor: pointer;
    18     text-align: center;
    19     color: #ff00ff;
    20     background: #aacc33;
    21 }
    22 
    23 #tab .block {
    24     display: block;/*显示*/
    25 }
    26 
    27 #tab .up {
    28     background:blue;
    29 }
    30 
    31 #tab div {
    32     display:none;/*不显示*/
    33     float: left;
    34     top: 26px;
    35     left: 0;
    36      610px;
    37     height: 179px;
    38     border: solid #eee;
    39     border- 0 1px 1px;
    40     background: #0f0f0f;
    41 }
    View Code
    • JavaScript部分:
     1 <script>
     2     var h = document.getElementById("tab").getElementsByTagName("h3");/*多个h3组成数组*/
     3     var d = document.getElementById("tab").getElementsByTagName("div");
     4     function go_to(ao) {
     5         for (var i = 0; i < h.length; i++) {
     6             if (ao - 1 == i) {
     7                 d[i].className += "block";
     8                 h[i].className += "up";
     9             } else {
    10                 h[i].className += " ";
    11                 d[i].className += " ";
    12             }
    13         }
    14     }
    15 </script>
    View Code

    截图:

    1.

    2.

     3.笔记

    《网页布局》

    margin 外边距    一个区域距离另外一个区域的距离
    padding内边距
    float:漂浮    对齐left,right
    clear:left,right,both 不允许left,right边有浮动元素


    body:
    container=header+menu+nav+aside+cotainer+footer
    header=logo+banner
    contain=left_main+right_main+bottom_main

    如果样式只用一次的话,则用id
    多次的话就用class

    网页长度最好不超过三屏
    选项卡点哪个选项显示哪个,其余则隐藏
    div+css模拟表格






    2020-02-1911:38:19

  • 相关阅读:
    自己学习并保存的一些shell命令
    【Debian学徒记事】 Debian 安装源配置
    第十三周学习总结
    第十二周学习总结
    第十一周学习总结
    第十周CTF解答
    第十周学习总结
    第九周学习总结
    第八周学习总结
    动态规划:最大子串和
  • 原文地址:https://www.cnblogs.com/jiuzhen/p/12325323.html
Copyright © 2020-2023  润新知