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;
    }
  • 相关阅读:
    dubbo No provider available for the service com.alibaba.dubbo.monitor.MonitorService from registry
    mvn install
    centos mysql 数据存储目录安装位置
    maven项目依赖被改为文件夹时如何改回lib
    Oracle 用户权限分配说明
    PowerDesigner中创建Oracle表全过程记录
    Oracle创建表时涉及的参数解析
    PowerDesigner使用技巧
    关于Web服务器域名设置相关知识积累
    【转载】错误:ORA-28002: the password will expire within 7 days 解决方法
  • 原文地址:https://www.cnblogs.com/500m/p/13924588.html
Copyright © 2011-2022 走看看