美文网首页
CSS 定位，导航条，背景及表格

CSS 定位，导航条，背景及表格

作者: 松雪宝宝 | 来源:发表于2018-06-07 20:51 被阅读0次

    （1）固定定位:
    当元素的position属性设置fixed时，则开启了元素的固定定位
    固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样
    不同的是：
    固定定位永远都会相对于浏览器窗口进行定位
    固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
    IE6不支持固定定位

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style type="text/css">
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
                        position: fixed;
            left: 0px;
            top: 0px;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body style="height: 5000px;">
    <div class="box1"></div>

    <div class="box4" style="width: 300px; height: 300px; background-color: orange; position: relative;">
        <div class="box2"></div>
    </div>

    <div class="box3"></div>
</body>
</html>

    (2)元素的层级:
    opacity属性在IE8及以下的浏览器中不支持
    IE8及以下的浏览器需要使用如下属性代替
    alpha(opacity=透明度)
    透明度，需要一个0-100之间的值
    0 表示完全透明
    100 表示完全不透明
    50 半透明
    这种方式支持IE6，但是这种效果在IE Tester中无法测试

            如果定位元素的层级是一样，则下边的元素会盖住上边的
        通过z-index属性可以用来设置元素的层级
        可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高，越优先显示
        
        对于没有开启定位的元素不能使用z-index

        设置元素的透明背景
        opacity可以用来设置元素背景的透明，它需要一个0-1之间的值
            0 表示完全透明
            1 表示完全不透明
            0.5 表示半透明

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的层级</title>
    <style type="text/css">
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
            z-index: 2;
            opacity: 0.5;
            filter: alpha(opacity=50);
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
            /*开启绝对定位*/
            position: absolute;
            /*设置偏移量*/
            top: 100px;
            left: 100px;
            
            z-index: 25;
            opacity: 0.5;
            filter: alpha(opacity=50);
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            /*position: relative;
            z-index: 3;*/
            position: absolute;
            top: 200px;
            left: 200px;
            z-index: 30;
            
            opacity: 0.5;
            
            filter: alpha(opacity=50);
        }
        .box4{
            width: 200px;
            height: 200px;
            background-color: orange;
            /*开启相对定位*/
            position: relative;
            /*父元素的层级再高，也不会盖住子元素*/
            z-index: 20;
            top: 500px;
        }
        .box5{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            /*开启绝对定位*/
            position: absolute;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div class="box1"></div>

    <div class="box2"></div>

    <div class="box3"></div>

    <div class="box4">
        <div class="box5"></div>
    </div>
</body>
</html>

    (3)背景：

            使用background-image来设置背景图片
        语法：background-image:url(相对路径);
        
        - 如果背景图片大于元素，默认会显示图片的左上角
        - 如果背景图片和元素一样大，则会将背景图片全部显示
        - 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
        
        可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色
        一般情况下设置背景图片时都会同时指定一个背景颜色
        
        background-image: url(img/1.png);
        
        background-repeat用于设置背景图片的重复方式
        可选值：
            repeat，默认值，背景图片会双方向重复（平铺）
            no-repeat，背景图片不会重复，有多大就显示多大
            repeat-x， 背景图片沿水平方向重复
            repeat-y，背景图片沿垂直方向重复

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style type="text/css">
        .box1{
            width: 1024px;
            height: 724px;
            margin: 0 auto;
            /*设置背景样式*/
            background-color: #bfa;
            
            background-repeat: repeat-y;
        }
    </style>

    <!-- <link rel="stylesheet" type="text/css" href="css/bgstyle.css"> -->
</head>
<body>
    <div class="box1"></div>
</body>
</html>

    (4)电驴导航条:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电驴导航条</title>
    <style type="text/css">
        .box1{
            width: 990px;
            height: 50px;
            background-color: #bfa;
            margin: 50px auto;
            /*设置为背景图片*/
            background-image: url(img/地址);
            /*设置水平方向重复*/
            background-repeat: repeat-x;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

    (5)背景偏移与定位:

            background-attachment用来设置背景图片是否随页面一起滚动
        可选值：
            scroll，默认值，背景图片随着窗口滚动
            fixed，背景图片会固定在某一位置，不随页面滚动
        不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素

        背景图片默认是贴着元素的左上角显示
        通过background-position可以调整背景图片在元素中的位置
        可选值：
            该属性可以使用 top right left bottom center中的两个值来指定一个背景图片的位置
            top left 左上
            bottom right 右下
            如果只给出一个值，则第二个值默认是center
        也可以直接指定两个偏移量
            第一个值是水平偏移量
                - 如果指定的是一个正值，则图片会向右移动指定的像素
                - 如果指定的是一个负值，则图片会向左移动指定的像素
            第二个是垂直偏移量
                - 如果指定的是一个正值，则图片会向下移动指定的像素
                - 如果指定的是一个负值，则图片会向上移动指定的像素

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景偏移与定位</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            /*width: 500px;*/
            height: 500px;
            margin: 0 auto;
            /*设置一个背景颜色*/
            background-color: #bfa;
            /*设置一个背景图片*/
            background-image: url(img/4.png);
            /*设置图片不重复*/
            background-repeat: no-repeat;
            
            /*background-position: -50px -50px;*/
            background-attachment: fixed;
        }
        body{
            height: 5000px;
            background-image: url(img/3.png);
            background-repeat: no-repeat;
            
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

    (6)背景固定:

            当背景图片的background-attachment设置为fixed时，
        背景图片的定位永远相对于浏览器的窗口

    !DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景固定</title>
    <style type="text/css">
        body{
            height: 5000px;
            background-image: url(img/地址);
            background-repeat: no-repeat;
            background-position: center;
            
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <p>我是大哥</p>
    <p>我是大哥</p>
    <p>我是大哥</p>
    <p>我是大哥</p>
</body>
</html>

    (7)按钮练习:

    做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，这个闪烁会造成一次不佳的用户体验
产生问题的原因：
    背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求
    但是我们的外部资源并不是同时加载，浏览器会在资源被使用时才去加载资源
    我们这个练习，一上来浏览器只会加载link.png
    由于hover和active的状态没有马上触发，所以hover.png和active.png并不是立即加载的
    当hover被触发时，浏览器才去加载hover.png
    当active被触发时，浏览器才去加载active.png
    由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况
为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了
然后再通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite）
优点：
    1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高了用户体验。
    2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮练习</title>
    <style type="text/css">
    
        .btn:link{
            /*将a转换为块元素*/
            display: block;
            /*设置宽高*/
            width: 93px;
            height: 29px;
            /*设置背景图片*/
            background-image: url(img/btn/地址);
            /*设置背景图片不重复*/
            background-repeat: no-repeat;
        }
        .btn:hover{
            /*当是hover状态时，希望图片可以向左移动*/
            background-position: -93px 0px;
        }
        .btn:active{
            /*当是active状态时，希望图片再向左移动*/
            background-position: -186px 0px;
        }
    </style>
</head>
<body>
    <!-- 创建一个超链接 -->
    <a href="#" class="btn"></a>
</body>
</html>

    （8）雪碧图:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雪碧图</title>
    <style type="text/css">
        .box1{
            width: 129px;
            height: 48px;
            background-image: url(img/地址);
        }
        .box2{
            width: 42px;
            height: 30px;
            background-image: url(img/地址);
            /*设置偏移量*/
            background-position: -58px -338px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

    (10)简写背景属性:
    注意：background
    - 通过该属性可以同时设置所有背景相关的样式
    - 没有顺序的要求，谁在前睡在后都行
    - 也没有数量的要求，不写的样式就使用默认值

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简写背景属性</title>
    <style type="text/css">
        body{
            height: 5000px;
            /*设置一个背景颜色*/
            /*background-color: #bfa;*/
            /*设置一个背景图片*/
            /*background-image: url(img/3.png);*/
            /*设置背景不重复*/
            /*background-repeat: no-repeat;*/
            /*设置背景图片的位置*/
            /*background-position: center center;*/
            /*设置背景图片不随滚动条滚动*/ 
            /*background-attachment: fixed;*/
            background-color: #bfa;
            
            background: #bfa url(img/3.png) center center no-repeat fixed;
        }
    </style>
</head>
<body>
    
</body>
</html>

    （11）表格:
    在HTML中，使用table标签来创建一个表格
    在table标签中使用tr来表示表格中的一行，有几行就有几对tr
    在tr中需要使用td来创建一个单元格，有几个单元格就有几个td

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    
    <table border="1" width="40%" align="center">
        
        <tr>
            
            <td>A1</td>
            <td>A2</td>
            <td>A3</td>
            <td>A4</td>
        </tr>
        <tr>
            <td>B1</td>
            <td>B2</td>
            <td>B3</td>
            <!-- rowspan用来设置纵向的合并单元格 -->
            <td rowspan="2">B4</td>
        </tr>
        <tr>
            <td>C1</td>
            <td>C2</td>
            <td>C3</td>
        </tr>
        <tr>
            <td>D1</td>
            <td>D2</td>
            <!-- colspan横向的合并单元格 -->
            <td colspan="2">D3</td>
        </tr>
    </table>
</body>
</html>

    (12)给表格添加样式:

    设置表格的宽度

           border:1px solid black;
        table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离
        border-spacing: 10px;
        
        border-collapse可以用来设置表格的边框合并
        如果设置了边框合并，则border-spacing自动失效   
        可以使用th标签来表示表头中的内容，
        它的用法和td一样，不同的是它会有一些默认

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style type="text/css">
        table{
            width: 300px;
                       margin: 0 auto; 
            border-collapse: collapse;
            /*设置背景样式*/
            /*background-color: #bfa;*/
        }
        /*设置边框*/
        th, td{
            border: 1px solid black;
        }
        /*设置隔行变色*/
        tbody > tr:nth-child(even){
            background-color: #bfa;
        }
        /*鼠标移入到tr以后，改变颜色*/
        tr:hover{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <table>
        <tr>
        
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>住址</th>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪</td>
            <td>男</td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>和尚</td>
            <td>男</td>
            <td>流沙河</td>
        </tr>
        <tr>
            <td>4</td>
            <td>唐僧</td>
            <td>男</td>
            <td>女儿国</td>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪</td>
            <td>男</td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>和尚</td>
            <td>男</td>
            <td>流沙河</td>
        </tr>
        <tr>
            <td>4</td>
            <td>唐僧</td>
            <td>男</td>
            <td>女儿国</td>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪</td>
            <td>男</td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>和尚</td>
            <td>男</td>
            <td>流沙河</td>
        </tr>
        <tr>
            <td>4</td>
            <td>唐僧</td>
            <td>男</td>
            <td>女儿国</td>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪</td>
            <td>男</td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>和尚</td>
            <td>男</td>
            <td>流沙河</td>
        </tr>
        <tr>
            <td>4</td>
            <td>唐僧</td>
            <td>男</td>
            <td>女儿国</td>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪</td>
            <td>男</td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>和尚</td>
            <td>男</td>
            <td>流沙河</td>
        </tr>
        <tr>
            <td>4</td>
            <td>唐僧</td>
            <td>男</td>
            <td>女儿国</td>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪</td>
            <td>男</td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>和尚</td>
            <td>男</td>
            <td>流沙河</td>
        </tr>
        <tr>
            <td>4</td>
            <td>唐僧</td>
            <td>男</td>
            <td>女儿国</td>
        </tr>
    </table>
</body>
</html>

    (13)长表格:

        有一些情况下表格是非常的长的，这时就需要将表格分为三个部分，表头，表格的主体，表格底部
    在HTML中为我们提供了三个标签：
        thead 表头
        tbody 表格主体
        tfoot 表格底部
        
    这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，都需要直接写到table中，tr需要写在这些标签当中
        
    thead中的内容，永远会显示在表格的头部
    tfoot中的内容，永远都会显示表格的底部
    tbody中的内容，永远都会显示表格的中间
    
    如果表格中没有写tbody，浏览器会自动在表格中添加tbody
    并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
    通过table > tr 无法选中行 需要通过tbody > tr

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>长表格</title>
</head>
<body>
    <table>
        
        <thead>
            <tr>
                <th>日期</th>
                <th>收入</th>
                <th>支出</th>
                <th>合计</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td>合计</td>
                <td>100</td>
            </tr>
        </tfoot>

        <tbody>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2017.03.01</td>
                <td>500</td>
                <td>300</td>
                <td>2000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

    (14)表格的布局:

    以前表格更多的情况实际上是用来对页面进行布局的，但是这种方式早已被CSS所淘汰了
表格的列数由td最多的那行决定
表格是可以嵌套，可以在td中在放置一个表格

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的布局</title>
</head>
<body>
    
    <table border="1" width="100%">
        <tr height="100px">
            <td colspan="2"></td>
        </tr>
        <tr height="400px">
            <td width="20%"></td>
            <td width="80%">
                <table border="1" width="100%" height="100%">
                    <tr>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr height="100px">
            <td colspan="2"></td>
        </tr>
    </table>
</body>
</html>

    （1）

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        table{
            width: 694px;
            height: 50px;
            margin: 0 auto;
            border: 1px solid yellowgreen;
            border-collapse: collapse;
        }
        td{
            border: 1px solid gold;
        }
        td{
            width: 100px;
            height: 50px;
            margin: 0 auto;
            color: pink;
            border: 16px "雅黑";
        }
        td:hover{
            flood-color: red;
            background: gold;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <table>
        <tr align="center">
            <td><a href="#">首页</a></td>
            <td><a href="#">公司简介</a></td>
            <td><a href="#">解决方案</a></td>
            <td><a href="#">公司新闻</a></td>
            <td><a href="#">行业动态</a></td>
            <td><a href="#">招贤纳才</a></td>
            <td><a href="#">联系我们</a></td>
        </tr>
    </table>
</body>
</html>
    a.gif

    (2)

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>玫瑰花</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-image: url(img/pp.png);
            background-position: -110px -150px;
            margin: 0 auto;
            border: solid black 2px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
    c.gif q.gif

    (3)

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻页</title>
    <style type="text/css">
        .box1{
            width: 960px;
            height: 42px;
            margin: 0 auto;
            border: 1px solid;
        }
        ul{
            list-style: none;
            margin: 5px 150px;
        }
        li{

            float: left;
            margin: 0px 5px;
        }
        ul .x{
            background-color: gold;
        }
        a{
            text-decoration: none;
            color: black;
            display: block;
            padding:5px 10px;
        }
        a:hover{
            background-color: red;
            color: white;
        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li class="x"><a href="#">上一页</a></li>
            <li class="x"><a href="#">1</a></li>
            <li class="x"><a href="#">2</a></li>
            <li class="x"><a href="#">3</a></li>
            <li class="x"><a href="#">4</a></li>
            <li>...</li>
            <li class="x"><a href="#">17</a></li>
            <li class="x"><a href="#">18</a></li>
            <li class="x"><a href="#">19</a></li>
            <li class="x"><a href="#">20</a></li>
            <li class="x"><a href="#">下一页</a></li>
        </ul>
    </div>
</body>
</html>
    d.gif

    相关文章

      网友评论

          本文标题：CSS 定位，导航条，背景及表格

          本文链接：https://www.haomeiwen.com/subject/ltdnsftx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|CSS 定位，导航条，背景及表格|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！