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;
    }
  • 相关阅读:
    动手动脑——异常处理
    JAVA异常处理总结
    打印沙漏
    暑假第八周进度报告
    暑假第七周进度报告
    暑假第六周进度报告
    暑假第五周进度报告
    暑假第四周进度报告
    暑假第三周进度报告
    暑假第二周进度报告
  • 原文地址:https://www.cnblogs.com/500m/p/13924588.html
Copyright © 2011-2022 走看看