zoukankan      html  css  js  c++  java
  • css设定水平导航栏

    有两种设定水平导航栏的方式:(导航栏等于链接列表)

     li元素设定为1.行内(inline)或2.进行浮动(float:left)

    第一种无法保证链接的宽度相同;

     li

    {

    display:inline; 

    第二种可以保证宽度,设定a为区块元素,并且设定区块大小(例如:60px)。 

     li

    {

    float:left; 

    a

    {

     display:block;

    60px; 

    第一种的example:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    padding-top:6px;
    padding-bottom:6px;
    }
    li
    {
    display:inline;
    }
    a:link,a:visited
    {
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:6px;
    text-decoration:none;
    text-transform:uppercase;
    }
    a:hover,a:active
    {
    background-color:#7A991A;
    }
    </style>
    </head>
    <body>
    <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
    </ul>
    <p><b>注释:</b>如果您只为 a 元素设置内边距(而不设置 ul 元素),那么链接会出现在 ul 元素之外。所以,我们为 ul 元素添加了 top 和 bottom 内边距。</p>
    </body>
    </html>

     第二种example:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    }
    li
    {
    float:left;
    }
    a:link,a:visited
    {
    display:block;
    120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#bebebe;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
    }
    a:hover,a:active
    {
    background-color:#cc0000;
    }
    </style>
    </head>
    <body>
    <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
    </ul>
    </body>
    </html>
  • 相关阅读:
    利用中转输出表制作HijackDll
    webshell查杀
    说说无线路由器后门的那些事儿(1)-D-Link篇
    htpwdScan — 一个简单的HTTP暴力破解、撞库攻击脚本
    OD消息断点
    Burp Suite详细使用教程-Intruder模块详3
    burp intruder模块详解
    谈谈神的能力
    语法入门基本概念
    多项式
  • 原文地址:https://www.cnblogs.com/feng12345/p/5417654.html
Copyright © 2011-2022 走看看