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图片显示不完全，现实滚动条
时间： 2024-10-05 05:37:19