美文网首页
HTML元素定位

HTML元素定位

作者: WANGLIN_HZ | 来源:发表于2018-06-07 19:17 被阅读0次
<!DOCTYPE html>
<html>
<head>
    <title>元素的层级</title>
    <style type="text/css">
        .box1{
            width: 100px;
            height: 200px;
            background-color: red;
            position: relative;
            z-index: 2;
        }   
        .box2{
            width: 100;
            height: 100;
            background-color: blue;
            position: absolute;
            top: 50px;
            left: 50px;
            z-index: 1
        }
        .box3{
            width: 200;
            width: 200px;
            background-color: yellow;
            /*position: relative;*/
            /*z-index: 3;*/
            position: absolute;
            top: 200px;
            left: 100px;
            z-index: 30;
            opacity: 1;
        }
        .box4{
            width: 100;
            width: 100px;
            background-color: skyblue;
            position: relative;
        }
        .box5{
            width: 100;
            width: 100px;
            background-color: rgb(229,122,111);
            position: relative;
        }
    </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>

<!DOCTYPE html>
<html>
<head>
    <title>固定定位</title>
    <style type="text/css">
        .box1{
            width: 50px;
            height: 50px;
            background-color: red

        }
        .box2{
            width: 80px;
            height: 80px;
            background-color: rgb(177,199,210);
            position: fixed;
            left: 0px;
            top: 0px;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: rgb(210,219,222);
        }
        .box4{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>

固定定位

  • 固定定位的元素会被锁定在屏幕的某个位置上，当 访问者滚动网页时，固定元素会在屏幕上保持不动。
  • 当将position属性设置为fixed时，则开启了元素的 固定定位。
  • 当开启了固定定位以后，可以使用top、right、
    bottom、left四个属性对元素进行定位。
  • 固定定位的其他特性和绝对定位类似。

3


<!DOCTYPE html>
<html>
<head>
    <title>表格</title>
    <style type="text/css">
    
        }
    </style>
</head>
<body>
    <table border="1" width="40%" align="center">
        <tr>
            <td>C2</td>
            <td>C3</td>
            <td>C4</td>
            <td rowspan="2">C5</td>
        </tr>
        <tr>
            <td>B2</td>
            <td>B3</td>
            <td>B4</td>

            
        </tr>
        <tr>
            <td>D2</td>
            <td>D3</td>
            <td colspan="2">D4</td>
            
        </tr>
    </table>
</body>
</html>
  • 合并单元格指将两个或两个以上的单元格 合并为一个单元格。
  • 合并单元格可以通过在th或td中设置属性 来完成。
  • 横向合并
    colspan
  • 纵向合并
    rowspan
<!DOCTYPE html>
<html>
<head>
    <title>给表格添加样式</title>
    <style type="text/css">
        table{
            width: 300px;
            margin: 0 auto;
            /*border: 1px solid black;*/
            /*border-spacing: 0px;*/
            /*设置表格边框的合并，则border-spacing失效*/
            border-collapse: collapse;
            


        }
        th,td{
            border: 1px solid black;
        }
        tbody tr:nth-child(even){
            background-color: #bfa;
        }
        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>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>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>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>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>
    </table>
</body>
</html>
  • 使用table标签创建一个表格。
  • tr表示表格中的一行。
  • tr中可以编写一个或多个th或td。
  • th表示表头。
  • td表示表格中的一个单元格

4

<!DOCTYPE html>
<html>
<head>
    <title>背景</title>
    <style type="text/css">
        .box1{
            width: 1000px;
            height: 1000px;
            background-color: green;
            margin: 0 auto;
            background-image: url(img/by.jpg);
            background-repeat: repeat-y;

        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>背景</title>
    <style type="text/css">
        .box1{
            width: 1000px;
            height: 1000px;
            background-color: green;
            margin: 0 auto;
            background-image: url(img/by.jpg);
            background-repeat: repeat-y;

        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>
  • background-repeat用于控制背景图片的 重复方式。
  • 如果只设置背景图片默认背景图片将会使 用平铺的方式，可以通过该属性进行修改。
  • 可选值：
    repeat：默认值，图片左右上下平铺
    no-repeat：只显示图片一次，不会平铺
    repeat-x：沿x轴水平平铺一张图片
    repeat-y：沿y轴水平平铺一张图片

5


<!DOCTYPE html>
<html>
<head>
    <title>背景偏移与定位</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-image: url();
            background-repeat: no-repeat;
            height: 5000px;
            background-attachment: fixed;
        }
        .box1{
            width: 500px;
            height: 500px;
            margin: 0 auto;
            background-color: rgb(220,230,220);
            background-repeat:no-repeat;
            background-image: url(img/1by.jpg);
            background-position: -50px -50px;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>
  • background-attachment用来设置背景图 片是否随页面滚动。
  • 可选值：
    scroll：随页面滚动
    fixed：不随页面滚动

6

<!DOCTYPE html>
<html>
<head>
    <title>背景固定</title>
    <style type="text/css">
        body{
            height: 5000px;
            background-image: url(img/laohu.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    
</body>
</html>

7

<title>表格</title>
    <style type="text/css">
    
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>B2</td>
        </tr>
    </table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>表格布局</title>

</head>
<body>
    <table border="1" width="100%">
        <tr height="100px">
            <td colspan="2"></td>
            
        </tr>
        <tr height="500px">
            <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>
    </table>
</body>
</html>
  • 在Web的历史中，HTML的表格发挥了极大的作用。最 初创建表格就是为了以表格的形式显示数据，后来表格 变成了一个极受欢迎的布局工具。
  • 但是有了CSS以后，CSS在布局网页方面实际上会更出 色，所以现在我们使用表格的作用只有一个，就是用来 表示格式化的数据。
  • HTML中的表格可以很复杂，但是通常情况下我们不需 要创建过于复杂的表格。

8

<!DOCTYPE html>
<html>
    <head>
        <title>作业</title>
        <meta charset="utf-8" />
        <style type="text/css">
            div{
                width: 400px;
                border-top: solid 2px red;
                border-bottom: solid 4px gray;
                padding: 10px 10px;
            }
            
        </style>
    </head>
    <body>
        <div>新闻标题</div>
    </body>
</html>

9

<!DOCTYPE html>
<html>
<head>
    <title>长表格</title>

</head>
<body>
    <table>
        <thead>
            <tr>
                <th>日期</th>
                <th>收入</th>
                <th>支出</th>
                <th>合计</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2018.03.01</td>
                <td>5000</td>
                <td>6000</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2018.03.01</td>
                <td>5000</td>
                <td>6000</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2018.03.01</td>
                <td>5000</td>
                <td>6000</td>
                <td>2000</td>
            </tr><tr>
                <td>2018.03.01</td>
                <td>5000</td>
                <td>6000</td>
                <td>2000</td>
            </tr><tr>
                <td>2018.03.01</td>
                <td>5000</td>
                <td>6000</td>
                <td>2000</td>
            </tr><tr>
                <td>2018.03.01</td>
                <td>5000</td>
                <td>6000</td>
                <td>2000</td>
            </tr><tr>
                <td>2018.03.01</td>
                <td>5000</td>
                <td>6000</td>
                <td>2000</td>
            </tr><tr>
                <td>2018.03.01</td>
                <td>5000</td>
                <td>6000</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>2018.03.01</td>
                <td>5000</td>
                <td>6000</td>
                <td>2000</td>
            </tr><tr>
                <td>2018.03.01</td>
                <td>5000</td>
                <td>6000</td>
                <td>2000</td>
            </tr><tr>
                <td>2018.03.01</td>
                <td>5000</td>
                <td>6000</td>
                <td>2000</td>
            </tr><tr>
                <td>2018.03.01</td>
                <td>5000</td>
                <td>6000</td>
                <td>2000</td>
            </tr><tr>
                <td>2018.03.01</td>
                <td>5000</td>
                <td>6000</td>
                <td>2000</td>
            </tr><tr>
                <td>2018.03.01</td>
                <td>5000</td>
                <td>6000</td>
                <td>2000</td>
            </tr><tr>
                <td>2018.03.01</td>
                <td>5000</td>
                <td>6000</td>
                <td>2000</td>
            </tr><tr>
                <td>2018.03.01</td>
                <td>5000</td>
                <td>6000</td>
                <td>2000</td>
            </tr>
            
        </tbody>
        <tfoot>
            <td></td>
            <td></td>
            <td>余额</td>
            <td>100</td>
        </tfoot>
    </table>
</body>
</html>
  • caption表示表格的标题。
  • thead表示表格的头部。
  • tbody表示表格的主体。
  • tfoot表示表格的底部。

10

<!DOCTYPE html>
<html>
<head>
    <title>按钮练习</title>
    <style type="text/css">
        .an:link{
            display: block;
            width: 500px;
            height: 400px;
            background-image: url();
            background-repeat: no-repeat;
        }
        .an:hover{
            /*background-image: url();*/
            background-position: -93 0px;

        }
        .an:active{
            /*background-image: url();*/
            background-position: -186 0px;
        }
    </style>
</head>
<body>
    <a href="#" class="an">超链接</a>
</body>
</html>

相关文章

网友评论

      本文标题：HTML元素定位

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

      延伸阅读

      深度阅读

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

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|HTML元素定位|投稿指南|网站地图|RSS订阅|排版工具|手机版

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

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

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

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

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