标签：技术 baidu 20px 技术分享 大小 bottom lap 结合 class
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中 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>
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>
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>
标签：技术 baidu 20px 技术分享 大小 bottom lap 结合 class
原文地址：http://www.cnblogs.com/xuehuahongmei/p/6076038.html
