標籤：技術 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_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）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
