HTML实现添加内容自动样式(到底应该怎样描述啊~~~~)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/c9316/article/details/79959728

代码:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
    <style type="text/css" media="screen">
        body,ul,li{
            margin:0;
            padding:0;
        }
        ul li{
            list-style-type: none;
            float:left;    
        }
        ul{
            height: 50px;
        }
        .firsta{
            border-radius: 10px  0  0 10px;
        }
        .lasta{
            border-radius: 0 10px 10px 0 ;
        }
        a{
            text-decoration: none;
            display:block;
            background-color:#2f3e45;
            color:white;
            height: 50px;
            width: 100px;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
        <ul>
            <li><a class="firsta" href="#">下拉菜单</a></li>
            <li><a href="#">下拉菜单</a></li>
            <li><a href="#">下拉菜单</a></li>
            <li><a href="#">下拉菜单</a></li>
            <li><a class="lasta" href="#">下拉菜单</a></li>
        </ul>
    <h3>我是测试文字</h3>
</body>

</html>

    一开始将ul放到一个div里面,发现只要内容变多 超出div,就掉出去了,看不到全部内容。看了别人的代码,发现可以不用div,直接用ul,可以给ul一个类名,以此设置其样式(我懒,没有通过类名给ul设置样式,这样是不好的,尤其代码很多很多的时候)。然后给a标签设置样式,首先将其转为block样式,设置宽高文字样式(字体颜色居中等),当给a设置宽高后,你在body标签里不论添加多少内容都可以实现一种一劳永逸的感觉,不需要额外设置样式了。

    原理……我还不是很清楚。待写吧…………

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页