zoukankan      html  css  js  c++  java
  • 网站头部导航

    为了实现上面这个效果,完整版代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Document</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .nav{
                width: 960px;
                height: 50px;
                border: 1px solid red;
                margin: 100px auto;
            }
            .nav ul{
                /*去掉小圆点*/
                list-style: none;
            }
            .nav ul li{
                float: left;
                width: 120px;
                height: 50px;
                /*让内容水平居中*/
                text-align: center;
                /*让行高等于nav的高度,就可以保证内容垂直居中*/
                line-height: 50px;
            }
            .nav ul li a{
                display: block;
                width: 120px;
                height: 50px;
            }
            /*两个伪类的属性,可以用逗号隔开*/
            .nav ul li a:link , .nav ul li a:visited{
                text-decoration: none;
                background-color: purple;
                color:white;
            }
            .nav ul li a:hover{
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <div class="nav">
            <ul>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
            </ul>
        </div>
    </body>
    </html>

    1.div默认宽度全屏,高度自适应(根据里面内容的高度),如果定义了div高度,里面内容的高度大于这个高度,就会出现超出边界的情况
    比如上例中,如果把li的float属性去掉,会出现超出边界的情况

     

    3.list-style: none;属性去掉li的默认原点

    4.display: block;换成display: inline-block;效果一样,让a标签可以设置宽高,默认内联元素无法设置宽高

    5.text-decoration:none去除下划线 

    6.

  • 相关阅读:
    Unique Binary Search Trees 解答
    Unique Paths II 解答
    Unique Paths 解答
    Maximum Subarray 解答
    Climbing Stairs 解答
    House Robber II 解答
    House Robber 解答
    Valid Palindrome 解答
    Container With Most Water 解答
    Remove Duplicates from Sorted List II 解答
  • 原文地址:https://www.cnblogs.com/cowboybusy/p/9096413.html
Copyright © 2011-2022 走看看