首页 > 代码库 > python ：HTML+CSS （Position）

python ：HTML+CSS （Position）

2024-08-21 15:34:53   226人阅读

position_fixed固定在某一个页面上

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg_head{
            height: 60px;
            background-color: black;
            color: white;
            position: fixed;
            /*position头部固定*/
            top :0;
            left:0;
            right:0;

        }
        .pg_body{
             background-color:#dddddd;
             height: 5000px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<!--position fixed-->
<div class="pg_head"> 头部</div>
<div class="pg_body">内容</div>
</body>
</html>
position_fixed 固定在某一个页面上

position中 relative和 absolute的结合使用

技术分享 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>

</head>
<body>
 <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
        <div style="position: absolute;left:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
    </div>
    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">

        <div style="position: absolute;right:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
    </div>
    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">

        <div style="position: absolute;right:0;top:0;width: 50px;height: 50px;background-color: black;"></div>
    </div>
</body>
</html>
position中 relative和 absolute的结合使用

　IE浏览器显示图片是有蓝色边框的

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img {
            border: 0;
        }
    </style>
</head>

<body>
<div>

    <!--默认img图片有蓝色的边框，如果border: 0;就可以去掉-->
    <a href="http://www.baidu.com">
        <img src="7.png"  style="width: 820px; " alt="mei"/>
        <!--或者-->
         <img src="7.png"  style="width: 820px;border: 0; " alt="mei"/>
    </a>
</div>
</body>
</html>
IE浏览器显示图片是有蓝色边框的如何去掉

overflow图片显示不完全，现实滚动条

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<div style="width:100px;height: 100px; overflow: hidden">-->
    <!-- 按外面的大小隐藏图片大小overflow: hidden-->
    <div style="width:100px;height: 100px; overflow: auto">
        <!--图片大小带滚动条overflow: auto-->
    <div>
        <a><img src="7.png"/></a>
    </div>
</div>
</body>
</html>
overflow图片显示不完全，现实滚动条

 

python ：HTML+CSS （Position）


联系
我们