CSS练习

逃离我推掉我的手 2022-05-09 00:18 249阅读 0赞

1.导航栏

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        ul{
            list-style-type:none
        }
        li{
            display: inline-block;
            width:20%;
            background:grey;
            padding-top: 10px;
            padding-bottom: 10px;
            text-align: center;
            font-size: large;
            text-decoration: none;
        }
        li:hover{
            background: black;
            color: white;
            text-decoration: none;
        }
        a:hover{
            color: snow;
            text-decoration: none;
        }
    </style>
    <body>
    <ul style="list-style:none">
        <li ><a href="http://www.w3school.com.cn/html/index.asp">HTML</a></li>
        <li ><a href="http://www.w3school.com.cn/css3/index.asp">CSS</a></li>
        <li ><a href="http://www.w3school.com.cn/js/index.asp">JS</a></li>
        <li ><a href="https://blog.csdn.net/forever_wen">Python</a></li>
    
    </ul>
    
    </body>
    </html>

![在这里插入图片描述][70]2.分页练习

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            ul {
                list-style-type: none;
    
            }
    
            li {
                text-decoration: none;
                display: inline-block;
                width: 10%;
                padding-top: 5px;
                padding-bottom: 5px;
                background: snow;
                color: #333333;
    
                text-align: center;
                font-size: large;
                text-transform: capitalize;
    
            }
    
    
            li:hover {
                background: green;
                color: snow;
            }
    
            a:hover {
    
                color: snow;
    
            }
            .active{
                background:  gray;
            }
    
            #pageintor{
                width: 80%;
                margin: 0 auto;
            }
    
        </style>
    </head>
    <body>
    
    
    <div id="pageintor">
    <ul>
        <li><a href="#">上一页</a></li>
        <li  class="active"><a   href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">28</a></li>
        <li><a href="#">下一页</a></li>
    
    
    </ul>
        </div>
    </body>
    </html>

![在这里插入图片描述][70 1]

[70]: /images/20220509/0d74c14a8b8141dc82f97fddbf07d4fb.png
[70 1]: /images/20220509/40cc32a6f9bd41adacaf397d93e3ff00.png