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;
    }
  • 相关阅读:
    Git
    Qcon2016上海站PPT
    TeamCity
    在cmd界面,怎么样退出Node.js运行环境
    python 2.x与python3.x的区别
    d3.max()与d3.min()
    d3.svg.line() 曲线构造器
    d3.js 之SVG:矢量化图形绘制
    moment.js 时间格式化库
    directive
  • 原文地址:https://www.cnblogs.com/500m/p/13924588.html
Copyright © 2011-2022 走看看