zoukankan      html  css  js  c++  java
  • css

    1, index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>头部导航</title>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <div class="header">
            <div class="main">
                <ul class="nav">
                    <li><a href="" class="active">首页</a></li>
                    <li><a href="">服务</a></li>
                    <li><a href="">产品</a></li>
                    <li><a href="">活动</a></li>
                    <li><a href="">新闻</a></li>
                    <li class="right"><a href="">联系</a></li>
                </ul>
            </div>
        </div>
    </body>
    </html>

    2 ,  样式重置文件 reset.css

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    a{
        text-decoration: none;
    }

    3, 页面样式文件

    @import url(./reset.css);
    
    body{
        min- 1200px;
    }
    .main{
         1200px;
        margin: 0 auto;
    }
    .header{
        background: skyblue;
        height: 60px;  /* 定义高度,否则 ul 下方会有白边 */
    }
    
    ul.nav>li{
        float: left;
        line-height: 60px;
        text-align: center;
    }
    ul.nav>li.right{
        float: right;
    }
    ul.nav>li>a{
        padding: 0 20px;
        /* 块显示才可以撑开 */
        display: inline-block; 
    }
    
    a.active{
        font-weight: 600;
    }
    
    a:hover{
        background-color: #282828;
        color: skyblue;
    }
    
    a{
        color: #282828;
    }
  • 相关阅读:
    Rediect to ...
    [VSTO] warning CS0467 解决方案
    [HTTP]Nonocast.http post方法
    2013年上半年读过的书-无责任书评
    Cordova deploy on Android
    First App on Phonegap | Cordova
    Windows store app[Part 4]:深入WinRT的异步机制
    Windows store app[Part 3]:认识WinRT的异步机制
    Windows store app[Part 2]:全新的File System与Uri不匹配的问题
    Windows store app[Part 1]:读取U盘数据
  • 原文地址:https://www.cnblogs.com/500m/p/13924588.html
Copyright © 2011-2022 走看看