• 特效导航栏


    我们来制作一个导航栏:

    Lion dancing with a history of more 2,000 years has been a form of traditional Chinese folk art. During the dancing, the two performers wear the one lion uniform with one controlling the actions of the head and the other controlling the actions of the body and tail. They cooperate skillfully with each other in order to imitate the various and vivid actions of lions. As the monarch of all beasts, lions symbolize blessedness and fortune, therefore, lion dancing is usually performed during the Spring Festival and other festivals. It probably appears in other such important occasions as business opening and wedding ceremonies, attracting many individuals to appreciate.

     

     


     

     

    首先我们利用无序列表当作容器,里面放入a标签作为连接,其次给a标签设置成为块元素开始浮动,简单的布局就设置好了!

    .nav li {
                    float: left;
                    /*左浮动*/
                     20%;
                }
                
                .nav a {
                    display: block;
                    /*设置a为块元素*/
                     100%;
                    text-align: center;
                    /*文字居中*/
                    padding: 8px;
                    /*内边距*/
                    text-decoration: none;
                    /*去掉下划线*/
                    /*font-weight:bold;*/
                    /*加粗*/
                    font-size: 20px;
                    /*字体大小*/
                    border-bottom: 3px solid #aaa;
                    /*设置边框*/
                    font-family:Segoe script;
                    /*font-family:Verdana, Arial, Helvetica, sans-serif;*/
                }

     


    以下设置几个伪类提高用户界面的美观性:

    :link  选择所有未被访问的链接  a:link;

    :visited  选择所有已被访问的链接  a:visited;

    :active  选择活动链接  a:active;

    :hover  选择鼠标指针位于其上的链接  a:hover;

    注意:a:hover 必须跟在 a:link 和 a:visited后面,a:active 必须跟在 a:hover后面

    text-decoration:none; 去除文字装饰(消除超链接的下划线);

    list-style: none;  去除列表项前的装饰。


    <!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <title>Document</title>
            <style type="text/css">
                * {
                    padding: 0;
                    margin: 0;
                }
                
                .nav {
                    list-style: none;
                    /*去除列表项目符号*/
                    /*background:  pink;*/
                    /*背景颜色粉色*/
                    width: 800px;
                    /*宽度800*/
                    margin: 100px auto 20px;
                    /*居中*/
                    overflow: hidden;
                }
                
                .nav li {
                    float: left;
                    /*左浮动*/
                    width: 20%;
                }
                
                .nav a {
                    display: block;
                    /*设置a为块元素*/
                    width: 100%;
                    text-align: center;
                    /*文字居中*/
                    padding: 8px;
                    /*内边距*/
                    text-decoration: none;
                    /*去掉下划线*/
                    /*font-weight:bold;*/
                    /*加粗*/
                    font-size: 20px;
                    /*字体大小*/
                    border-bottom: 3px solid #aaa;
                    /*设置边框*/
                    font-family:Segoe script;
                    /*font-family:Verdana, Arial, Helvetica, sans-serif;*/
                }
                
                .nav a:link {
                    color: palevioletred;
                }
                
                .nav a:visited {
                    color: black;
                    border-bottom: 5px solid brown;
                }
                
                .nav a:hover {
                    background: linear-gradient(to bottom, pink, black);
                    color: white;
                }
                
                .nav a:active {
                    color: red;
                    background: black;
                }
            </style>
    
        </head>
    
        <body>
            <ul class="nav">
                <li>
                    <a href="#">shouye</a>
                </li>
                <li>
                    <a href="#">jiaoben</a>
                </li>
                <li>
                    <a href="#">wolaile</a>
                </li>
                <li>
                    <a href="#">kkp</a>
                </li>
                <li>
                    <a href="#">duzi</a>
                </li>
            </ul>
        </body>
    
    <p style="font-family:Segoe script; font-size:10px; 300px; display:block;margin: auto; text-indent:2em;">Lion dancing with a history of more 2,000 years has been a form of traditional Chinese folk art. During the dancing, the two performers wear the one lion uniform with one controlling the actions of the head and the other controlling the actions of the body and tail. They cooperate skillfully with each other in order to imitate the various and vivid actions of lions. As the monarch of all beasts, lions symbolize blessedness and fortune, therefore, lion dancing is usually performed during the Spring Festival and other festivals. It probably appears in other such important occasions as business opening and wedding ceremonies, attracting many individuals to appreciate.</p>
    </html>

     

  • 相关阅读:
    office(Word、Excel、PPT等图标异常和桌面无新建解决方案)
    CentOS7安装搭建.Net Core 2.0环境-详细步骤
    Win7系统system进程句柄数一直增加解决方案
    安装.Net Framework 4.6.2时出现“无法建立到信任根颁发机构的证书链”解决方法
    css关于定位那些事情
    1份2015计划书
    js关于弹也遮罩层
    每日一句(2014-10-23)
    每日一句(2014-10-17)
    每日一句(2014-10-16)
  • 原文地址:https://www.cnblogs.com/niuyaomin/p/11623533.html
Copyright © 2020-2023  润新知