一、圖片水平居中
img必須被一個容器包裹起來,div、p、span都可以,但是建議用p。
方法如下:
<p style=“text-align:center”><img src="……"></p>
二、圖片垂直居中
外部容器設(shè)置:display:table,img標簽外嵌套一個span標簽,并設(shè)置span的顯示模式為display:table-cell;vertical-align:middle。
三、用表格布局時,如何取消td之間的空隙
table{border:0;cellspacing:0;cellpadding:0;border-collapse:collapse;}
table tr td{border:1px solid #e8e8e8;}
四、表格跨列后設(shè)置列寬不起作用
<table style="table-layout:fixed">
<colgroup>
<col style="width:15%;"></col>
<col style="width:80%;"></col>
<col style="width:5%;"></col>
<col></col>
</colgroup>
然后接正常的跨列的行
五、解決頁面中的兩個window.onload沖突的問題
使用Jquery中的$().ready(function(){});方法
六、設(shè)置背景色透明,文字不透明
background-color:rgba(0,0,0,0.5)
七、背景圖填充的幾種方法
①background-size:auto
auto是默認值,不改變背景圖片的原始高度和寬度;
②background-size:<長度值>
成對出現(xiàn)如200px 50px,將背景圖寬高依次設(shè)置為前面兩個值,當設(shè)置一個值時,將其作為圖片寬度值來等比縮放;
③background-size:<百分比>
當出現(xiàn)0%~100%之間的任何值,將背景圖寬高依次設(shè)置為所在元素寬高乘以前面百分比得出的數(shù)值,當設(shè)置一個值時同上;
④background-size:cover
覆蓋的意思,即將背景圖等比縮放以填滿整個容易;
⑤background-size:contain
容納的意思,即將背景圖等比縮放至某一邊緊貼容器邊緣為止。
八、豎版一屏按百分比布局
html,body{height:100%;}
#container{min-height:100%;}
*html #container{height:100%;}
.box{width:100%;height:100%;}
九、手機網(wǎng)頁調(diào)整大小
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
width=device-width :表示寬度是設(shè)備屏幕的寬度
initial-scale=1.0:表示初始的縮放比例
minimum-scale=0.5:表示最小的縮放比例
maximum-scale=2.0:表示最大的縮放比例
user-scalable=yes:表示用戶是否可以調(diào)整縮放比例